CSS: Печать документа. Настраиваем правильно.

В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

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

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

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.mydomain.com" attr(href) ") ";}

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

Свойство page-break-before позволяет устанавливать место разрыва страницы при печати:

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

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

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

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

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

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

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

Итого у нас получиться:

@media print {
 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) ") ";}
}