CSS. Распечатываем со стилем

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

Зачем создавать отдельные для печати страницы?

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

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

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

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

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

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

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

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

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

• Расходуется лишний объём дискового пространства.
• Если сайт динамический, то появляется лишняя нагрузка на сервер.
• Необходимо изменять структуру 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">Распечатать страницу</a>

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

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

Распечатывайте со стилем! Удачи.