CSS для печати и других устройств
В этой главе
- Общие свойства страницы - @page
- Управление разрывами страниц
- Управление переносом строк
- Звуковые стили
В CSS 2 специально для управления постраничным выводом был введен ряд специальных правил. Прежде всего, это директива @page (страница), при помощи которой задается общее форматирование страницы, в частности – поля документа. Для определения обрывов страниц так же предусмотрены специальные свойства – page-break-before, page-break-after и page-break-inside. А для управления переносом строк – widows и orphans.
Собственно говоря, спецификация CSS 2 предусматривала так же управление размером страницы (свойство size), управление выводом типографских меток (marks), а так же создание «именованных» страниц. Однако по причине полного игнорирования разработчиками браузеров всех этих правил, они были благополучно исключены из более новой спецификации CSS 2.1.
ПРИМЕЧАНИЕ
Вообще, с точки зрения реального положения вещей, CSS уровня 2 во многом повторяет судьбу стандарта HTML 3.0, в котором, с одной стороны, были все те же попытки введения ряда смелых инноваций, а с другой – полное нежелание разработчиков браузеров и авторов web-страниц им следовать. В случае с HTML появился компромиссный вариант – HTML 3.2, позже эволюционировавший в HTML 4.0, а в случае с таблицами стилей – CSS 2.1.
Здесь же мы перечислим свойства CSS, предназначенные для звуковых устройств доступа к Интернету.
Общие свойства страницы
Для общего форматирования страницы при выводе на печать используют директиву (или, если угодно – at-правило) @page. Фактически, @page представляет собой псевдоэлемент, являющийся контейнером, ограниченным рамками 1 печатного листа. Изо всех свойств CSS к нему допускается применять лишь одну группу свойств – margin. Возможно, со временем браузеры начнут поддерживать и другие свойства, в частности – border и padding. В то же время пока даже с полями все обстоит не слишком хорошо: только Opera и MSIE предпоследней версии поддерживают директиву @page.
Для страниц, заданных при помощи @page, предусмотрено 3 псевдокласса – :left, :right и :first. Правда, поддержка последнего хромает в Opera, а другие браузеры, как было уже отмечено, вообще не воспринимают постраничную разбивку. В целом использование директивы @page и ее псевдоклассов может сводиться к примерно следующему:
@page :left {
margin-top: auto;
margin-bottom: auto;
margin-left: 2cm;
margin-right: 5cm;
}
@page :right {
margin-top: auto;
margin-bottom: auto;
margin-left: 5cm;
margin-right: 2cm;
}
Здесь мы указали, что для левых страниц правое поле должно быть широким, а для правых – левое.
Свойство margin в контексте постраничной разбивки поддерживается только браузерами Opera и MSIE 8. Остальные собственные свойства для @page – size и marks вообще не поддерживаются никакими браузерами и исключены из спецификации CSS 2.1, однако позже были добавлены в черновую спецификацию CSS3 Paged Media (которую, что характерно, курирует сотрудник Opera Software). Впрочем, поскольку это черновик, то из CSS3 следует упомянуть разве что параметр size, который может, в числе прочих значений, принимать portrait и landscape. Соответственно, при печати страница будет выводиться в книжном или в альбомном режиме, соответственно.
@page {
size: landscape; /* вывод страницы на печать в альбомном режиме*/
}
Поддерживаются эти значения так же только браузером Opera.
Управление разрывами страниц
Помимо определения самих страниц, CSS позволяет управлять разрывы до, после и внутри блока. Для создания (или наоборот, запрета) разрывов используют свойства page-break-before, page-break-after и page-break-inside. Они отвечают за управление разрывами страниц перед, после и внутри блоков соответственно. Для них предусмотрены такие значения, как auto, always, avoid, left и right, описание которых приводится в таблице 3.15.
Значение | Примечание | Описание |
---|---|---|
auto | По умолчанию | Не создает, но и не запрещает создавать разрыв |
always | Только page-break-before и page-break-after | Всегда создает разрыв |
avoid | - | Запрещает разрыв |
left | Только page-break-before и page-break-after | Аналогично always, но следующая страница будет отформатирована как левая |
right | Только page-break-before и page-break-after | Аналогично always, но следующая страница будет отформатирована как правая |
Следует отметить, что на практике все три свойства, создающих разрыв страницы (always, left и right), ведут себя совершенно одинаково, просто создавая разрыв. А если быть честным — то left и right попросту не поддерживаются ни одним из рассматриваемых браузеров, кроме Opera 9 и выше (где действительно вставляются пустые страницы). Что же касается использования их на практике, то применение приведенного ниже фрагмента кода CSS приведет к тому, что заголовки первого уровня всегда будут начинаться с новой страницы, а цитаты при печати будут расположены таким образом, чтобы умещаться на странице целиком:
h1 { page-break-before: always; }
blockquote { page-break-inside: avoid; }
Свойства page-break
Значение по умолчанию: auto.
Наследуемые значения: page-break-inside – да, остальные – нет.
Применяется: к элементам уровня блока при выводе на печать.
Совместимость: Opera 9 — полная, остальные - частичная.
Управление переносом строк
Для управления переносом первых и последних строк в текстовых блоках (например, в абзаце) применяют свойства orphans и widows. При этом свойство orphans определяет минимальное количество строк абзаца, которые должны быть оставлены в нижней части страницы, а свойство widows определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы. Они могут принимать значение в виде целого числа, при чем по умолчанию для обоих свойств установлено значение 2, при котором управление переносами получается полностью аналогичным используемому в текстовых процессорах (например, в Word) при включенном запрете висячих строк. Например, если абзац имеет, скажем, 8 строк строка текста, а на оставшемся месте страницы умещается только 7, то на первой странице будет напечатано только 6 строк, а 7-я будет перенесена на вторую страницу, чтобы «составить компанию» 8-й строке.
Если же вы не против того, чтобы образовывались висячие строки, скажем, в начале новой страницы, то можно указать такое правило:
p {widows: 1;}
В таком случае, если рассматривать условие из вышеприведенного примера, то на первой странице будут напечатаны все 7 строк, а 8-я одиноко расположится в начале следующей страницы.
Используя управление переносами строк, следует учитывать, что данный документ может быть разбит в принципе, т.е. свойство page-break-inside не установлено в avoid.
Свойства widows и orphans
Значение по умолчанию: 2.
Наследуемые значения: да.
Применяется: к элементам уровня блока при выводе на печать.
Совместимость: Opera, MSIE 8.
Звуковые стили
Завершая знакомство с таблицами стилей, следует упомянуть о звуковых стилях. Хотя рассматриваемые нами графические браузеры и не поддерживают звуковые таблицы стилей (исключение составляет лишь Opera 8), знать хотя бы о том, что они существуют, и какие для них предусмотрены свойства, все равно будет полезно.
Прежде всего, фрагмент CSS, отвечающий за управление звуком, следует выделить при помощи директивы @media. При этом в качестве значения для @media по правилам CSS 2 следует указывать aural, а по правилам CSS 2.1 – speech. Какое именно значение вам следует использовать, если вдруг придется разрабатывать аудио-CSS, покажет лишь проверка на практике.
Специально для звуковых таблиц стилей предусмотрены специальные типы данных, а именно углы, время и частота. Углы измеряются в градусах (deg), градах (grad) и радианах (rad), время – в секундах (s) и миллисекундах (ms), а частота – в герцах (Hz) или килогерцах (kHz).
Что же касается самих звуковых свойств, то все они с кратким описанием собственного предназначения и списком допустимых параметров приведены в таблице 3.16.
Свойство | Возможные значения (в скобках – по умолчанию) | Краткое описание |
---|---|---|
volume | Число | % | silent | x-soft | soft | medium | loud | x-loud (medium) | Задает громкость звука, причем 0 указывает на минимальный слышимый уровень громкости, а 100 – на максимально комфортный |
speak | normal | none | spell-out (normal) | Определяет, будет ли текст озвучиваться, и если да, то нормально или побуквенно |
pause-before, pause-after, pause | Время | % (по умолчанию не определено) | Задают паузу до или после фрагмента |
cue-before, cue-after, cue | URI | none (none) | Задают звуковой сигнал до или после фрагмента |
play-during | URI mix, repeat | auto | none (auto) | Определяет звуковой фон |
azimuth | Угол | left-side | far-left | left | center-left | center | center-right | right | far-right | right-side | behind | leftwards | rightwards (center) | Управляет направлением воспроизведения по горизонтали при работе с объемным звуком (актуально для «озвучки» сцен VRML) |
elevation | Угол | below | level | above | higher | lower (level) | Управляет направлением воспроизведения по вертикали |
speech-rate | Число | x-slow | slow | medium | fast | x-fast | faster | slower (medium) | Задает частоту воспроизведения слов |
voice-family | «Имя голоса» (по умолчанию не определено) | Задает список семейств голосов для воспроизведения, например, male или female |
pitch | Частота | x-low | low | medium | high | x-high (medium) | Задает среднюю частоту («высоту») голоса. Реальное значение зависит от семейства голосов (ниже для мужского голоса и выше – для женского) |
pitch-range | Число (50) | Определяет вариацию относительно средней высоты голоса, где 0 – монотонный голос, а 100 – с максимально возможной интонацией |
stress | Число (50) | Задает высоту пиков на фоне основной интонации голоса (управление ударениями) |
richness | Число (50) | Задает насыщенность, или яркость, голоса |
speak-punctuation | code | none (none) | Определяет метод озвучивания знаков пунктуации – при значении code они будут произноситься |
speak-numeral | digits | continuous (continuous) | Определяет метод озвучивания чисел – по цифрам (digits) или целиком (continuous) |
Теперь остается лишь привести пример CSS для голосового синтезатора, используемого для доступа к Интернету:
@media speech {
body {play-during: url('silentsong.mp3') repeat; }
h1 {voice-family: male; cue-before: url('beep.wav'); pause: 300ms; }
p {voice-family: female; pause-before: 150ms;}
}
На этом примере, который, возможно, вам в обозримом будущем и не понадобится, мы завершаем знакомство с каскадными таблицами стилей.
2011-06-25 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !