CSS печатной версии страницы

в 19:45, , рубрики: css, веб-дизайн, Веб-разработка, метки:

CSS печатной версии страницы

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

Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @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 печатной версии страницы

Качество печати

Зачастую результат печати сильно отличается от исходного на экране в худшую сторону. Одну из частых причин этого разберем на простом примере. Есть светлый текст на темном фоне:

CSS печатной версии страницы

Со следующим CSS:

header { background: #000; color: #fff; padding: 1rem;
font-family: Avenir, Arial, sans-serif; }

Браузер попытается привести версию для печати в нормальный вид:

CSS печатной версии страницы

Если на странице есть изображение, например логотип, то браузер его никак не корректирует, и получается ужасно:

CSS печатной версии страницы

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

CSS печатной версии страницы

Избежать этого ужаса можно при использовании CSS3 Filter:

@media print  {
header { background: none; color: #000; }
header img { -webkit-filter: invert(100%);
filter: invert(100%); }
}

Получается:

CSS печатной версии страницы

Для 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]-->

Использованные материалы:

Автор: grokru

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js