Размещаемые носители отличаются от непрерывных носителей тем, что содержимое документа разбито на одну или несколько отдельных страниц. Размещаемые носители включают бумагу, прозрачные пленки, страницы, которые отображаются на экранах компьютеров и т. Д.
Стандарт CSS2 вводит некоторые основные функции управления разбиением на страницы, которые позволяют авторам помочь браузеру выяснить, как лучше всего распечатать их документы.
Модель страницы CSS2 определяет способ форматирования документа в прямоугольной области — поле страницы — с конечной шириной и высотой. Эти функции делятся на две группы —
- Функции CSS2, которые определяют конкретный макет страницы.
- Функции CSS2, которые управляют разбиением на страницы документа.
Определение страниц: правило @page
CSS2 определяет «блок страницы», блок конечных размеров, в котором отображается контент. Поле страницы представляет собой прямоугольную область, которая содержит две области:
-
Область страницы — область страницы включает в себя поля, расположенные на этой странице. Края области страницы действуют как начальный содержащий блок для разметки, которая возникает между разрывами страницы.
-
Область полей — она окружает область страниц.
Область страницы — область страницы включает в себя поля, расположенные на этой странице. Края области страницы действуют как начальный содержащий блок для разметки, которая возникает между разрывами страницы.
Область полей — она окружает область страниц.
Вы можете указать размеры, ориентацию, поля и т. Д. Поля страницы в правиле @page. Размеры поля страницы задаются с помощью свойства size. Размеры области страницы — это размеры поля страницы минус область полей.
Например, следующее правило @page устанавливает размер поля страницы на 8,5 × 11 дюймов и создает поле «2 см» на всех сторонах между краем поля страницы и областью страницы —
<style type = "text/css"> <!-- @page { size:8.5in 11in; margin: 2cm } --> </style>
Вы можете использовать свойства margin, margin-top, margin-bottom, margin-left и margin-right в правиле @page, чтобы установить поля для своей страницы.
Наконец, свойство marks используется в правиле @page для создания меток обрезки и регистрации вне поля страницы на целевом листе. По умолчанию метки не печатаются. Вы можете использовать одно или оба ключевых слова обрезки и кросс- кода для создания меток обрезки и регистрационных меток соответственно на целевой странице печати.
Настройка размера страницы
Свойство size определяет размер и ориентацию поля страницы. Существует четыре значения, которые можно использовать для размера страницы:
-
auto — в окне страницы будет задан размер и ориентация целевого листа.
-
пейзаж — Переопределяет ориентацию цели. Размер поля страницы совпадает с размером цели, а более длинные стороны расположены горизонтально.
-
портрет — отменяет ориентацию цели. Размер поля страницы совпадает с размером цели, а более короткие стороны расположены горизонтально.
-
length — Значения длины для свойства ‘size’ создают абсолютное поле страницы. Если указано только одно значение длины, оно устанавливает ширину и высоту поля страницы. Значения в процентах не допускаются для свойства ‘size’.
auto — в окне страницы будет задан размер и ориентация целевого листа.
пейзаж — Переопределяет ориентацию цели. Размер поля страницы совпадает с размером цели, а более длинные стороны расположены горизонтально.
портрет — отменяет ориентацию цели. Размер поля страницы совпадает с размером цели, а более короткие стороны расположены горизонтально.
length — Значения длины для свойства ‘size’ создают абсолютное поле страницы. Если указано только одно значение длины, оно устанавливает ширину и высоту поля страницы. Значения в процентах не допускаются для свойства ‘size’.
В следующем примере внешние края поля страницы будут выровнены с целью. Процентное значение свойства ‘margin’ относится к целевому размеру, поэтому, если размеры целевого листа составляют 21,0 см × 29,7 см (т. Е. A4), поля составляют 2,10 см и 2,97 см.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>
В следующем примере ширина поля страницы устанавливается равной 8,5 дюймов, а высота — 11 дюймов. В этом примере для страницы страницы требуется размер листа 8,5 «× 11» или больше.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>
Создав именованный макет страницы, вы можете использовать его в своем документе, добавив свойство страницы в стиль, который позже будет применен к элементу в вашем документе. Например, этот стиль отображает все таблицы в вашем документе на альбомных страницах —
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>
Из-за вышеприведенного правила при печати, если браузер обнаруживает в документе элемент <table>, а текущим макетом страницы является макет по умолчанию, он запускает новую страницу и печатает таблицу на альбомной странице.
Левая, Правая и Первая страницы
При печати двухсторонних документов поля страниц на левой и правой страницах должны различаться. Это может быть выражено через два псевдокласса CSS следующим образом:
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>
Вы можете указать стиль для первой страницы документа с помощью псевдокласса: first —
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>
Управление пагинацией
Если не указано иное, разрывы страниц происходят только при изменении формата страницы или когда содержимое переполняет текущее поле страницы. Чтобы иным образом форсировать или подавлять разрывы страниц, используйте свойства page-break-before, page-break-after и page-break-inside .
И page-break-before, и page-break-after принимают ключевые слова auto, всегда, избежать, влево и вправо .
Ключевое слово auto используется по умолчанию, оно позволяет браузеру генерировать разрывы страниц по мере необходимости. Ключевое слово всегда заставляет разрыв страницы до или после элемента, в то время как во избежание подавляет разрыв страницы непосредственно перед или после элемента. Ключевые слова влево и вправо приводят к разрыву страницы на один или два, поэтому элемент отображается на левой или правой странице.
Использование свойств пагинации довольно просто. Предположим, что в вашем документе есть заголовки уровня 1, начинайте новые главы с заголовков уровня 2 для обозначения разделов. Вы хотели бы, чтобы каждая глава начиналась на новой правой странице, но вы не хотите, чтобы заголовки разделов разделялись на разрыв страницы из последующего содержимого. Вы можете добиться этого, используя следующее правило —
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>
Используйте только auto и избегайте значений с помощью свойства page-break-inside . Если вы предпочитаете, чтобы ваши таблицы не разбивались по страницам, если это возможно, вы должны написать правило —
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>
Контролировать вдов и сирот
В типографском жаргоне сиротами являются те строки абзаца, которые оказались в нижней части страницы из-за разрыва страницы, в то время как вдовами являются те строки, которые остаются в верхней части страницы после разрыва страницы. Как правило, печатные страницы не выглядят привлекательно с одиночными строками текста, расположенными сверху или снизу. Большинство принтеров стараются оставлять как минимум две или более строки текста вверху или внизу каждой страницы.
-
Свойство orphans указывает минимальное количество строк абзаца, которые должны быть оставлены внизу страницы.
-
Свойство widows определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы.
Свойство orphans указывает минимальное количество строк абзаца, которые должны быть оставлены внизу страницы.
Свойство widows определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы.
Вот пример для создания 4 строк внизу и 3 строк вверху каждой страницы —