—»     —»   Рекомендации к созданию каскадных таблиц стилей для печати
  Раздел: Подсказки   Нет комментариев  

Рекомендации к созданию каскадных таблиц стилей для печати



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

Рекомендации к созданию каскадных таблиц стилей для печати

Веб-разработчики могут предпринять некоторые шаги, чтобы сократить разрыв между двумя мирами принтеров и LCD-экранов:

* Нужно расценивать дизайн для печати как равного партнера адаптивного дизайна.
* Выводить фоновые изображения и цвета, где это было бы применимо.
* Добавлять видимые URL-адреса или сканируемые ссылки, чтобы человек всегда мог перейти на источник, держа в руках печатную версию.
* Использовать CSS-фильтры для более хорошего результата с точки зрения графического оформления печатных страниц.

Дизайн для печати, а не для экранов

Для начала, давайте взглянем на основу. Современные печатные стили обычно помещаются внутрь media query:

@media print {

}

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

@media print {
body {
color: #000;
background: #fff;
}
}

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

/* Default styles */

h1 {
color: #fff;
background: url(banner.jpg);
}

@media print {
h1 {
color: #000;
background: none;
}

nav, aside {
display: none;
}
}

Процесс написания стилей под печать является одним из немногих случаев, когда вам придется использовать сантиметры и дюймы в CSS. Совсем не подходящие для экранов меры из реального мира идеально подходят для стилей под печать. Чтобы удостовериться в том, что вы эффективно используете печатные стили, посредством CSS сделайте так, чтобы контент отображался от угла до угла, избегая любых полей или отступов. Здесь баланса можно добиться при помощи правила @page:

@media print {
h1 {
color: #000;
background: none;
}

nav, aside {
display: none;
}

body, article {
width: 100%;
margin: 0;
padding: 0;
}

@page {
margin: 2cm;
}
}

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

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

h2, h3 {
page-break-after: avoid;
}

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

img {
max-width: 100% !important;
}

Третье правило же заключается в том, что статьи всегда начинаются с новой страницы:

article {
page-break-before: always;
}

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

ul, img {
page-break-inside: avoid;
}

Хотя даже этого всего недостаточно для того, чтобы идеально подготовить страницу к печати, как минимум неплохо было бы с этого начать!

Форсированные фоновые изображения и цвета

На некоторых веб-сайтах, вроде портфолио, фоновые изображения и цвета представляют собой невероятно важные элементы. Если пользователь будет выполнять печать при помощи браузера из семейства WebKit (Chrome от Google или Safari Apple), то мы можем принудить принтер печатать цвета, которые мы видим в цифровой версии сайта (другими словами, реализовать принудительную печать фоновых изображений и цветов). Короче говоря, мы можем реализовать это только для цветных принтеров, наличие которых мы можем перепроверить при помощи media query:

@media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}

К сожалению, пока еще не существует похожего эквивалента для Firefox, Opera или Internet Explorer.

Раскрываем внешние ссылки для печати

Мы не можем реализовать возможность (пока что) открывать ссылки, указанные на напечатанной странице, поэтому нам нужно сделать так, чтобы присутствующие ссылки отображались в виде прямых URL. Чтобы страница оставалась сравнительно опрятной, мы предпочитаем в печатной версии раскрывать только внешние ссылки, а внутренние исключать вообще. Если вы используете относительные ссылки на сайте для локальных страниц, то вы без труда сможете реализовать это при помощи селектора атрибутов и псевдо-класса :after – это позволит вам предупредить печать внутренних ссылок и ссылок на изображение:

@media print {
article a {
font-weight: bolder;
text-decoration: none;
}

article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}

Воспользуйтесь следующим HTML-кодом и контентом:

<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href="http://www.webplatform.org/">read other Web development documentation</a>.</p>

И таким будет наш печатный результат:

Рекомендации к созданию каскадных таблиц стилей для печати

Некоторая проблема заключается в том, что анкорные ссылки и ссылки для изображений все равно будут раскрыты на печатной версии. Мы можем исправить проблему с анкорными ссылками при помощи специального CSS-правила:

article a[href^="#"]:after {
content: "";
}

Ситуация с ссылками на изображения немного сложнее, так как CSS на данный момент не позволяет выделять элемент на основе его дочерних элементов. В идеале, ссылки на изображения должны иметь класс, который мы можем определить при помощи CSS. В дальнейшем, в CSS4, будет представлен селектор parent, который сделает всю грязную работу:

$a:after > img {
content: "";
}

CSS4 также облегчит процесс обработки внешних ссылок:

a:not(:local-link):after {
content:" <" attr(href) "> ";
}

Все эти подходы подразумевают, что пользователи продолжат вписывать URL вручную. Лучшим решением было бы предлагать ссылки на печатной странице в виде QR-кодов, которые позволили бы мгновенно переходить по ссылкам, просканировав изображение камерой смартфона.

Печатаем QR-коды для удобства предоставления ссылок

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

Рекомендации к созданию каскадных таблиц стилей для печати

Чтобы создать подходящий QR-код, мы воспользуемся Chart API от Google, у которого есть 4 необходимых компонента:

* Тип графической информации, которых мы хотим, чтобы google нам предоставил (в нашем случае, QR-код);
* Сгенерированный размер QR-кода в пикселях;
* URL, который можно зашифровать;
* Форма кодировки символов.

Мы обычно ассоциируем URL с элементом заголовка, расположенным в самом верху страницы:

<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>

Чтобы создать печатный результат, мы создаем поле с правой стороны от элемента h1, которое по размеру будет подходить заголовку, а затем помещаем туда QR-код:

header h1 {
margin-right: 200px;
margin-bottom: 2rem;
line-height: 1.5;
}

Так как QR-код будет уникальным на каждой странице, его следует добавить в качестве встроенного стиля:

@media print {
header h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}

Такой метод имеет и недостаток, который заключается в необходимости принуждать разработчика вводить индивидуальные URL-адреса для каждой страницы в код API. Если ваш веб-хостинг работает с PHP, вы можете предоставлять эти URL автоматическим путем:

@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}

В Wordpress:

@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}

Очевидно, оба решения, приведенные выше, будут работать с PHP и страницами в Wordpress.

Используем CSS3-фильтры для улучшения качества печатной страницы

В браузерах часто возникает проблема с печатью баннерных изображений, особенно если белый баннер расположен на темном фоне:

Рекомендации к созданию каскадных таблиц стилей для печати
Логотип как обычная картинка

Рекомендации к созданию каскадных таблиц стилей для печати
Версия для печати


Рекомендации к созданию каскадных таблиц стилей для печати
Логотип как alpha-маскированный PNG

Рекомендации к созданию каскадных таблиц стилей для печати
Версия для печати

Теоретически, вы можете использовать CSS-спрайт для переключения между различными версиями логотипа для печати, но это будет также означать дублирование размера файла ради сравнительно небольшой выгоды. Вместо этого, мы рекомендуем вам использовать CSS-фильтры (а также SVG-эквиваленты для Firefox), чтобы инвертировать изображение перед тем, как оно будет распечатано:

@media print {
header {
background: none;
color: #000;
}

header img {
filter: url(inverse.svg#negative);
-webkit-filter: invert(100%);
filter: invert(100%);
}
}

CSS3-фильтры делают примерно то, чего вы от них и ожидаете – инвертируют цвета в изображениях шапки сайта, преобразуют черный в белый и наоборот, – но при этом они работают только в Chrome и Safari. Чтобы охватить также и Firefox, нам потребуется другой подход – эквивалентный этому фильтр, написанный в форме отдельного SVG-файла:

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>

Здесь будет довольно сложно тщательно объяснить вам принцип работы SVG-фильтра feColorMatrix. Гораздо больше информации можно найти в статье «Применяем оттенки к веб-страницам при помощи SVG-фильтров и javascript» на Dev.Opera.

В результате мы получаем немного иную версию логотипа (другими словами, либо плотный черный фон, либо PNG с маской прозрачности):

Рекомендации к созданию каскадных таблиц стилей для печати

В завершение

Возможно, отчасти ввиду того, что использование функции печати страницы нельзя отследить при помощи аналитических инструментов, и вследствие этого нельзя получить точные данные (хотя это возможно, но это, скорее, материал уже для другой статьи), многие веб-разработчики просто-напросто игнорируют стили для печати. В принципе, это вполне оправдано, потому что примерно 99% времени люди просто открывают и закрывают страницы прямо на компьютере. В результате, разработчики создают сайты для дисплеев и устройств, а не для того, чтобы их печатали на принтере, стоящем в углу офиса.

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

Расценивая функцию печати как еще один немаловажный аспект адаптивного дизайна, мы можем отвечать требованиям многих пользователей – одновременно можно экономить и чернила, и бумагу, и другие ресурсы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, QR-код
Опубликовал Design FactoRy   Прочитано (раз): 2932   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31