Отличия между экранным и печатным представлениями

Кроме очевидной физической разницы, между экранным и печатным представлениями существует ряд стилистических отличий. Самое основное – выбор шрифтов. Большинство разработчиков скажут, что рубленые шрифты лучше всего подходят для экранного представления, а вот шрифты антиква лучше читаются при печати. Таким образом, можно создать таблицу стилей для печати, выводящую текст документа шрифтом Times вместо Verdana. Следующее отличие заключается в задании размеров шрифтов. Тот, кто хоть немного занимался веб-разработкой, вероятно, неоднократно слышал, что пункты не подходят для задания размеров шрифтов в Интернете.

В основном это верно, особенно если вы хотите, чтобы в различных броузерах и операционных системах размеры текста были одинаковыми. Однако печатное представление – это не веб-представление, а веб-представление отличается от печатного. В печатном представлении применение пунктов или даже сантиметров или пик вполне допустимо, потому что печатные устройства знают физический размер своей области вывода. Принтер знает, что размер зоны печати соответствует размерам листа бумаги (например, 8.5×11 дюймов). Он также знает, сколько точек в дюйме, поскольку осведомлен о том, сколько точек на дюйм (dpi) может сгенерировать.


Это значит, что принтер может оперировать такими физическими единицами измерения длины, как пункты. Поэтому многие таблицы стилей для печати начинаются примерно с такого объявления:

body {font: 12pt "Times New Roman", "TimesNR", Times, serif;}

Это настолько традиционно, что у графического дизайнера, читающего у вас через плечо, на глаза навернулись бы слезы умиления. Но убедитесь, что он понимает: пункты приемлемы только из-за природы печатного устройства, для веб-представлений они по-прежнему не годятся. Напротив, отсутствие фона в большинстве распечаток, должно быть, вызывает у этого дизайнера слезы отчаяния. Для сохранения чернил пользователя большинство веб-броузеров заранее сконфигурированы так, чтобы не выводить на печать фоновые цвета и изображения. Если пользователь хочет видеть эту информацию на распечатке, он должен изменить параметры в настройках броузера. CSS никак не может воздействовать на распечатку фона. Однако для вывода на печать можно использовать таблицу стилей и сделать фон ненужным. Например, включить в таблицу стилей для вывода на печать следующее правило:

* {color: black !important; background: white !important;}

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


Поскольку в любом случае большинство принтеров пользователей будут именно так генерировать визуальное представление страницы, лучше не задавать настройки стилей для вывода на печать в тех же строках. Это также гарантирует, что если в веб-документе желтый текст располагается на темно-сером фоне, пользователь с цветным принтером не получит распечатку, в которой желтый текст будет располагаться на белом листке бумаги. CSS2.x не содержит механизма выбора таблицы стилей в зависимости от устройства вывода пользователя. Таким образом, все принтеры будут использовать определенные автором таблицы стилей для вывода на печать. Модуль CSS3 «Media Queries» определяет способы выбора разных таблиц стилей для цветных и черно-белых принтеров, но на момент написания данной книги запросы типа устройства не поддерживаются.

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


Это сильно раздражает в экранных представлениях веб-документов, а на бумажном носителе и подавно. Очевидное решение состоит в том, чтобы использовать CSS для верстки двух колонок (может быть, делая их перемещаемыми) и затем создавать для вывода на печать таблицу стилей, которая помещает содержимое в одну колонку. Таким образом, в таблице стилей для вывода на экран вы могли бы написать нечто подобное:

div#leftcol {float: left; width: 45%;}
div#rightcol {float: right; width: 45%;}

А это – в таблице стилей для вывода на печать:
div#leftcol, div#rightcol {float: none; width: auto;}

Если бы в CSS была возможность создавать макеты, состоящие из нескольких колонок, ничего подобного не понадобилось бы. К сожалению, на момент написания данной книги ничего в этом направлении не предложено, хотя попыток за долгие годы было предпринято немало. Мы могли бы посвятить целую главу подробностям печатного представления, но основная цель этой книги другая. Давайте обратимся к деталям CSS, связанным с устройствами с постраничной разбивкой, и оставим обсуждение дизайна для другой книги.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воспроизведение речи
Выбор типов страниц
Звуковое воспроизведение заголовков таблиц
Звуковое сопровождение
Изменение высоты

Вернуться в раздел: CSS / 14. Неэкранные устройства