Exogens
О компании Контакты Клиенты Новости Форум

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

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

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

У всех сайтов разные 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/

Расскажите о нас!

Мы поддержим

Техподдержка | Контакты | Форум
О компании | Отзывы | Блог
Карта сайта | На главную

Мы предлагаем создание сайтов в Новосибирске под ключ на нашей CMS Ruen, их обслуживание и сопутствующие рекламные услуги.

Сайт работает на CMS RUEN

www.webmoney.ru

Блог

26Июнь
2017
Случайный эксперимент с аудиторией сайтов
31Март
2017
Показываем объявления Яндекс Директ
15Июнь
2016
Правильный адрес сайта
31Май
2016
Обновление нашего бесплатного инструмента
12Май
2016
Эксперимент по статистике сайта
18Март
2016
Создание и разработка сайтов
1Март
2016
Вход рубль, выход – два
18Февраль
2016
Мобильная версия по Яндексу vs. Pluso.ru
© Exogens, 2003-2024ИП Богданович К.П.   ИНН 540445113470   ОГРИП 305540427600039   WM аттестован   Политика конфиденциальности