Глава 2.12. Страничные устройства вывода
2.12.1. Общее описание
Страничные устройства вывода (например, бумага в принтере или страницы, выводимые на экран дисплея) отличаются от непрерывных устройств тем, что документ разбивается на отдельные страницы. Для работы с такими устройствами в CSS введена модель страницы, которая позволяет авторам задавать размеры страницы и ее границ, а также управлять переходом на новую страницу. Модель страницы позволяет указать, как элементы документа должны располагаться в прямоугольнике страницы, имеющем фиксированные размеры. При этом размеры прямоугольника не обязательно совпадают с размерами реальной страницы, на которую будет произведено окончательное отображение документа. CSS не определяет, как именно обозреватель будет преобразовывать прямоугольник страницы в реальные страницы, но позволяет задать их размер и ориентацию.
2.12.2. Директива @page
Директива @page предназначена для задания свойств страниц. Она имеет следующий вид:
@page [селектор-страницы] {
правило;
...
правило;
}
Селектор-страницы — это либо имя страницы, либо один из следующих псевдоклассов:
| :first | Первая страница документа |
| :left | Левая страница (для двусторонней печати) |
| :right | Правая страница (для двусторонней печати) |
Правила, указанные в директивы @page с селектором :left или :right, перекрывают правила директивы @page без селекторов. Правила, указанные в директивы @page с селектором :first, перекрывают правила директивы @page с селектором :left или :right (это зависит от направления вывода текста). Наконец, правила, указанные в директивы @page с именем страницы, перекрывают правила остальных директив @page.
Поддержка:Синтаксически соответствует стандарту, но поддерживается только шаблонами печати MSHTML (5.5+)
Не поддерживается
2.12.2.1. Задание границ страницы
Для задания границ прямоугольника страницы используются свойства margin-left, margin-right, margin-top, margin-bottom и margin. Пример:
@page { margin: 2cm } /* Все границы равны 2 см */
2.12.2.2. Размер страницы: свойство size
Синтаксис: size: <размер>{1,2} | auto | portait | landscape | inherit Начально: auto Применимо: к страницам Наследуемо: не определено Проценты: не используются Устройства: визуальные страничные
Поддержка:
Свойство size задает размер и ориентацию прямоугольника страницы. Размеры страницы могут быть либо абсолютными, либо относительными. Абсолютные размеры задаются одним или двумя значениями типа <размер>. Если задано одно значение, то оно определяет размер страницы и по вертикали, и по горизонтали. Если заданы два значения, то первое определяет ширину страницы, а второе — ее высоту.
Относительные размеры задаются одним из следующих ключевых слов:
| auto | Прямоугольник страницы совпадает с реальным листом по размеру и ориентации. |
| portrait | Прямоугольник страницы совпадает с реальным листом по размеру; ориентация книжная. |
| landscape | Прямоугольник страницы совпадает с реальным листом по размеру; ориентация альбомная. |
Примеры:
@page { size: 8.5in 11in }
@page { size: portrait; margin: 10% }
2.12.2.3. Пометки: свойство marks
Синтаксис: marks: [crop || cross] | none | inherit Начально: none Применимо: к страницам Наследуемо: не определено Проценты: не используются Устройства: визуальные страничные
Поддержка:
В высокой печати часто используются специальные пометки на полях страницы. Свойство marks позволяет задать тип пометок на странице. Оно может принимать следующие значения:
| none | Не печатать пометки. |
| crop | Пометки, указывающие место обреза страницы. |
| cross | Пометки, используемые для выравнивания страниц. |
Пример:
@page { marks: crop cross } /* Печатать оба типа пометок */
2.12.3. Имена страниц: свойство page
Синтаксис: page: <идентификатор> | auto Начально: auto Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные
Поддержка:
Свойство page позволяет присвоить элементу имя страницы с тем, чтобы использовать свойства директивы @page, селектором которой является данное имя. Например, следующие правила указывают, что все таблицы документа необходимо печатать в альбомной ориентации:
@page rotated { size: landscape }
TABLE { page: rotated; ... }
По умолчанию это свойство имеет значение auto, поэтому к элементам, не имеющих имен страниц, применяются правила директивы @page без именного селектора.
2.12.4. Управление разрывами страниц
2.12.4.1. Разрыв страницы перед элементом: свойство page-break-before
Синтаксис: page-break-before: auto | always | avoid | left | right | inherit Начально: auto Применимо: к блочным элементам Наследуемо: нет Проценты: не используются Устройства: визуальные страничные
Поддержка:
Свойство page-break-before управляет разрывом страницы перед печатью данного элемента. Оно может принимать следующие значения:
| auto | Разрыв страницы производится обычным образом, после заполнения страницы. |
| always | Всегда начинать печать данного элемента с новой страницы. |
| avoid | Никогда не делать разрыва страницы перед данным элементом. |
| left | Один или два разрыва страницы, чтобы данный элемент всегда печатался на левой странице. |
| right | Один или два разрыва страницы, чтобы данный элемент всегда печатался на правой странице. |
Пример:
H1 { page-break-before: always }
2.12.4.2. Разрыв страницы после элемента: свойство page-break-after
Синтаксис: page-break-after: auto | always | avoid | left | right | inherit Начально: auto Применимо: к блочным элементам Наследуемо: нет Проценты: не используются Устройства: визуальные страничные
Поддержка:
Свойство page-break-after управляет разрывом страницы после печати данного элемента. Оно может принимать следующие значения:
| auto | Разрыв страницы производится обычным образом, после заполнения страницы. |
| always | Всегда начинать печать следующего элемента с новой страницы. |
| avoid | Никогда не делать разрыва страницы после данного элемента. |
| left | Один или два разрыва страницы, чтобы следующий элемент всегда печатался на левой странице. |
| right | Один или два разрыва страницы, чтобы следующий элемент всегда печатался на правой странице. |
Пример:
H1 { page-break-after: avoid }
2.12.4.3. Разрыв страницы внутри элемента: свойство page-break-inside
Синтаксис: page-break-inside: auto | avoid | inherit Начально: auto Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные
Поддержка:
Свойство page-break-inside управляет разрывами страницы при печати данного элемента. Оно может принимать следующие значения:
| auto | Разрыв страницы производится обычным образом, после заполнения страницы. |
| avoid | Никогда не делать разрыва страницы внутри данного элемента. |
Пример:
H1 { page-break-after: avoid }
2.12.4.4. Количество строк в конце страницы: свойство orphans
Синтаксис: orphans: <целое> | inherit Начально: 2 Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные
Поддержка:
Свойство orphans задает минимальное количество строк абзаца, которое должно остаться в конце страницы при печати данного элемента. Пример:
P { orphans: 3 }
2.12.4.5. Количество строк в начале страницы: свойство widows
Синтаксис: widows: <целое> | inherit Начально: 2 Применимо: к блочным элементам Наследуемо: да Проценты: не используются Устройства: визуальные страничные
Поддержка:
Свойство widows задает минимальное количество строк абзаца, которое должно остаться в начале страницы при печати данного элемента. Пример:
P { widows: 3 }
