Библиотека Интернет Индустрии I2R.ru

Итак, как нам сделать страницу, хорошо выдерживающую такую пытку, как распечатка?

Первое, что нам нужно— броузер Мозилла1.0. И принтер. Броузер Мозилла хорош тем, что имеет очень хорошую «прибамбасину» для предварительного просмотра выводимой на печать страницы. Нечто подобное есть и в Опере, но она показывает в большинстве случаев просто черно-белый вариант страницы, не учитывая таблицу стилей print.

Основы.

Броузеры (современные достаточно) понимают указание на устройство, для которого данный файл стилей предназначен:

Внимание обращаем на media=; print— это для принтера, screen— для экранов, all— для всех устройств. На самом деле есть еще возможность подключения стилей для речевых броузеров, для устройств с азбукой Брайля (для слепых), для настенных проекторов и еще много для чего, смотрим все в переводе спецификации (в меню слева внизу). Но работают пока вполне приемлемо только распознавание только трех этих устройств. Для распечатки страницы нам этого хватит вполне. Да и с азбукой Брайля я, слава богу, не знаком...

Сам не особо часто сталкиваюсь с подобной потребностью, но, бывало, слышал такое: «мы это сейчас распечатаем и спокойно посмотрим».

Речь пойдет о сайтах, собранных на CSS, конечно. С обычными сайтами на таблицах ничего особого сделать или нельзя, или очень дорого это будет стоить, так что лучше сразу делать странички с расчетом на будущую распечатку.

Для примера, конечно, наш сайт и возмем... (для печати я его не готовил, можете не проверять).

Итак.

Что имеет значение в страничке, которую вы видете? Правильно, центральный столбец с информацией и заголовок. От этого и будем прыгать.

Для начала пишем «нормальный» файл стилей для screen устройств style.css, он нам дорог как основа. Теперь сохраняем его под именем, например, print.css (клонируем, так сказать). Убираем ссылку на файл style.css, и помещаем на страницу ссылку на файл print.css. Теперь при предпечатном просмотре в Мозилле мы увидим, что у нас получается.

Все ссылки левого меню находятся у меня в отдельном блоке— ставим ему display: none;— блок «умер». Проделываем эту операцию с блоком правого меню, «убиваем» и его. Смотрим в Мозилле— хорошо, нет их...

Весь блок шапки и все остальные блоки кроме нужного нам центрального—display: none;— пока не останется только нужный нам центр.

...Остался.

Так как все у меня абсолютно спозиционированно, то и изменять нам придется много. Поднимаем центральный блок повыше (контролируя весь процесс в просмотровике Мозиллы), и меняем его ширину на сто процентов. После чего задаем внутренние отступы в body padding-left: 10%; padding-right: 10%;, по десять процентов с каждой стороны. Это для примера, желательно поля сделать побольше— читать удобнее будет.

Мелочи. Важные мелочи.

Увеличиваем шрифты до, хм, small минимум, лучше еще крупнее, меняем шрифт на font-family: "Times New Roman", Times, serif; везде, где он у нас виден. Говорят, он лучше читаем со страницы (сам я читаю с экрана, и особой разницы не вижу, но рекомендуют... ).

Далее убираем все темные фоны, отличные от белого. Все, получается, убираем (имейте ввиду, если кто попробует распечатать страницу с темным фоном, и эта страница ваша... он вас найдет и скажет что очень обижен :0).

Убираем все фоновые рисунки из стилей— зачем вводить людей в дополнительные траты по покупке нового картриджа для принтера?

Надо убрать все картинки, по этой-же причине... Если все картинки в уже убранных блоках— хорошо, если нет— надо думать... Можно попробовать решить проблему кардинально— прописать в стилях img {display: none;}, сам не пробовал, но стоит попробовать (и всем рассказать).

Итак, что мы получили— весьма «кастрированную» страничку, в которой нет ничего, кроме текста и заголовка. Чем особенно хороши таблицы стилей, так это тем, что мы можем изменить расположение блоков— что-то переместить вверх, что-то влево. С таблицами такого не сделать...

Теперь ушатик воды вам на лысинку (еще нет ее? подождите— будет).

Вставляем на место линк на наш основной файл стилей style.css и видим полный «расдрай» в Опере— все поехало, если не хуже. Дело в том, что броузер видит две таблицы стилей и то, чего нет в первой, он дополняет из второй. Помните, мы блоки убивали?

Ставим линки на стили в определенной последовательности:

Файл для печати у нас содержит меньше отображаемой информации, там мы все поубивали, а вот из основного файла все будет дополнятся. Только вот одна процедура еще осталась— все «убитые» в файле стилей для печати мы должны «оживить» в стилях для экрана, display: block; им, или display: inline;, смотря по предназначению.

Да! Имейте ввиду, что для Мозиллы, например, такое восстановление можно и не делать— «сказано для принтеров, значит для принтеров», и не полезет она туда; а вот Опера... Ей, видимо, глубоко побоку, для какого это устройства мы писали, все сожрет (вот зараза) и, что самое интересное, на экране все выведет как на принтере. Не такое это простое дело, как оказывается... Одно радует— подготовив для распечатки одну страничку, мы одновременно готовим и весь сайт...

Налил чаю и вспомнил (совсем забыл, пардон)— вывод страницы на печать можно делать так: