- PVSM.RU - https://www.pvsm.ru -
На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?
Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @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 [1]:
<!--[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]-->
Использованные материалы:
Автор: grokru
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/21588
Ссылки в тексте:
[1] Lea Verou: http://lea.verou.me/2011/04/invert-a-whole-webpage-with-css-only/
[2] Writing CSS For Print Stylesheets: http://demosthenes.info/blog/119/Creating-Stylesheets-for-Print
[3] Force Accurate Colors When Printing Web Pages: http://demosthenes.info/blog/573/Force-Accurate-Colors-When-Printing-Web-Pages
[4] Create Quality Print Versions of Web Pages With CSS3 Filters: http://demosthenes.info/blog/612/Create-Quality-Print-Versions-of-Web-Pages-With-CSS3-Filters
[5] Источник: http://habrahabr.ru/post/160997/
Нажмите здесь для печати.