Идеальная страница для печати

Казалось бы что сложного в создании страницы для печати? Просто создаем такой же документ с текстом но без какого-либо дизайна и ставим на него ссылку с обычной страницы. Но в поисковых системах появился фильтр дублирующегося контента и веб-мастерам приходится прятать страницы для печати от индексации. К тому же посетителям сайта тоже не очень удобно, ведь нужно сначала перейти на копию нужной ему страницы, в которой отсутствуют элементы дизайна, и потом уже нажимать на кнопку "Печать".
Тут нам на помощь может придти CSS, который не только уменьшит количество работы для веб-мастеров и упростит пользование сайтом посетителям, но и позволит избежать санкций со стороны поисковиков за дублирующийся контент.

Структура страницы

Итак, давайте сначала с помощью HTML создадим структуру нашего документа. Для примера я решил использовать табличную верстку, чтобы сделать его более простым для понимания:

<html>
<head>
<title>Название статьи</title>
<meta http-equiv="Content-Type" content="text/html;

                             charset=windows-1251" />
<link rel="stylesheet" type="text/css"

                     href="/style.css" />
</head>
<body>
<table>
<tr>

<td id="leftcolumn">
Навигация<br />
<a href="/index.php">Главная страница</a><br />
<a href="/articles.php">Статьи</a><br />
<a href="/contacts.php">Контакты</a>
</td>

<td id="content">
<H1>Название статьи</H1>
Данная страница может быть распечатана.

Напечатан будет только текст статьи.
<br /><br />
</td>

<td id="rightcolumn">
Здесь могла бы быть ваша реклама
</td>

</tr>
</table>
</body></html>

Как видите, у нас есть таблица с тремя ячейками, которые расположены горизонтально. Все как у обычного сайта: слева навигация, посередине контент, а в правой части рекламные блоки или новости. Каждой ячейке был присвоен свой id. Для левой части это leftcolumn, для правой – rightcolumn, а для средней ячейки с контентом – content.

Добавляем CSS

Теперь с помощью CSS нужно указать браузеру какие стили он должен использовать для отображения элементов страницы на экране и какие он должен использовать при печати. Создаем style.css и пишем туда следующее:

@media screen {
      body {
            background-color: #0B73BD;
            font-family: tahoma;
            color: #FFFFFF;
      }
      table {
            width: 600px;
      }
      #leftcolumn {
            width: 140px;
            vertical-align: top;
            font-size: 15px;
      }
      #rightcolumn {
            width: 110px;
            vertical-align: top;
            font-size: 15px;
      }
      #content {
            background-color: #32AADB;
            padding: 5px;
            font-size: 15px;
      }
      a {
            color: #FFFF00;
      }
}

@media print {
      body {
            background-color: #FFFFFF;
            font-family: tahoma;
            color: #000000;
      }
      #content {
            background-color: #FFFFFF;
            padding: 5px; 
            font-size: 15px;
            color: #000000;
            width: 600px;
      }
      #leftcolumn {
            display: none;
      }
      #rightcolumn {
            display: none;
      }
}

Первый блок CSS-кода описывает как должны отображаться элементы страницы в браузере. Блок был взят в дополнительные фигурные скобки перед которыми мы дописали @media screen. Это дает браузеру понять что данные стили нужно применить для вывода на экран:
Просмотр в браузере

Так выглядит страница при просмотре в браузере

Второй блок описывает отображение тех же элементов страницы, что и первый, но в данном случае в том виде, в котором будет выглядеть документ при печати и обозначается параметром @media print. Поскольку мы хотим чтобы был напечатан только полезный контент, то мы запрещаем для отображения левую (#leftcolumn) и правую (#rightcolumn) ячейки присвоив им значение display: none.
Распечатанная страница

Так выглядит распечатанная версия страницы сайта

Отдельные файлы стилей

Обьединять все в один файл стилей совсем не обязательно. Вместо этого вы можете использовать два файла стилей и при их подключении к страницам сайта указывать браузеру какой файл стилей использовать при печати, а какой для вывода на экран. Первый (для вывода на экран) определяется параметром media="screen", а второй будет использоваться для печати и определяется параметром media="print":

<link rel="stylesheet" type="text/css"

      media="screen" href="/screen.css" />
<link rel="stylesheet" type="text/css"

        media="print" href="/print.css" />

Полезные советы

Стили для печати нужно описывать после всех остальных, иначе Opera будет печатать блок контента вместе с цветным фоном, который предназначен для вывода в браузер, а не белый цвет, выбранный нами для печати.
Также при печати мы строго уменьшаем ширину блока с контентом до 600px, потому как при ширине 100% принтер "обрезает" небольшую полосу текста с правой стороны страницы. Обратите также свое внимание на то, что при печати из Opera отступ по краям листа немного меньше чем в Internet Explorer и строчки текста на листе бумаги получаются шире.
Теперь вам больше не нужно создавать дополнительные страницы для печати. Сообщить пользователям о возможности печати страницы можно, например, при помощи сылки с текстом "печать", при нажатии на которую будет выводиться всплывающая подсказка, с сообщением о возможности напрямую печатать текущую страницу без дизайна.

Автор статьи: Сергей Каминский