SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

CSS для печати и других устройств

В этой главе

  1. Общие свойства страницы - @page
  2. Управление разрывами страниц
  3. Управление переносом строк
  4. Звуковые стили

В 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.

Таблица 3.15. Допустимые значения для свойств page-break
ЗначениеПримечаниеОписание
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.

Таблица 3.16. Свойства аудио-CSS
СвойствоВозможные значения (в скобках – по умолчанию)Краткое описание
volumeЧисло | % | silent | x-soft | soft | medium | loud | x-loud (medium)Задает громкость звука, причем 0 указывает на минимальный слышимый уровень громкости, а 100 – на максимально комфортный
speaknormal | none | spell-out (normal)Определяет, будет ли текст озвучиваться, и если да, то нормально или побуквенно
pause-before, pause-after, pauseВремя | % (по умолчанию не определено)Задают паузу до или после фрагмента
cue-before, cue-after, cueURI | none (none)Задают звуковой сигнал до или после фрагмента
play-duringURI 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-punctuationcode | none (none)Определяет метод озвучивания знаков пунктуации – при значении code они будут произноситься
speak-numeraldigits | 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 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2020 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru