На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?
Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:
@media print { } Если пользователь хочет распечатать страницу с дизайном, отображающемся на экране, то делает скриншот и печатает его. Версия для печати предназначена для простого и комфортного чтения текста с листа бумаги. Поэтому прежде всего необходимо убрать все лишние со страницы: меню, массивную шапку или подвал, фоновые изображения и т.д., оставив только необходимое: заголовки, контент с изображениями, лого сайта, URL страницы. К примеру такой код скрывает заголовки H1, а также сайдбар, шапку и подвал сайта:
h1, div#header, div#sidebar, div#footer { display: none; } Правила страницы для печати
1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлять background-image: none, чтобы старые браузеры тоже умели это.
2. Могут возникать несоответствия распечатанной страницы с ее отображением на экране при назначении размеров в пикселях. Поэтому стоит использовать дюймы, сантиметры или проценты.
3. При помощи следующего кода можно отображать полный URL вместо гиперссылки, ведь на листе бумаги не получится кликнуть:
a:after {content:" <" attr(href) ">"; Немного модифицировав код, можно добавить отображение URL только внешним ссылкам:
a[href^=http]:after {content:" <" attr(href) ">"; 4. Для больших текстов иногда будет уместно разделение на части. Следующий код разбивает контент на каждом заголовке H3, печатая на новой странице:
h3 { page-break-before: always; } А этот код поможет печатать каждую статью с новой страницы, может быть полезно при распечатке списка записей блога:
article + article { page-break-before: always; } 5. Желательно переназначить стили сайтов с темным или ярким дизайном в стандартную цветовую схему — черный текст на белом фоне. Это удобно и для читабельности, и для экономии расходнвх материалов в принтере пользователя.
Корректное отображение
Как уже сказано выше, современные браузеры умеют удалять ненужные элементы при печати, однако это не всегда требуется. В Firefox пользователь может сам контролировать внешний вид результата, в Chrome и Safari можно использовать код, приведенный ниже для отображения исходного стиля:
* { -webkit-print-color-adjust: exact; } Как это выглядит в действии:
Качество печати
Зачастую результат печати сильно отличается от исходного на экране в худшую сторону. Одну из частых причин этого разберем на простом примере. Есть светлый текст на темном фоне:
Со следующим CSS:
header { background: #000; color: #fff; padding: 1rem; font-family: Avenir, Arial, sans-serif; } Браузер попытается привести версию для печати в нормальный вид:
Если на странице есть изображение, например логотип, то браузер его никак не корректирует, и получается ужасно:
Еще хуже все выглядит, если в качестве лого используется векторное изображение с прозрачностью:
Избежать этого ужаса можно при использовании CSS3 Filter:
@media print { header { background: none; color: #000; } header img { -webkit-filter: invert(100%); filter: invert(100%); } } Получается:
Для 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> CSS:
@media print { header { background: none; color: #000; } header img { filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); } } Для IE9 решение от Lea Verou:
<!--[if IE 9]> <style> @media print { header:after { content:""; display: block; height: 1px; width: 1px; position: absolute; top: 100px; right: 100px; outline: 100px solid invert; } } </style> <![endif]--> Использованные материалы:
ссылка на оригинал статьи http://habrahabr.ru/post/160997/
Добавить комментарий