Как сделать идеальную версию для печати
Ещё 18 лет назад первый в мире браузер WorldWideWeb, написанный Бернерс-Ли, уже давал пользователю возможность отправить на принтер интернет-страницу. Но, несмотря на это, проблематика удобной печати документов в интернете до сих пор остается актуальной и вызывает вопросы в среде веб-разработчиков.
Почему же простая, на первый взгляд, функция вызывает так много дискуссий? Чтобы понять это, достаточно вспомнить, что представлял собой первый в истории веб-строительства сайт, и сравнить его с современными.
Интерфейс первого в мире браузера WorldWideWeb – отдельный предмет для обсуждения.
Разметка первых веб-сайтов позволяла отправлять на печать документы «as is», без какой-либо стилевой коррекции, и они отлично смотрелись на бумаге. Однако после появления на этом рынке Microsoft и выхода Internet Explorer версии 2 (с поддержкой таблиц) внешний вид сайтов стал постепенно усложняться. Появилась мода на красивый дизайн, усложнилась разметка и, как следствие, стали появляться ошибки при печати.
Стандартов, которые могли бы рассказать, «как надо», не существует. В большинстве случаев разработчики реализуют версию для печати так, как удобно им, нивелируя её ценность, превращая в неудобный для большинства простых пользователей и, следовательно, ненужный инструмент.
Возможно ли универсальное решение? Возможно. Тем не менее, его надо применять с оглядкой на специфику задачи.
О чем нельзя забывать
Давайте выделим объективные условия, в которые поставлен веб-разработчик:
- Пользователь всегда может распечатать страницу стандартным способом (Файл-Печать), даже если вы не предусмотрели ссылку «Версия для печати»;
- Пользователю удобно читать длинную статью с разбиением на страницы, но печатать ему удобно всю статью целиком;
- Принтер, на котором печатает пользователь, может быть черно-белым или цветным;
- У пользователя может быть установлен любой современный (или не очень) браузер;
- На бумаге документ должен выглядеть опрятно и красиво и, главное, легко читаться;
- Функционал «Версия для печати» не должен нарушать нормальной работы сайта.
Рассмотрим каждый пункт подробнее.
Файл–Печать
Следует понимать, что если на сайте нет ссылки «Версия для печати», то это не значит, что содержимое не будут печатать.
Более того, неопытный пользователь, привыкший к работе в Word, будет пытаться распечатать страницу именно через панель инструментов.
Поэтому обязательным условием является наличие оптимизированной таблицы стилей CSS для печатной версии (стили подключаются с указанием атрибута media в значении print). Полное описание типов вывода можно найти здесь: www.w3.org/TR/CSS2/media.html, а о том, как именно реализовать оптимизированную версию, есть отличная переводная статья: www.webmascon.com/topics/coding/33a.asp
Таким образом, если пользователь решил распечатать страницу привычным способом, то его ожидания оправдаются в полной мере – он увидит в окне предварительного просмотра оптимизированную для печати страницу без навигации и лишних элементов.
Исторически сложилось так, что до поддержки браузерами CSS 2 проблему версии для печати решали при помощи специальной ссылки, которая обращалась к облегченной версии страницы. И разработчики браузеров, и веб-разработчики довольно инертны, поэтому потребовалось несколько лет на то, чтобы эта возможность CSS 2 стала применяться повсеместно.
В действительности с поддержкой CSS 2 необходимость в ссылках «Версия для печати» в большинстве случаев отпала. Однако хорошим тоном является наличие такой ссылки «под рукой», т.к. в условиях борьбы за внимание пользователя лишний перевод фокуса на пространство вне сайта нежелателен.
Длинные статьи
К сожалению, CSS 2 не поможет в тех случаях, когда объемный материал представлен в виде глав и разбит на страницы. Такой способ подачи информации безусловно удобен для чтения, но при печати возникают неудобства. Самым «простым» способом оказывается поочередное копирование всех страниц в Word или блокнот. В этом случае ссылка «Версия для печати» просто жизненно необходима. И вот здесь возникает вопрос – а где ее лучше поместить?
Прежде всего, ссылка должна быть доступна на всех страницах статьи, причем в контексте (например, рядом с заголовком).
Она должна быть видна сразу после загрузки без вертикальной прокрутки, т.к. пользователь может зайти по закладке специально для печати статьи.
Ссылка должна присутствовать и под контентом, т.к. желание распечатать статью может возникнуть после прочтения одной главы.
Контент-менеджерам рекомендуется разбивать статью на страницы так, чтобы каждая страница занимала не более двух экранов браузера по вертикали.
Для тех, кто в борьбе за авторское право блокирует правый клик мыши, более привлекательным решением может стать замена стандартного контекстного меню браузера собственным, одним из пунктов которого будет «Печать».
Что должно происходить по клику на эту ссылку?
Надо помнить, что пользователь привык работать в офисных приложениях, где документ с экрана отправляется на печать почти без изменений. Поэтому прежде чем открывать диалог печати, он должен увидеть итоговый вариант документа.
Оптимальное решение – открытие нового окна, содержащее оптимизированный для печати контент. Хорошим тоном считается наличие узкой шапки с логотипом. В случае коммерческого сайта правильным будет добавить в шапку название организации и контактный телефон, а в «подвал» – более подробную контактную информацию и постоянный адрес источника. Обязательным условием является наличие крупной ссылки/кнопки «Распечатать», вызывающей диалог печати.
Чтобы сама ссылка «Распечатать» не попала в область печати, можно либо использовать print-версию таблицы стилей, либо просто скрыть ссылку перед выводом диалога печати (display в значении none). Кнопка «Распечатать» должна быть текстовой, т.к. выключенные в браузере картинки испортят всю идею, несмотря на наличие у кнопки alt и title. Можно сразу вызвать диалог печати (например, такая реализация есть на сайте MSDN), но часто клиентам импонирует именно первый вариант с кнопкой.
Я встречал другое решение, которое некоторые считают красивым и удобным.
Можно подключить print-версию стилей к исходной странице и вывести дополнительным слоем предложение распечатать или вернуться к обычному виду. Тем не менее, такое решение непрактично, а в случае многостраничных статей и вовсе бесполезно. После обновления стилей контент может «отпрыгнуть» в зависимости от высоты шапки, наличия рекламных модулей и браузера. Кроме того, следуя принципам юзабилити, слой с предложением должен всегда оставаться в центре, перемещаясь вместе со скроллом. И наконец, при клике на ссылку для отмены печати, к разметке применяется прежняя таблица стилей, что в совокупности со скроллом даст очередное неожиданное «отпрыгивание» контента.
Цветопередача
Большинство версий для печати совершенно не учитывают особенностей принтера. Хороший пример плохих последствий — это нарушение цветопередачи.
Часто ссылки на сайте выделены только цветом, и при черно-белой печати различить, что было ссылкой, а что текстом, становится невозможно. В этом случае, в версии для печати стоит переназначить ссылкам стили (сделать подчеркнутыми). Кроме того, у обладателя цветного струйного принтера легко могут засориться дюзы или быть близким к истощению один из цветных картриджей. В этом случае отправлять на печать «темно-темно-синий» текст негуманно. Текст должен быть черным.
Кроссбраузерность
В ближайшие годы рассчитывать на всеобщую стандартизацию не придется, хотя разработчики браузеров делают шаги в этом направлении. Посоветовать здесь что-либо конкретное трудно, нужно тестировать версии для печати в разных браузерах (как для PC, так и для Mac) и стараться использовать проверенные временем решения.
What You See Is What You Get
На бумаге пользователь должен получить такой же документ, как и в окне после клика на ссылку «Версия для печати». Текст должен удобно читаться, не должно быть лишних пустот.
Прежде всего, это зависит от шрифтов и отступов. Шрифты рекомендуется задавать в пунктах, а не пикселях, как это принято для экранного отображения.
Отступы body нужно обнулить, а позиционировать текст иным способом, т.к. по умолчанию параметры страницы при печати предусматривают расстояния от краев.
Что касается ссылок, то существует мнение, что их надо «разворачивать», т.е. сопровождать полным адресом URL. Это целесообразно делать только в том случае, если вы уверены в важности всех ссылок в документе. Лучше отказаться от этого решения, если ссылки в рамках сайта не являются дружественными к пользователю, например, содержат ?, &, = .php и прочие атавизмы. Ссылки на другие сайты лучше обрезать до имени домена или производить проверку на длину и наличие в них специальных символов.
Более подробное описание решений приводится в статьях:
Не навредить
Версия для печати имеет сильное влияние на выдачу сайта в поисковых машинах. Дело в том, что она полностью дублирует контент основной страницы. А поскольку версия для печати не содержит никаких дополнительных элементов (в том числе и сквозных меню), то ее вес оказывается выше, чем вес основной страницы, и поисковики… замещают в индексе основные страницы их версиями для печати. В результате попадания на такую страницу из поисковика посетитель не может перейти на другие страницы сайта – и может уйти. Если для статейного портала в этом нет ничего катастрофического (пользователь искал статью, и он ее нашел), то для интернет-магазина замена карточек товаров их версиями для печати может оказаться губительным.
Поэтому, если вы не собираетесь использовать версии для печати в специфических целях SEO, обязательно помещайте ссылки в noindex.
Журнал List Apart, посвященный проблематике веб-дизайна, верстки и контентного наполнения
Переводная статья, посвященная таблице стилей версии для печати. Источник: List Apart
Статья, посвященная выводу ссылок в версии для печати
Тексты докладов, прочитанных в рамках семинара «Версия для печати HTML-документов»
Форум о поисковых системах
Описание типов отображения для различных устройств вывода в CSS 2
Система анализа действий посетителей на сайте
Владимир Старков – руководитель компании iTrack (разработка интернет-сайтов и решений, основанных на веб-технологиях; маркетинговые коммуникации, направленные на повышение уровня продаж).
Версия для печати без использования отдельной страницы
Данные решения не являются универсальными и для каждого сайта и/или страницы должны быть своими.
В данной теме рассмотрены два варианта создания версий для печати на примере страницы этого блога.
Для начала создадим кнопку, например такую:
Вариант с открытием всплывающего окна
В этом варианте мы создаем новый документ на основе текущего, открываем его в попапе и выдаем на печать.
Для этого смотрим HTML код нашей страницы и определяем элементы, которые нам нужно подать в это окно и далее на печать.
- Заголовок с классом subbanner
- Краткое описание темы с классом entry-summary
- Полное описание темы с классом entry-content
- Подвал с копирайтом с ID footer
Затем вешаем клик на нашу кнопку, по которому передаем эти значения и добавляем статичные данные.
let w = window . open ( » , » , ‘left=50,top=50,width=860,height=600,toolbar=0,scrollbars=1,status=0’ ) ; // Создаем окно
let elem_1 = document . body . querySelectorAll ( «.subbanner» ) [ 0 ] . outerHTML ; // Берем заголовок
let elem_2 = document . body . querySelectorAll ( «.entry-summary» ) [ 0 ] . outerHTML ; // берем краткую часть темы
let elem_3 = document . body . querySelectorAll ( «.entry-content» ) [ 0 ] . outerHTML ; // берем полную часть темы
// Заполняем новый документ, в котором добавляем все необходимые элементы, как статичные (стили, скрипты и т.д.), так и переданные из основного
Похожим способом можно выдавать на печать несколько разных элементов сайта, например, тарифов, контактов и т.д..
Про это будет позже в другой теме.
Вариант с изменением самого документа
Тут мы будем по клику добавлять к тегу body класс print , включая тем самым версию для печати. Выключаться она будет по нажатию на клавишу Esc
Этот вариант хорош тем, что можно изменить документ не только для печати, но и для сохранения.
Как и в первом смотрим HTML код нашей страницы, но определяем элементы, которые нам нужно убрать (шапка, подвал, боковая панель, рекламные блоки и т.д.) или изменить (ширину центрального блока и т.д.).