Выводим на печать только часть вебстраницы или как сделать сайт print-friendly за 10 минут
Мало кто об этом раньше говорил, но сегодня уже перестало быть хорошим тоном и перешло в категорию «a must» удобство преподнесения информации сайтом пользователю. Более того, рядовой посетитель должен не только «легким движением» смочь найти и прочинать нужную ему информацию, но и взять с собой.
Как-то я наблюдал, как в одной небольшой компании девочка-секретарь пыталась распечатать мне информацию с их корпоративного сайта – открыла сайт, скопировала текст в Word, потом красила шрифт (на сайте он был желтого цвета), печатала. Именно для того, чтобы пользователи смогли распечатать красивый презентабельный документ, очень много сайтов выкладывают либо PDF-версии нужных страниц, либо дублируют контент на отдельных «страницах для печати».
Я считаю, что создание PDF-дубликатов сайта, если информация скорее всего будет распечатана или скачана с сайта для локального хранения – это лучший вариант. PDF поддерживает массу приятных вещей по типу поиска по тексту и тп, но сейчас мы говорим именно о печати. PDF позволяет на принтере получить именно в таком виде информацию, как это хочет владелец сайта. Очень хороший пример – документация с сайта developer.apple.com – любая статья на сайте доступна в прекрасно подготовленном PDF-варианте. Генерировать простой PDF-файл на сайте, который работает на PHP, достаточно несложно, например, с помощью бесплатного PHP класса FPDF. Но все это требует финансовых вложений: a) несколько дней (а то и недель) времени программиста б) значительных серверных ресурсов, если генерация динамическая и используется активно.
Какие есть альтернативы? Недавно заметил на некоторых сайтах такую интересную особенность – при попытке печати сайта (просто нажимаем Print в браузере) на принтер выводится далеко не все, что видно на экране (меню, баннеры, счетчики), а только основной контент – например, сама новость (если мы на странице новости), статья, карта «Как нас найти». Действительно, кому нужен рекламный блок Google AdSense на печатной копии сайта? :)
Как же они это делают?!
Оказывается, очень просто! И на стороне клиента – сервер не участвует в этом вообще. Дело в минимальной модификации 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
- projection
- screen
- tty
- tv
HMTLь-те :)
А если это не тайна, автор откуда родом?
Июль 14th, 2009 at 06:19
Автор из Киева.
Июль 14th, 2009 at 08:20