Pull to refresh

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

Website development *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:

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]-->


Использованные материалы:
Tags:
Hubs:
Total votes 109: ↑101 and ↓8 +93
Views 154K
Comments Comments 27