Заметки программиста

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

Традиционно сложилось что «Версия для печати» доступна либо по соответствующей ссылке, либо через CSS media=»print» который отвечает за стили страницы при ее печати. Первый способ позволяет легко выводить данные как угодно, в то время как второй ограничен средствами CSS, т.е. на печать отправляется та же страница, но с другим CSS файлом. Я рассмотрю первый способ, так как он наиболее гибкий и позволяет выводить данные как угодно.

Элементы

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

Цвета никакие другие как: фон — белый, текст — черный либо темно-серый. Большинство принтеров в мире черно-белые.

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

Элементы: дата, адрес страницы и номер печатной страницы, добавляются автоматически на полях версии для печати.

Компановка контента

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

Таблицы, главы, разделы или просто абзацы текста, которые лучше помещать целиком на отдельную печатную страницу, необходимо отделить специальным разделителем:
CSS:

.pagebreak {
    page-break-after: always;
}

HTML:

<br class="pagebreak" />

Весь контент ниже разделителя будет начинаться с новой страницы.

Вывод на печать

Печатать можно несколькими способами, самые популярные:

1. Печать через меню браузера, как правило Файл->Печать.
   Самый жуткий способ, но при отключенном JavaScript – единственный.
2. Диалог печати открывается сразу после того как открывается страница с версией для печати.
   Тоже не идеальный, человек должен вначале увидеть что он печатает.
3. Печать по нажатию кнопки Печатать.
   По моему мнению это самый лучший способ и его использует большинство более или менее качественных сайтов в интернете, но есть ряд нюансов. Кнопка должна быть заметна для пользователя, и после открытия диалога ее нужно обязательно спрятать, иначе она будет отображаться на печатной версии.

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