Pull to refresh

Версия для печати: HTML vs CSS vs JavaScript

Reading time3 min
Views1.9K
В век современных технологий, когда все больше и больше сайтов поддерживает Google Gears, или другие способы оффлайнового просмотра документов, создание вменяемых версий для печати отходит на второй план. Тем не менее, огромное количество «мастодонтных» пользователей упрямо распечатывают страницы сайтов, чтобы потом почитать в дороге или дома. Параллельно, естественно, матеря на чем свет стоит разработчиков сайтов, которые не смогли предусмотреть вменяемый способ распечатать только нужную информацию.

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

Итак, на данный момент существует три основных способа создания версий для печати:
  1. средствами HTML
  2. средствами CSS
  3. средствами JavaScript
Каждый из этих способов обладает своими плюсами и минусами. Рассмотрим их подробно.

HTML

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

У этого способа есть еще один существенный минус, если ваш проект монетизируется по средствам баннерной рекламы. Вставлять баннеры в версию для печати — абсурд, а написать скрипт для, например, Proxomitorn’а, который будет подменять все страницы на их версии для печати — дело десяти минут. Особенно это касается проектов, где основной контент — статьи, которые гораздо удобнее и приятнее читать с версии для печати.

CSS

Этот способ использует сейчас большинство разработчиков сайтов. В шапку HTML кода просто добавляется строка:

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

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

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

JavaScript

По сути, это совмещение двух предыдущих способов. На странице ставится кнопка «Распечатать», по нажатию на которую открывается новое окно (средствами JS), и в нем отображается (!) версия с примененным CSS для печати. Также возможны какие-то дополнительные украшательства страницы. Таким образом вы решаете две проблемы: 1) пользователь видит то, что будет печатать, успокаивается, что нет ничего лишнего; 2) страница создается динамически и использовать ее для основного просмотра сайта невозможно.

Минус такого способа: у пользователя должен быть включен JavaScript, и (зависит от реализации) разрешены всплывающие окна. Хотя, кто сейчас отключает JS? Еще один существенный недостаток — скрипты, реализующие данный функционал, нужно писать для каждого проекта отдельно, поскольку элементы придется перечислять чуть ли не вручную.

Резюме

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

P.S.: В данном обзоре не рассматриваются различные сервисы для печати страниц, которых в изобилии в интернете. О них в следующий раз.
Tags:
Hubs:
+12
Comments27

Articles