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

Кого-то это может удивить, но распечатывают 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-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.

Печатаем web-документ правильно с помощью CSS: 5 комментариев

  1. Для разрыва страниц вставки дополнительных это единственный вариант? Я пробовала для р указать page-break-before: auto — не заработало.

    1. По сути да. В зависимости от контента можно обойтись без дополнительных вставок, например, задавая стили для заголовков: h1{page-break-before: always;}

  2. А повернуть страницу при печати подобным образом можно ??
    Что то типа

    @media print { /* Стиль для печати */

    **** вот что то тут ;)

    }

    Не приведете примерчик (для Мозилы) ??

    1. Для поворота можете попробовать свойство -moz-transform: rotate. Например так

      @media print {
      body{-moz-transform: rotate(-90deg);}
      }

      Но на печати результат может оказаться далеким от ожидаемого.

Добавить комментарий для usd.ucoz.ru Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *