Версия для печати средствами CSS

2009.04.30
При хождении по интернету иногда хочется унести некоторую информацию с собой в оффлайн в печатном виде. И компьютер не всегда под боком, и на бумаге читать проще и проще показывать другим людям. Такой информацией может быть какая-либо инструкция, прайс-лист, справочная информация, да что угодно, главное чтобы после печати это можно было прочитать. Вот тут и появляется термин «версия для печати».

Версия для печати – это та же страница сайта, только без оформления и элементов навигации, которые на бумажном листе совсем не нужны и лишь отнимают место, увеличивают расход бумаги и краски для принтера. К тому же, лучше читать текст с одной страницы, чем с трех, ну это к примеру. А на сайтах с фиксированой шириной макета соотношение количества напечатанных страниц обычных и страниц версии для печати отличается еще больше.

Версия для печати – это забота о посетителях сайта, она должна быть на сайте.

Есть два способа сделать версию для печати на своем сайте:

• программный способ – требует значительного вмешательства в программный код CMS и влечет за собой некоторые проблемы, например, поисковые системы зачастую предпочитают иметь в индексе именно такие версии страниц, а не нормальные, с навигацией и оформлением;
• манипуляции с версткой – меняется только вёрстка сайта (HTML и CSS). Собственно, об этом способе и идет речь в статье, все вышенаписанное – просто предисловие.

У всех сайтов разные CMS'ки, у некоторых их вообще нет, но принципы настройки идентичны и просты.

Правим CSS

Сначала ищем, где на нашем сайте вставляется код <style> ... </style>. Люди с опытом найдут это место очень легко, остальным лучше все таки воспользоваться поиском: скачать исходники сайта на жёсткий диск и поискать тем же Total Commander строку <style (на конце не надо ставить «>», иначе может не найтись). В найденное место добавляем следующий код:

<style type="text/css" media="print">
.noprint {display: none;}
</style>

Или ищем файл вроде style.css и в него добавляем следующее:

@media print { .noprint { display: none; } }

Таким образом мы добавили класс «noprint», который будет действовать только при выводе на печать.

Правим HTML

Теперь открываем файл, где у нас записан HTML-код страницы (чтобы определить этот файл, можно также воспользоваться поиском). И начинаем по-очереди каждому блоку, который не нужен при печати, приписывать класс «noprint», выглядеть это будет примерно так: <div class="noprint">Бла-бла-бла</div>. Если уже указан какой-либо другой класс, то добавляем наше «noprint» через пробел: <div class="drugojklass noprint">Бла-бла-бла</div>.

При этом не надо мельчить, приписывая новый класс каждому элементу, это лишь увеличит код и последующую возможную неразбериху. Лучше целиком вырезать ту же шапку и блоки с навигацией. Если сайт выстроен на слоях (DIV), то здесь все очень просто таким образом скрывается.

Немного по-другому выглядит ситуация с табличной версткой. Принцип то тот же – скрывать ячейки таблицы, которые являются теми же блоками, но здесь необходимо следить за тем, чтобы в оставшейся части таблицы небыло нарушений в количестве столбцов в строках или оставшиеся ячейки небыли ограничены по ширине.

Помимо скрытия ненужных блоков, также можно подправить стили оставшихся элементов. Вот, к примеру, добавляется подчеркивание заголовков (так текст лучше выделяется при печати):

<style type="text/css" media="print">
.noprint {display: none;}
H1 {border-bottom: 1px solid #000;}
</style>

Таким образом можно быстро привести сайт к удобочитаемому виду на бумаге. На снимке ниже видно, как выглядит эта страница после печати. Всего 2 печатных страницы без лишних элементов.



На сайте системы управления CMS RUEN можно прочитать подробнее о версии для печати средствами CSS.

Спасибо за внимание и удачного дня!


Следующий пост: Микробаннеры 80x15 (#42, 2009.05.11)
Предыдущий пост: Печать визиток (#40, 2009.04.27)

Пост #41. Постоянная ссылка на пост: https://exogens.ru/blog/post/versiya-dlya-pechati-sredstvami-css/