umade.ru

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

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-файла для печати.

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

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

Всего оставлено 13 комментариев

  1. Интересная статья, спасибо. 🙂

  2. Скляревский Е. 30 марта 2006

    Спасибо, интересный прием.

  3. Alt. 3 апреля 2006

    media screen и media print на всех страницах и все ок.

  4. Константин 7 апреля 2006

    Не дурственно.
    Благодарю за статью.
    Сегодня же переделаю свой проект.

  5. Никита Козин 14 апреля 2006

    Спасибо за статью! 🙂

  6. Евгений 17 июня 2006

    http://www.htmlbook.ru/content/?idf

    здесь то же самое, но а) без PHP и б) проще 😉

  7. Дмитрий 24 июня 2006

    Статья интересная и полезная.
    Вот только есть одна беда – попробуйте распечатать подготовленную страницу из под Опера.
    Ей, как оказалось, ровным счётом побоку, что прописано в файле print.css, т.е. изменение допустим в body под печать никаких не отображаюся на результате, Опера просто подставляет теже значения из css для экрана. Помогает только один вариант display: none , но если запретить body, то что тогда показывать при печати? 😉
    Грустно, а как побороть не знаю :((

  8. Юный программист 22 октября 2006

    Спасибо! Вы мне очень помогли:)

  9. Сергей 20 июня 2007

    Из всех многочисленных статей по данной теме, эта – без длинного занудства и умничания, наиболее понятна для любого начинающего … Плюс – очень полезна. Обязательно использую в следующих проектах.

  10. Aragorn 21 июня 2007

    Хм, если все так просто, то почему же методика, изложенная в данной статье, не применена на местную версию для печати. В ней только лишь CSS-ом все не обходится – блоки навигации убираются при помощи php.

  11. Никита 21 июня 2007

    Всё обходится CSS’ом. PHP используется, чтобы подключить CSS-файл для печати. Блок навигации и всё остальное убирается только каскадными стилями.

  12. Евгений 15 октября 2008

    Не совсем понимаю. Если я использую два файла head.php и footer.php, то как мне при помощи CSS печатать то, что между ними???

  13. Павел 14 марта 2010

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

Поиск по сайту

Из последнего

Архив статей и записей