Как оформить сайт для печати с помощью CSS

Опубликовано: 2015-08-28

Какое отношение печать имеет к Интернету?

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

Офисный принтер

Как сделать дизайн для печати

Вся магия содержится в CSS, определяя стили для печати. Возможно, вам будет полезно создать отдельную таблицу стилей print.css , чтобы она была отделена от всех остальных ваших стилей. Имейте в виду, что не на всех сайтах есть таблица стилей для печати; это дополнительная функция и шаг в процессе разработки. Если стили печати не указаны, для печати используются стили по умолчанию. Мы будем определять стили, чтобы сделать печать более эффективной, что переопределит любые значения по умолчанию.

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

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

Рекомендации по цвету и компоновке

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

Это то, что сделает текст в теле черным и избавится от любого цвета фона для лучшей печати:

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




Скорее всего, текст будет распечатан шрифтом Times New Roman. В этом нет ничего плохого, но что, если вы хотите указать другой шрифт? Как и в стилях по умолчанию, это можно сделать и в печати. Пока мы это делаем, давайте не будем забывать о высоте строки.


body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




Скрытие ненужных элементов


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




Есть элементы страницы, которые не нужны, такие как навигация, нижний колонтитул, боковая панель и фоновые изображения, поэтому здесь наш display: none не пригодится.


@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




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




Если добавить это в таблицу стилей печати, статьи всегда будут начинаться с новой страницы:


article {
page-break-before: always;
}




Хранение ненумерованных списков вместе на одной странице также является отличной идеей:


ul {
page-break-inside: avoid;
}




Давайте сделаем еще один шаг и сделаем то же самое для заголовков, изображений, цитат, таблиц и других элементов списка:


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



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




Вот где расстояние действительно может быть точно настроено для распечаток. Не так уж часто в веб-дизайне можно увидеть сантиметры, но они отлично подходят для определения границ на странице. Правило @page — это то, как мы будем ориентироваться на интервалы. Этот пример позволит оставить 2 см вокруг всех границ. Это измерение можно настроить, чтобы учесть больше или меньше места. Например, ваши пользователи могут захотеть делать заметки, и было бы полезно разрешить большее поле.
		




@page {
margin: 2cm;
}




Если страницы предназначены для печати и помещения в подшивку, имейте в виду, что есть возможность настроить поля для каждой второй страницы. Левая страница предназначена для страниц 1, 3, 5…, а правая страница — для страниц 2, 4, 6…


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




В некоторых случаях может пригодиться настройка первой страницы. Используя псевдокласс :first page, можно определить стиль первой печатной страницы:


@page :first {
margin: 1cm 2cm;
}




печать-укладка-02


Печать вас напрягает? Вот несколько советов, как напечатать ваш проект как профессионал.
		




Идеи изображений и вводного текста


Они могут относиться или не относиться к вашему сайту, но, тем не менее, их следует отметить.


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


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




Приятное приветственное сообщение — отличное дополнение. Печатный контент будет актуален некоторое время, поэтому всегда приятно добавить дружеское сообщение или напоминание.


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




Теперь, когда мы рассмотрели некоторые основы рассмотрения печати, легко включить эти идеи в вашу таблицу стилей печати. Хотя печать — это не то, о чем мы, в конечном счете, думаем, когда пользуемся Интернетом, это отличный способ предоставить пользователям одинаковые возможности независимо от того, как они получают доступ к контенту.