CSS. Печатаем со стилем. Библиотека I2R. "Версия для печати" - такие ссылки ведут на страницы с идентичным содержанием первостепенного материала оригинальной страницы, но только предназначены они для того, чтобы выводить содержимое на бумагу.

Автор: Никита Вакорин
Источник: Umade.Ru
25.03.06

Часто на интернет-страницах встречаются ссылки с текстом “версия для печати”. Это словосочетание говорит само за себя. Такие ссылки ведут на страницы с идентичным содержанием первостепенного материала оригинальной страницы, но только предназначены они для того, чтобы выводить содержимое на бумагу. Отличный способ это делать — использовать CSS, который отлично справляется с выводом веб-страниц вашего сайта на печать.

Помню, когда я впервые пытался распечатать веб-страницу. Также помню, что мне этого не удалось сделать. Я испортил около 10 листов. На бумаге появлялась только одна четвёртая часть страницы. Мне даже думалось, что виновник моих неудач — это принтер, но в настоящее время я понимаю, что виновником был тот самый веб-сайт, дизайн которого не был рассчитан на пользователя, которому может понадобиться распечатать страницу.

Разные резолюции мониторов и разные конструкции сайтов не позволяют одинаково отображать дизайн сайта на экране и на бумаге. Поэтому приходится создавать отдельную страницу с одинаковым содержанием, но оптимизированную для печати. Есть, конечно, исключения — очень простые дизайны страниц или заранее продуманные для печати дизайны.

Что именно печатать?

Если распечатанная веб-страница идентична своей экранной копии, это не всегда есть хорошо. Даже наоборот. Лично я считаю, что при печати интернет-старницы, на бумаге должно выводиться содержимое первостепенного материала — то, за чем пользователь пришёл на эту самую страницу.

Например, если мне понравилась определённая статья, и у меня появилось желание её распечатать, то на бумаге я хочу увидеть именно эту статью, а не рекламу этого сайта или любые другие элементы страницы, которые будут отвлекать меня от чтения. В таких случаях я часто копирую статьи в текстовый редактор и уже из этого редактора распечатываю необходимый мне текст.

То же самое относиться и к печати картинок. Например, если я просматриваю галерею фотографий, открываю нужную мне фотографию в увеличенном виде на новой странице, и хочу распечатать эту фотографию, то на бумаге я предпочитаю увидеть только эту фотографию и относящийся к ней текст. Мне не нужна навигация сайта, реклама, или другие элементы страницы, не относящиеся к предмету печати. А если я собираюсь распечатать пару сотен страниц, сколько тогда лишней и зачастую дорогой краски я потрачу впустую?

Роль CSS в печати веб-страниц

Большинство сайтов, предоставляющих возможность распечатать содержимое, используют PHP и с его помощью преобразовывают оригинал страницы, или просто создают отдельные для печати страницы. Зачем? Можно обойтись без дубликатов.

Веб-страницы, предназначенные для печати, зачастую являются отдельно созданными страницами. Я не вижу ни одного достоинства у такого подхода — только недостатки. Главные из этих недостатков:

Расходуется лишний объём дискового пространства
Необходимо изменять структуру (X)HTML-кода страниц
Ненужное дублирование текста

Как быть? Использовать CSS! Экран монитора — это не единственная среда, в которой может работать CSS. Каскадные таблицы ещё предусмотрены для следующих типов носителей:

all (все)
aural (звуковой)
braille (брайль-устройство)
embossed (брайль-принтер)
handheld (портативный)
print (печатный)
projection (проектор)
screen (экран)
tty (для устройств с фиксированным размером символов)
tv (для устройств типа телевизора, с ограниченными возможностями)

В данный момент нас интересует печатный тип носителя. В качестве вводного материала по печати с помощью CSS прочитайте статью В Печать! (перевод на русский язык статьи Эрика Майера Going to Print).

“И вот в прошлое уходят проблемы с созданием и синхронизацией двух версий документа - одной для экрана, другой - для печати. И что самое приятное: сделать это проще простого.”

И действительно ничего сложного нет. Если уже есть навыки CSS-вёрстки, то создать отдельный CSS-файл проще простого. Прочитайте статью Эрика и вы поймете, что нужно скрыть ненужные элементы страницы, подрегулировать единицу измерения и размеры шрифтов, размеры отдельных элементов и так далее, после чего вы получите CSS-файл, который будет отвечать за бумажный вариант страниц, распечатанных с вашего сайта.

Распечатать эту страницу

Итак, CSS-файл для печати создан и подключён с помощью следующей строки кода, которую необходимо поместить между тэгами <head> и </head>:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Дальше, когда посетитель захочет распечатать страницу и нажмёт кнопку печати в своём браузере, то документ распечатается в задуманном виде, т.е. подключится print.css и возьмёт на себя ответственность за стиль распечатанного материала. Но как быть в том случае, когда ожидания посетителя не оправдались? Да, страница распечаталась, но не в том виде, в котором посетитель видел эту страницу на экране. В таких случаях можно предоставить выбор в виде ссылки, щёлкнув по которой, подключается созданный CSS-файл для печати, после чего внешний вид страницы меняется и остаётся только то, что будет распечатано. Ожидания посетителя будут оправданы.

Как подключать новые CSS-файлы?

Теперь, необходимо, чтобы при нажатии ссылки, подключался необходимый нам CSS-файл. Я выбираю метод с использованием PHP (есть несколько вариантов с использованием JavaScript), а именно метод, который успешно работает на Zen Garden (меняет дизайны), и который Дэйв предлагает использовать любому желающему.

Код следующий:

<?php

$tempCSS = $HTTP_GET_VARS["cssfile"];

if ($tempCSS != "") {

$loadCSS = $tempCSS;

} else {

/* устанавливается CSS-файл поумолчанию в том случае, если нет строки запроса */

$loadCSS = "default.css";

};

$currentDesign = $loadCSS;

?>

Этот PHP-скрипт необходимо вставить в каждую страницу вашего сайта, где будут подгружаться новые CSS-файлы. default.css - название оригинального CSS-файла, предназначенного для экрана монитора. Также необходимо заключить между <head> и </head> следующую строку кода, которая заменяет оригинальную строку:

<link rel="stylesheet" type="text/css" href="<?php echo $loadCSS; ?>" title="default" media="screen" />

и так тоже работает:

<style type="text/css" media="all">@import "<?php echo $loadCSS ?>";</style>

Наконец, чтобы сослаться на конкретный CSS-файл и применить его к конкретной интернет-странице, необходимо прописать следующее:

<a href="thispage.html?cssfile=print.css">Изменить стиль

thispage.html — название конкретной веб-страницы, на которой будет выполняться подгруздка каскадных таблиц, а print.css — это уже непосредственно название самого CSS-файла. Будьте внимательны, и прописывайте правильные пути к файлам.

Текст Изменить стиль можно заменить любым другим. Один из популярных и понятных заголовков – версия для печати.

Печатайте на здоровье! Удачи.

Статьи по теме:

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...