Выводим на печать только часть вебстраницы или как сделать сайт print-friendly за 10 минут

Февраль 18, 2008

Мало кто об этом раньше говорил, но сегодня уже перестало быть хорошим тоном и перешло в категорию “a must” удобство преподнесения информации сайтом пользователю. Более того, рядовой посетитель должен не только “легким движением” смочь найти и прочинать нужную ему информацию, но и взять с собой.

Как-то я наблюдал, как в одной небольшой компании девочка-секретарь пыталась распечатать мне информацию с их корпоративного сайта - открыла сайт, скопировала текст в Word, потом красила шрифт (на сайте он был желтого цвета), печатала. Именно для того, чтобы пользователи смогли распечатать красивый презентабельный документ, очень много сайтов выкладывают либо PDF-версии нужных страниц, либо дублируют контент на отдельных “страницах для печати”.

Я считаю, что создание PDF-дубликатов сайта, если информация скорее всего будет распечатана или скачана с сайта для локального хранения - это лучший вариант. PDF поддерживает массу приятных вещей по типу поиска по тексту и тп, но сейчас мы говорим именно о печати. PDF позволяет на принтере получить именно в таком виде информацию, как это хочет владелец сайта. Очень хороший пример - документация с сайта developer.apple.com - любая статья на сайте доступна в прекрасно подготовленном PDF-варианте. Генерировать простой PDF-файл на сайте, который работает на PHP, достаточно несложно, например, с помощью бесплатного PHP класса FPDF. Но все это требует финансовых вложений: a) несколько дней (а то и недель) времени программиста б) значительных серверных ресурсов, если генерация динамическая и используется активно.

Какие есть альтернативы? Недавно заметил на некоторых сайтах такую интересную особенность - при попытке печати сайта (просто нажимаем Print в браузере) на принтер выводится далеко не все, что видно на экране (меню, баннеры, счетчики), а только основной контент - например, сама новость (если мы на странице новости), статья, карта “Как нас найти”. Действительно, кому нужен рекламный блок Google AdSense на печатной копии сайта? :)

Пример вывода на печать только части HTML страницы

Как же они это делают?!

Оказывается, очень просто! И на стороне клиента - сервер не участвует в этом вообще. Дело в минимальной модификации HMTL-кода. Создадим простой пример в HTML/CSS2:

<html>
<head>
<title>Test File</title>
<style type=”text/css”>
@media print {
 #noprint {display:none; }
}
</style>
</head>
<body>
<p>Заголовок статьи</p>
<p id=noprint>Здесь может быть меню, Ваша реклама и тп</p>
<p>А здесь - важная статья</p>
</body>
</html>

На принтер уйдет вот такая страница:

<html>
<head>
<title>Test File</title>
</head>
<body>
<p>Заголовок статьи</p>
<p>А здесь - важная статья</p>
</body>
</html>

Это очень полезно и тогда, когда шапка сайта занимает полстраницы и/или состоит из flash-элементов.

Более того, в случае желтого фонта на сайте (или белого цвета шрифта сайта и черного фона) можно в @media print {} определить подходящие шрифты для печати.

Кстати, в @media screen {} можно определять что-то только для вывода на экран. Но это уже отдельная тема.

Вот еще варианты подгрузки css только для печати.

<link rel=”stylesheet” type=”text/css” href=”printexample.css” media=”print”>

Или вот так:

<style type=”text/css” media=”print”>
@import “printexample.css”;
</style>

Вот все доступные media согласно спецификации CSS2:

  • all (по умолчанию)
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

HMTLь-те :)

Опубликовано в: Технологии

Комментировать