← к списку статей

01.11.10 (последнее изменение 13 ноября 2010)

Печать веб-страницы

Как прикрутить к сайту версию для печати с минимальными усилиями.

Сегодня понадобилось сделать версию для печати. Потратил час времени и получил бездну удовольствия от результата. Думаю, что будет не лишним поделиться своим способом создания принт-версий с моими дорогими читателями.

Для начала давайте разберемся, что такое принт-версия, кому и когда она бывает нужна, и после этого нам станет понятно, какие к ней предъявлять требования.

Что мы хотим видеть на печати?

Отправка на печать — действие редкое. Как правило, мы читаем с экрана и не испытываем дискомфорта. Но иногда нам что-то бывает нужно в печатном виде. Что мы ожидаем увидеть, распечатывая страницу? Конечно же ее основное содержимое — расписание электричек, схему проезда, таблицу Менделеева, рассказ с иллюстрациями и пр. При этом нам нужно, чтобы написано было черным по белому, не слишком мелко, но и не крупно, чтобы шрифт хорошо читался, чтобы текст занимал по возможности всю страницу.

А что нам не нужно на печати? Не нужны те блоки, которые являются функциональными на веб-странице, но бесполезными на листе бумаги: меню, форма авторизации, поиск по сайту, баннеры и тому подобное. Причем, такие элементы в печатной версии не просто бесполезны, но даже вредны, поскольку лист бумаги имеет ограниченный размер и заполнять его ненужной информацией — преступление.

Реализация

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

Для начала создайте файл print.css, содержащий одно простое правило, вот такое.

Затем посмотрите на типовые страницы своего сайта и отыщите на них функциональные блоки ненужные на печати. Если они имеют идентификаторы или однозначно определяются с помощью классов, то просто создайте новое правило, запрещающее их показ. Например, я не хочу, чтобы на печать попадали шапка и подвал. Поскольку они имеют идентификаторы header и footer, то я добавляю в print.css следующую строку.

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

Теперь подключите только что созданный print.css, все остальные стили временно выключите, обновите страницу и уменьшите окно браузера до ширины 650 пикселов — примерно так будет выглядеть ваша страница на печати. Наконец, допишите в print.css еще несколько правил, которые устанавливают удобный для чтения шрифт и фиксируют его размер.

Два способа

Первый

После того, как работа с print.css завершена, необходимо его подключить таким образом, чтобы он срабатывал при вызове печати страницы. Для этого нужно воспользоваться атрибутом media тега link.

При таком способе подключения вам даже не нужна ссылка «версия для печати», потому что во время вызова печати print.css подключится автоматически и веб-страница волшебным образом превратится в свою черно-белую брутальную копию. Пример реализации — данный сайт, www.bumagi.net.

Второй

И есть второй способ, который включает в себя первый способ и немного его дополняет. Его задача — создать ссылку «версия для печати». Такая ссылка будет вести на отдельную страницу со своим собственным адресом, расширяющим адрес текущей страницы (иными словами, за основу взят текущий адрес и к нему добавлен какой-то флаг). Например, если адрес текущей страницы
http://www.test.ru/folder/
то адрес ее принт-версии может быть, например, таким
http://www.test.ru/folder/?version=print

Для движка обе эти страницы должны быть почти одинаковыми. Отличие будет в том, что в случае принт-версии нужно отключить яваскрипты и подключить один-единственный css-файл — print.css, причем без атрибута media (или с media=all, что в сущности одно и то же). Не забудьте, что на оригинальной странице нужно подключить print.css с media=print, а всем остальным css-файлам указать media=screen, как описано в первом способе. Пример реализации: 1p.fond.potanin.ru.

Подводные камни

Одинаковые страницы

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

В коде страниц ссылку на принт-версию прописываем следующим образом. Обратите внимание, атрибут href ведет на пустой якорь.

Где-нибудь в css глобально скрываем ссылку на принт-версию от пользователей без яваскрипта, потому что у них эта ссылка не заработает. (Заметьте, мы не лишаем их возможности распечатать страницу, мы лишь скрываем от них ссылку на промежуточную страницу, которая и не обязательна для печати.)

И наконец с помощью яваскрипта показываем ссылку и устанавливаем ей нужный адрес.

Мы достигли цели — скрыли версию для печати от поисковых роботов.

Инлайновые стили

(Данная проблема касается только первого способа подключения принт-версии.) Если вы используете яваскрипт, показывающий и скрывающий какие-то фрагменты контента, то имейте в виду, что при этом в теги прописываются инлайновые стили. Послав такую страницу на печать, вы не увидите скрытые яваскриптом блоки, потому что у них style="display:none". Если такое поведение вас не устраивает, следует воспользоваться следующей техникой.

Где-нибудь в css добавляем класс dn.

Далее в js-коде вместо обычных используем следующие конструкции.

Всех не перечислишь, но суть такая: по окончании анимации очистить атрибут style и добавить класс, заменяющий инлайновые стили на аналогичные, но объявленные в css-файле. Такая техника используется на проекте device.megafon.ru.

← к списку статей