Таблица стилей для принтера (/Web-дизайн)

Таблица стилей для принтера

http://v.e-du.ru/?http://sweeper.homewind.net

Вступление

Вы, наверное, спросите: «Причем тут к юзабилити таблицы стилей для принтера?» Подумаем логически. Человеку нравится ваш сайт, им удобно и просто пользоваться. Посетитель нашел нужную ему информацию (статью или прайс-лист) и хочет подробнее с ней ознакомиться в оффлайне. Он распечатывает страницу и... что же он видит?

Половину страницы занимает навигация, баннеры, логотипы, счетчики и прочее. А сама статья (или цены) «обрезаны» по правому краю и нечитабельны. Естественно, впечатление от вашего ресурса сильно ухудшается.

Вот для того, чтобы все было на пять баллов, мы и напишем таблицу стилей (далее ТС) для принтера.

Рассматривать будем два варианта верстки сайтов: табличный (наиболее распространенный) и блоковый (CSS).

Начнем с самого трудного, чтобы вы в итоге поняли преимущество перехода на блоковую модель верстки.

Подключение

Создаем файл print.css (или назовите как хотите) и подключаем к странице. Для этого в секции <HEAD> прописываем

<LINK rel=stylesheet type=text/css href=print.css media=print>

Табличная верстка

Что мы можем сделать? Так как мы имеем сплошные таблицы, которые в коде никак не различаются, то оптимизация страницы для печати будет состоять в следующем:

убираем графику
Для этого в ТС пишем объявление img {display:none}. Правда, если в текстовой части у вас есть какие-либо рисунки (графики, иллюстрации), то и они исчезнут.
меняем гарнитуру и размер шрифта
Так как в он-лайне мы должны использовать шрифты без засечек (sans-serif), а на бумаге лучше читаются шрифты с засечками (serif), то прописываем следующее (при условии, что текст заключен в тег <P> ): p {font: 14pt "Times New Roman", Times, serif;}.

Как видите, средств контроля мало и, возможно, они окажутся не очень эффективными (зависит от степени сложности и вложенности таблиц).

Поэтому я агитирую вас на переход к блоковой модели верстки сайтов.

Блоковая модель CSS

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

Простой сайт будет состоять из трех-четырех блоков: top (верхний: логотип, баннер), menu (левый: панель навигации), text (основной: информация) и, возможно, footer (нижний: копирайты, счетчики и пр.)

Верхний блок нам не нужен, т.к. заголовок окна (<TITLE>) будет напечатан верхним колонтитулом на странице, и посетитель будет знать, откуда страница.

Поэтому отключаем верхний блок объявлением #top {display: none}.

Левый блок (с навигацией) тоже не нужен. Отключаем...

#menu {display: none}

Теперь центральный (текстовый) блок. Если вы пользовались абсолютным позиционированием, то нужно сделать так, чтобы текст распечатывался по всей ширине страницы. Для этого поднимаем блок и делаем его ширину равной 100%

#text {position: absolute; top: 0px; left: 0px; width: 100%;}

и меняем шрифт

p {font: 14pt "Times New Roman", Times, serif;}

Если вы использовали заголовки <H*>, то выравниваем их по левому краю

h* {text-align: left;}

Также вы можете прописать объявления для любых элементов, которые вы хотите чтобы отображались при печати как-то по особому.

Нижний блок тоже не нужен, поэтому отключаем и его:

#footer {display: none;}

Полная ТС к нашему примеру выглядит следующим образом:
/*объединяем объявления для неотображаемых блоков (экономия кода)*/ #top, #menu, #footer {display: none} #text {position: absolute; top: 0px; left: 0px; width: 100%; font: 14pt "Times New Roman", Times, serif;} h* {text-align: left;}

«Невидимые» элементы

Если вы посмотрите на эту страницу в распечатке или предварительном просмотре, то увидите под этим абзацем элемент, который не виден в он-лайне, но появится в распечатке. ЭТУ СТРОЧКУ ВЫ НЕ УВИДИТЕ В ОН-ЛАЙНЕ, НО ОНА ПОЯВИТСЯ В РАСПЕЧАТКЕ

Зачем это нужно?

Можно поставить логотип компании в качестве «водяного знака» на печатной копии
Если у вас есть ссылки на другие ресурсы, то это имеет смысл только в он-лайне. Человек кликнул по ссылке и попал на другой сайт. В печатной же копии он увидит только подчеркнутое слово, за которым непонятно что кроется (при условии, конечно, что ссылки у вас подчеркнуты). Поэтому в печатной копии нужно продублировать ссылки.

Как это делается?

Берете любой тег, который никак не используется в коде. Я, например, беру <VAR>. Это, конечно, нелогично с точки зрения HTML, но что делать?.. В ТС для страницы для этого тега пишем

var {visibility: hidden;} и он не отображается в он-лайне

А в принтерной ТС пишем

var {visibility: visible;}

И чтобы это было более похоже на ссылку, добавляем подчеркивание

var {visibility: visible; text-decoration: underline;}

Внутри тега пишем URL или любую другую информацию. Таким образом, с помощью свойства visibility можно разнообразить печатную копию: добавить адрес сайта, дополнительную рекламу и многое другое.

Чтобы не портить большое количество бумаги во время экпериментов, пользуйтесь опцией «предварительного просмотра» вашего браузера.

Возражения и мнения принимаются на sweeper@homewind.net