Печатаем web-документ правильно с помощью CSS — Aimweb.name

:

Кого-то это может удивить, но распечатывают web-страницы довольно часто.
В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

Предварительные изменения в стилях

Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,projection"> <!-- основной файл -->
<link rel="stylesheet" href="css/print.css" type="text/css" media="print"> <!-- для печати -->
<link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld"> <!-- мобильные устройства -->

Это поможет избежать путаницы в дальнейшем и сэкономит ваше время. Стоит учесть, что шрифты на печати следует задавать в пунктах (pt), дюймах (in), пиках (pc) или сантиметрах/миллиметрах(cm/mm).

Задаем цвет фона, выставляем отсупы

Убираем отступы, задаем для страницы белый цвет фона и черный шрифт (для контрастности), выставляем поля в 0,5дюйма. Также убираем свойство float у плавающих элементов, чтобы при печати веб-страницы блоки не съезжали.

body { margin : 0.5in ; font-family :times }
* { background : #fff !important ; color : #000 !important ; float : none !important ; width : auto !important ; height : auto !important ; }

Убираем лишние стили

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

#menu , #topmenu , #thedrot , .meta , #comments , #commentform , #postcomment , #resplink , #footer { display : none }

Работа с гиперссылками

Убираем подчеркивание у ссылок, на печати они нам не понадобятся. Также выводим URL (в скобках рядом с текстом ссылки).

a { border : 0 ; text-decoration : none ; }
a img { border : 0 }
a :after { content : " (" attr (href ) ") " ; font-size : 90% ; }
a [href ^= "/" ] :after { content : " (http://www.aimweb.name" attr (href ) ") " ; }

Постраничная разбивка на CSS

Свойство page-break-before позволяет устанавливать место разрыва страницы при печати.
Если мы поленились, и все стили находятся в одном css-файле, то код будет выглядеть следующим образом:

@media all
{
.nextpage { display : none ; }
}

@media print
{
.nextpage { display : block ; page-break-before : always ; }
}

Получаем класс, который будет не виден на странице, но будет выполнять свое предназначение при печати.
Пример использования:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример page-break-before </title>
<style type="text/css">
@media print{
.newpage{page-break-before: always;}
}
</style>
</head>
<body>
<h1>Разрывы страниц на CSS </h1>
<p>Попробуйте распечатать эту страницу (да съесть еще этих мягких французских булок, да выпить чаю). </p>
<p>Это 1-ый параграф, он будет расположен на первой странице при печати. </p>
<div class="newpage"></div>
<p>Это 2-ой параграф, он будет расположен на второй странице при печати. </p>
<div class="newpage"></div>
<p>Это 3-ий параграф, он будет расположен на третьей странице при печати. Все так просто. </p>
</body>
</html>

CSS-свойства: widows, orphans

Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа.
Пример:
css widow
Другое css-cвойство  — orphans — задаёт минимальное количество строк, которые могут оставаться в нижней части страницы без разрыва страницы.
Если значение widows конфликтует со значением orphans, тогда widows будет иметь приоритет.
Пример использования:

    @media print {
p { widows : 3 ; orphans : 3 ; }
}

Подводим итоги:

В результате у меня получилось что-то подобное:

body { margin : 0.5in ; font-family :times }
* { background : #fff !important ; color : #000 !important ; float : none !important ; width : auto !important ; height : auto !important ; }
#context { margin : 0 !important ; padding : 0 }
#menu , #topmenu , #thedrot , .meta , #comments , #commentform , #postcomment , #resplink , #footer { display : none }
#zag h1 span { font-size :small ; display : block }
a { border : 0 ; text-decoration : none ; }
a img { border : 0 }
a :after { content : " (" attr (href ) ") " ; font-size : 90% ; }
a [href ^= "/" ] :after { content : " (http://www.aimweb.name" attr (href ) ") " ; }

Данная таблица стилей достаточна проста и, на мой взгляд, требует более детальной проработки отдельных элементов, но результат на печати весьма ощутим по сравнению с обычной таблицей стилей. Разумеется, CSS-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.