Глава 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.

Поддержка:  Internet Explorer Синтаксически соответствует стандарту, но поддерживается только
               шаблонами печати MSHTML (5.5+)
            Netscape Navigator Не поддерживается

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
Применимо:  к страницам
Наследуемо: не определено
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство 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
Применимо:  к страницам
Наследуемо: не определено
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

В высокой печати часто используются специальные пометки на полях страницы. Свойство marks позволяет задать тип пометок на странице. Оно может принимать следующие значения:

none Не печатать пометки.
crop Пометки, указывающие место обреза страницы.
cross Пометки, используемые для выравнивания страниц.

Пример:

@page { marks: crop cross }	/* Печатать оба типа пометок */

2.12.3. Имена страниц: свойство page

Синтаксис:  page: <идентификатор> | auto
Начально:   auto
Применимо:  к блочным элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство 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
Применимо:  к блочным элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Поддерживаются auto, always и "" вместо avoid (4.0+)
            Netscape Navigator Не поддерживается

Свойство 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
Применимо:  к блочным элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Поддерживаются auto, always и "" вместо avoid (4.0+)
            Netscape Navigator Не поддерживается

Свойство 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
Применимо:  к блочным элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство page-break-inside управляет разрывами страницы при печати данного элемента. Оно может принимать следующие значения:

auto Разрыв страницы производится обычным образом, после заполнения страницы.
avoid Никогда не делать разрыва страницы внутри данного элемента.

Пример:

H1 { page-break-after: avoid }

2.12.4.4. Количество строк в конце страницы: свойство orphans

Синтаксис:  orphans: <целое> | inherit
Начально:   2
Применимо:  к блочным элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

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

P { orphans: 3 }

2.12.4.5. Количество строк в начале страницы: свойство widows

Синтаксис:  widows: <целое> | inherit
Начально:   2
Применимо:  к блочным элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные страничные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

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

P { widows: 3 }
HIVE: All information for read only. Please respect copyright!
Advertising:
Hosted by hive
йца: йХЕБЯЙЮЪ ЦНПНДЯЙЮЪ АХАКХНРЕЙЮ