page-break-before в CSS


Содержание

page-break-before

Свойство CSS page-break-before используется для создания принудительного разрыва страницы перед элементом, при выводе HTML-документа на печать.

Тип свойства

Применяется: к блочным элементам.

Согласно спецификации браузер должны поддерживать данное свойство для блочных элементов, но могут и для других. Поэтому некоторые браузеры поддерживают page-break-before , например, для ячеек таблиц ( , ), элементов списка ( ) и т.д.

Значения

Значением свойства page-break-before является одно из ключевых слов разрешающее или запрещающее создавать разрыв перед элементом.

  • auto — браузер сам решает создавать или нет разрыв страницы перед блочным элементом.
  • always — всегда создает принудительный разрыв страницы перед блочным элементом.
  • avo >page-break-before от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: auto.

Не только page-break-before может создавать принудительный разрыв страницы, это можно сделать также с помощью свойств page-break-after (разрыв после блочного элемента) и page-break-ins >left , right и always будут приоритетными перед avoid .

Синтаксис

Пример CSS: использование page-break-before

Если на сайте используются стили для печати, то часто имеет смысл создавать для этого отдельные таблицы и подключать их с помощью At-правила @media или тега .

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: До 9.0 9.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Частично Частично Да Частично

Internet Explorer 6.0 и 7.0 не понимают значение inherit , а до версии 8.0 включительно, трактуют значения left и right , как always .

Chrome, Firefox и Safari не понимают значения avoid , left и right .

page-break

Easily manage projects with monday.com

There isn’t an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before , page-break-after and page-break-inside . These properties help define how the document is supposed to behave when printed. For example, to make a printed document more book-like.

Properties

page-break-before

The page-break-before property adds a page-break before the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-before property. This new property also handles column and region breaks while being syntactically compatible with page-break-before . Thus before using page-break-before , check if you can use break-before instead.

A common use case for this is to apply it to the selector #comments so a user printing a page with comments could easily choose to print the whole document but stop before the comments cleanly.

page-break-after

The page-break-after property adds a page-break after the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-after property. This new property also handles column and region breaks while being syntactically compatible with page-break-after . Thus before using page-break-after , check if you can use break-after instead.

page-break-inside

The page-break-inside property adds a page-break inside the element to which it is applied.

Syntax

The left and right values for page-break-before and page-break-after refer to a spread layout (like a book) where there are distinct left and right pages. They work like this:

  • left forces one or two page breaks after the element so that the next page is formatted as a left page.
  • right forces one or two page breaks after the element so that the next page is formatted as a right page.


Consider always as a mix of both. The specification says:

A conforming user agent may interpret the values ‘left’ and ‘right’ as ‘always’.

Example

This code snippet does 3 things:

  • it forces a page-break before all h2 headings (perhaps h2 tags in your document are chapter titles that deserve a fresh page)
  • it prevents page-breaks right after sub-headings because that looks odd
  • it prevents page-breaks inside pre tags and block-level quotes
  • @page
  • break-after
  • break-before
  • orphans
  • w > Chrome Safari Firefox Opera IE Android iOS Any Any Any 7+ 4+ TBD TBD

You can print from mobile devices, like AirPrint on iOS, but we haven’t tested this much. If anyone has data on support, let us know.

page-break-before

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.2+

Internet Explorer и Firefox не поддерживают значения свойства «left» и «right».

Описание

CSS свойство page-break-before определяет наличие или отсутствие разрыва страницы перед заданным элементом и используется при печати или для предварительного просмотра печати.

Свойство нельзя использовать с абсолютно позиционированными элементами.

Используйте свойства для разрыва страницы как можно реже и избегайте применения этих свойств внутри таблиц, плавающих элементов и блочных элементов с рамкой.

Свойство CSS page-break-before

Свойство page-break-before в CSS используется для добавления разрыва страницы перед указанным элементом.

Это свойство помогает определить, как должен вести себя документ при печати. Аналогично, все три свойства: «разрыв страницы до», «разрыва страницы» и «разрыва страницы» помогают определить и, следовательно, определить, каким будет итоговый документ при печати.

Примечание. Свойство page-break-before нельзя использовать для абсолютно позиционированных или пустых элементов.

Синтаксис:

Значения :

    auto: относится к автоматическому разрыву страницы.

page-break-before

The page-break-before property is used to specify whether or not a page break should occur before the element it is applied to.

Page breaks are applied to paged media, such as printed books or documents. When a page is broken, the layout ends in the current page and the remaining elements of the document are laid out in a new page. You can see this in PDF documents, where some pages have a lot of white space left, and content continues on the next page. If no page break rules are specified, the page may break inside pieces of content such as text, lists, code snippets, images, etc.

Image showing a page break with a paragraph of text spanning across two pages.

The page-break-before property also specifies on what page (left or right) the subsequent content should resume.

For example, you can tell the user agent to break a page before an h1 element. The heading and any content that comes after it would then be printed on the next page, such as a heading of a new chapter in a book, for example, which usually starts in a new page. You rarely ever see a chapter start in the middle or end of a page.


The first page is broken so that the heading starts at a new page. This can be achieved using the page-break-before property. All pages in the book start the headings in new pages, this can be done by using the always value.

In the following example, we’re using the @media rule to specify page break styles for printed documents. We’ll select all h1 headings and tell the user agent to break the pages before the headings at all times.

Another use case for page-break-before is to break pages before comment threads. It is preferable to print comment threads on a new page and not have them start in the middle or end of the previous page which could normally contain the ending part of an article, for example.

The page-break-before property is applied to block-level elements in the normal flow of the root element. User agents may also apply it to other elements, e.g., ‘table-row’ elements.

Trivia & Notes

Page breaks may help avoid or cause orphans and widows in pages.

When a page break splits a box, the box’s margins, borders, and padding have no visual effect where the split occurs.

This property is in progress of being replaced by the more generic break-before property. This new property also handles column and region breaks while being syntactically compatible with page-break-before . Thus before using page-break-before , check if you can use break-before instead.

Official Syntax

  • Syntax:
  • Initial: auto
  • Applies To: block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
  • Animatable: no
  • Values

    Examples

    The following example causes pages to break before a comment thread with an ID comments :

    Browser Support

    CSS page-break properties

    Properties to control the way elements are broken across (printed) pages.

    CSS break-before

    The CSS break-before property allows you to force a break on multi-column layouts, paged media, and in multi-region contexts.

    More specifically, the property allows you to determine whether a break should occur before the generated box, and what type of break it should be.

    You can also use break-after to determine the breaking behavior after the generated box and break-inside to determine the breaking behavior within the generated box.

    Syntax

    The forced break values ( left , right , recto , verso , page , column and region ) create a forced break in the flow while the avoid break values ( avoid , avoid-page , avoid-column and avoid-region ) indicate that content should be kept together.

    More detail on these values below.

    Possible Values

    Each possible value has an effect within a given context (although auto and avoid have an effect in any context).

    Generic Break Values

    These values have an effect regardless of the type of fragmented context containing the flow.

    auto Specifies to neither force nor forbid a page/column break before the principal box. avoid Specifies to avoid a page break before the principal box.

    Page Break Values


    These values only have an effect in paginated contexts (e.g. printed content). They have no effect if the flow is not paginated.

    avoid-page Specifies to avoid a page break before the principal box. page Specifies to always force a page break before the principal box. left Specifies to force one or two page breaks before the principal box so that the next page is formatted as a left page. right Specifies to force one or two page breaks before the principal box so that the next page is formatted as a right page. recto Specifies to force one or two page breaks before the principal box so that the next page is formatted as either a left page or a right page, whichever is second (according to the page progression) in a page spread. verso Specifies to force one or two page breaks before the principal box so that the next page is formatted as either a left page or a right page, whichever is first (according to the page progression) in a page spread.

    Column Break Values

    These values only have an effect in multi-column contexts. They have no effect if the flow is not within a multi-column context.

    avoid-column Specifies to avoid a column break before the principal box. column Specifies to always force a column break before the principal box.

    Region Break Values

    These values only have an effect in multi-region contexts. They have no effect if the flow is not linked across multiple regions.

    avoid-region Avoid a region break before the principal box. region Always force a region break before the principal box.

    In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

    initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

    Page-break-before в CSS

    Системы постраничного представления документа (например, листы бумаги, прозрачные пленки, страницы, отображаемые на экране компьютера и т.д.) отличаются от представления без разбивки тем, что в них все содержимое документа выводится на одной или нескольких отдельных страницах. Для реализации разбиения по страницам модель визуального форматирования в CSS2 расширена следующим образом:

    1. модель представления документа в виде блоков расширена путем введения страничного блока, позволяющего разработчикам регулировать размеры страниц, их поля и т.д.;
    2. модель визуального форматирования расширена путем введения , позволяющей осуществлять разрывы страниц.

    Модель страницы, используемая в CSS2, определяет способ вывода документа в пределах прямоугольной области конечных размеров, называемой страничным блоком. Он не обязательно совпадает с реальным (листом бумаги, прозрачной пленкой, экраном и т.д.), на котором в конечном итоге будет отображен документ. Модель страницы, используемая в CSS, определяет, как будет осуществляться вывод в страничном блоке, за переход от которого к реальному листу ответственен уже агент пользователя. Некоторые аспекты этого перехода перечислены ниже:

    • переход от одного страничного блока к одному листу (например, при односторонней печати);
    • переход от двух страничных блоков к обеим сторонам одного листа (например, при двусторонней печати);
    • переход от N (небольших) страничных блоков к одному листу (так называемое «n-арное склеивание»);
    • переход от одного (большого) страничного блока к N x M листам (так называемое «мозаичное представление»);
    • создание брошюры. Брошюра — это группа страниц, напечатанных на одном листе, который, будучи разрезанным и сложенным в виде книги, представит их в должной последовательности;
    • печать одного документа, ориентированная на несколько исходящих лотков;
    • печать в файл.

    Хотя язык CSS2 не предоставляет агентам пользователей никаких рекомендаций относительно перехода от страничных блоков к листам, он, тем не менее, содержит определенные конструкции, доставляющие им информацию о размере и ориентации листа, на котором осуществляется вывод.

    13.2 Страничные блоки: правило @page

    — это прямоугольная область, состоящая из следующих двух частей:

    • , содержащей отображаемые на странице блоки. Края области страницы выступают в качестве начального контейнера, в котором осуществляется вывод, ограничиваемый разделителями страниц;
    • области полей, окружающей область страницы.

    Примечание. В CSS2 свойства границ и свойства отступов не применяются к страницам; возможно, в будущем они будут применяться.

    Определение размеров, ориентации, полей и других параметров страничного блока разработчики осуществляют в рамках правила @page . Оно состоит из ключевого слова «@page», селектора страниц (за которым без промежуточного пробела может следовать псевдокласс страницы) и блока объявлений (о которых говорят, что они сделаны в ).

    указывает страницы, к которым применяются объявления. В CSS2 селекторы страниц могут обозначать первую страницу, все левые страницы, все правые страницы или страницы с определенными именами.

    Размеры страничного блока указываются с помощью свойства ‘size’ . Размеры области страницы определяются размерами страничного блока за вычетом размеров области полей.

    Например, следующее правило @page устанавливает размеры страничного блока равными 8.5 x 11 дюймам и создает поле размером 2 см со всех сторон между краем страничного блока и областью страницы:

    13.2.1 Поля страницы

    Свойства полей ( ‘margin-top’ , ‘margin-right’ , ‘margin-bottom’ , ‘margin-left’ и ‘margin’ ) используются в контексте описания страницы. На следующем рисунке продемонстрировано взаимное расположение листов, страничных блоков и полей страницы:

    Вычисленное значение ширины полей страницы в верхней и нижней частях страницы равно ‘0’.

    В контексте описания страницы шрифты не различаются, поэтому не допускается использование единиц измерения ’em’ и ‘ex’. Процентные соотношения, используемые в качестве значений свойств полей, задаются относительно размеров страничного блока; ширина левого и правого полей определяется относительно ширины страничного блока, а высота верхнего и нижнего полей определяется относительно высоты страничного блока. Допускается использование других единиц измерения, связанных с соответствующими свойствами CSS2.

    Иногда из-за отрицательных значений ширины полей (как страничного блока, так и элемента) или абсолютного позиционирования может случиться, что содержимое выйдет за пределы страничного блока. Но при этом оно может быть «отсечено» агентом пользователя, принтером или, в конце концов, просто каким-нибудь режущим инструментом.

    13.2.2 Размер страницы: свойство ‘size’

    ‘size’

    Значение: <1,2>| auto | portrait | landscape | наследуемое
    Начальное значение: auto
    Область применения: содержанию страницы
    Наследование: N/A
    Процентное задание: N/A
    Устройства: визуального форматирования, устройства с постраничной разбивкой

    Данное свойство определяет размер и ориентацию страничного блока.

    Размер страничного блока может быть «абсолютным» (фиксированный размер) или «относительным» (варьирующим в зависимости от размеров листа). Использование относительных размеров страничных блоков позволяет пользовательским агентам изменять и наиболее оптимально использовать размеры документа.


    Три значения свойства ‘size’ позволяют создавать страничный блок относительных размеров:

    auto Страничному блоку присваиваются размер и ориентация листа, на котором будет осуществляться вывод. landscape Ориентация листа, на котором будет осуществляться вывод, переназначается. Размеры страничного блока и листа, на котором будет осуществляться вывод, совпадают, а наиболее длинная сторона блока располагается горизонтально. portrait Ориентация листа, на котором будет осуществляться вывод, переназначается. Размеры страничного блока и листа, на котором будет осуществляться вывод, совпадают, а наиболее короткая сторона блока располагается горизонтально.

    В следующем примере осуществляется выравнивание внешних краевых линий страничного блока и листа, на котором будет осуществляться вывод. Процентное соотношение, выступающее в качестве значения свойства ‘margin’ , задается относительно размеров листа, на котором будет осуществляться вывод. Если последний имеет размеры 21.0 см x 29.7 см (т.е. является листом формата A4), то размер полей будет равен 2.10 см и 2.97 см.

    Значения длины, принимаемые свойством ‘size’ , позволяют создавать страничный блок абсолютных размеров. Если свойство принимает только одно значение, то оно используется в качестве ширины и высоты страничного блока (т.е. блок получается в форме квадрата). Т.к. страничный блок является начальным контейнером, то в качестве значений свойства ‘size’ не допускается использование процентных соотношений.

    В этом примере ширина страничного блока устанавливается равной 8.5 дюймам, а высота — равной 11 дюймам. Исходя из этих значений, размеры листа, на котором будет осуществляться вывод, должны быть не менее 8.5″x11″.

    Агенты пользователей могут позволить пользователям управлять процессом перехода от страничного блока к листу (например, вращением печатаемого страничного блока абсолютного размера).

    Отображение страничных блоков, не вмещающихся на листе

    Если страничный блок не помещается на листе, на котором будет осуществляться его вывод, то агент пользователя может выполнить одно из следующих действий:

    • повернуть страничный блок на 90╟, если в результате этого страничный блок поместится на листе;
    • изменить масштаб страницы, чтобы уместить ее на листе.

    Перед выполнением этих процедур агент пользователя должен выдать запрос пользователю.

    Позиционирование страничного блока на листе

    Если размеры страничного блока не превышают размеров листа, на котором будет осуществляться его вывод, то агент пользователя вправе разместить его на листе в произвольном месте. Тем не менее, рекомендуется размещать страничный блок в центре листа, т.к. это позволит осуществить выравнивание двусторонних страниц и избежать случайной потери информации, печатаемой на краю листа.

    13.2.3 Метки обрезки: свойство ‘marks’

    ‘marks’

    Значение: [ crop || cross ] | none | наследуемое
    Начальное значение: none
    Область применения: контекст описания страницы
    Наследование: N/A
    Процентное задание: N/A
    Устройства: визуального форматирования, с постраничной разбивкой

    При высоком качестве печати метки зачастую помещаются за пределами страничного блока. Названное свойство определяет, какие метки будут добавлены непосредственно за краевой линией страничного блока: либо метки обрезки, либо метки выравнивания, либо и те, и другие.

    обозначают места обрезки листа. (также называемые метками записи или регистрационными метками) используются для выравнивания листов.

    Метки видны только в страничных блоках абсолютных размеров (см. свойство ‘size’ ). Страничные блоки, имеющие относительные размеры, выравниваются относительно листа, на котором будет осуществляться их вывод, а метки при этом помещаются за пределами области печати.

    Размер, стиль и положение меток выравнивания полностью определяются агентом пользователя.

    13.2.4 Левые, правые и первые страницы

    При печати двусторонних документов страничные блоки, находящиеся на правой и левой страницах, должны отличаться друг от друга. Это может быть обозначено посредством двух псевдоклассов CSS, которые могут быть определены в контексте описания страницы.

    Все страницы автоматически подразделяются агентом пользователя на два псевдокласса :left и :right .

    Если для левой и правой страниц были заданы различные объявления, то агент пользователя не должен их игнорировать, даже если он не перемещает страничные блоки отдельно на левый и правый листы (например, в случае принтеров с односторонней печатью).

    Разработчики могут также задавать стиль первой страницы документа с помощью псевдокласса :first :

    Определение того, будет ли первая страница принадлежать классу :left или :right зависит от направления ввода текста, принятого в документе в качестве основного, и находится за пределами рассмотрения данного документа. Тем не менее, у разработчиков существует возможность принудительного назначения первой страницы классу :left или :right посредством вставки разрыва страницы перед первым сгенерированным блоком (например, это можно сделать для элемента BODY языка HTML).

    Свойства, определенные в правиле :left (или :right) @page, переназначают те свойства, которые определяются в правиле @page, не имеющем псевдокласса. Свойства, определенные в правиле :first @page, переназначают свойства, которые определяются в правилах :left (или :right) @page.

    Примечание. Добавление описаний к псевдоклассам :left и :right не влияет на то, будет ли документ печататься с двух или с одной стороны (последний вопрос находится за рамками рассмотрения данной спецификации).

    Примечание. Возможно, в будущих версиях спецификации языка CSS появятся другие псевдоклассы страниц.

    13.2.5 Содержимое за пределами страничного блока

    При форматировании содержимого, осуществляемом в рамках модели страницы, некоторая часть содержимого может оказаться за пределами страничного блока. Например, элемент, свойству ‘white-space’ которого было присвоено значение ‘pre’, может породить блок, превосходящий по размерам страничный блок. Наряду с этим может случиться, что при абсолютном позиционировании блоков некоторые из них примут «не очень подходящее» местоположение. Например, графические объекты могут оказаться на краю страничного блока или на 100000 дюймов ниже него.

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

    • содержимое желательно позиционировать на некотором расстоянии от страничного блока, чтобы существовала возможность обрезки страниц впритык к полям;
    • пользовательским агентам следует избегать генерации большого числа пустых страничных блоков, уделяя больше внимания позиционированию элементов (например, Вы не хотите печатать 100 пустых страниц). Обратите внимание, что генерация небольшого числа пустых страничных блоков необходима для обработки значений ‘left’ и ‘right’ свойств ‘page-break-before’ и ‘page-break-after’ ;
    • не следует размещать элементы в несоответствующих местах во избежание их представления в документе. Вместо этого следует:
      • полностью прекратить генерацию блока, присвоив свойству ‘display’ значение ‘none’;
      • сделать блок невидимым, используя свойство ‘visibility’ .
    • агенты пользователей могут по-разному обрабатывать блоки, расположенные за пределами страничного блока, в частности, не обрабатывать их или создавать для них страничные блоки в конце документа.

    В следующих разделах описана модель форматирования страницы, используемая в CSS2. Для указания агенту пользователя места, где он может или должен осуществить разрыв страницы, и страницы (левой или правой), на которой он должен продолжить вывод содержимого, используется пять различных свойств. Каждый разрыв страницы прерывает отображение содержимого в текущем страничном блоке и инициирует вывод оставшейся части дерева документа в новом страничном блоке.


    13.3.1 Разрывы до и после элементов: ‘page-break-before’ , ‘page-break-after’ , ‘page-break-inside’

    ‘page-break-before’

    Значение: auto | always | avo >наследуемое
    Начальное значение: auto
    Область применения: элементы структурного уровня
    Наследование: нет
    Процентное задание: N/A
    Устройства: визуального форматирования, с постраничной разбивкой

    ‘page-break-after’

    Значение: auto | always | avo >наследуемое
    Начальное значение: auto
    Область применения: элементы структурного уровня
    Наследование: нет
    Процентное задание: N/A
    Устройства: визуального форматирования, с постраничной разбивкой

    ‘page-break-inside’

    Значение: avo >наследуемое
    Начальное значение: auto
    Область применения: элементы структурного уровня
    Наследование: да
    Процентное задание: N/A
    Устройства: визуального форматирования, с постраничной разбивкой

    Значения данных свойств имеют следующий смысл:

    auto Не инициирует и не запрещает разрыва страницы до (после или внутри) генерируемого блока. always Всегда инициирует разрыв страницы до (после) генерируемого блока. avoid Отменяет разрыв страницы до (после или внутри) генерируемого блока. left Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как левая страница. right Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как правая страница.

    ‘page’

    Значение: | auto
    Начальное значение: auto
    Область применения: элементы структурного уровня
    Наследование: да
    Процентное задание: N/A
    Устройства: визуального форматирования, с постраничной разбивкой

    Свойство ‘page’ может использоваться для определения конкретного типа страницы, на которой будет отображен элемент.

    В этом примере все таблицы будут помещены по правую сторону страницы (называемой «rotated»), имеющей альбомную ориентацию:

    Действие свойства ‘page’ осуществляется следующим образом: если значение свойства ‘page’ страничного блока, содержимое которого принадлежит строковому уровню, отличается от значения аналогичного свойства предшествующего страничного блока, содержимое которого также принадлежит строковому уровню, то между ними вставляется один или два разрыва страницы, после которых вывод производится в именованном страничном блоке. См. ниже раздел о принудительных разрывах страниц.

    В следующем примере две таблицы отображаются на страницах с альбомной ориентацией (естественно, на одной и той же странице, если они обе умещаются на ней), тип страницы «narrow» не используется вообще, несмотря на то, что он установлен для элемента DIV.

    используются в документе

    13.3.3 Разрывы страниц внутри элементов: ‘orphans’ , ‘widows’

    ‘orphans’

    Значение: | наследуемое
    Начальное значение: 2
    Область применения: элементы структурного уровня
    Наследование: да
    Процентное задание: N/A
    Устройства: визуального форматирования, с постраничной разбивкой

    ‘widows’

    Значение: | наследуемое
    Начальное значение: 2
    Область применения: элементы структурного уровня
    Наследование: да
    Процентное задание: N/A
    Устройства: визуального форматирования, с постраничной разбивкой

    Свойство ‘orphans’ определяет минимальное количество строк абзаца, которые должны быть оставлены в нижней части страницы. Свойство ‘widows’ определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы. Примеры использования данных свойств для управления разрывами страниц приводятся ниже.

    Подробную информацию о форматировании абзацев можно получить в разделе о линейных блоках.

    13.3.4 Допустимые разрывы страниц

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

    1. В пространстве, отведенном для вертикальных полей между структурными блоками. Если разрыв страницы осуществляется в этом месте, то вычисляемые значения соответствующих свойств ‘margin-top’ и ‘margin-bottom’ устанавливаются равными ‘0’.
    2. Между линейными блоками внутри блока структурного уровня.

    Если приведенные выше правила не позволяют вставить достаточное количество разрывов, то во избежание выхода содержимого за пределы страничного блока правила Б и Г не учитываются, что позволяет создать дополнительные разрывы.

    Если и после этого не удается достигнуть достаточного количества разрывов, то для поиска дополнительных точек разрыва не учитываются правила А и В.

    Разрывы страницы не могут осуществляться в абсолютно позиционируемых блоках.

    13.3.5 Принудительные разрывы страниц

    Разрыв страницы должен осуществляться (1), если хотя бы одно из всех свойств ‘page-break-after’ и ‘page-break-before’ элементов, порождающих блоки, встречающиеся в месте разрыва, принимает значение ‘always’, ‘left’ или ‘right’.

    Разрыв страницы также должен осуществляться (1), если значения свойства ‘page’ линейных блоков, находящихся непосредственно до и после разрыва, различны.

    13.3.6 «Наилучшие» разрывы страниц

    Язык CSS2 не определяет, какой именно разрыв страницы из множества допустимых разрывов должен использоваться; CSS2 не запрещает агентам пользователей вставлять разрывы страниц в любом месте или вообще не использовать их. Но в спецификации CSS2 настоятельно рекомендуется, чтобы агенты пользователей соблюдали следующие эвристические правила (до тех пор, пока не окажется, что они иногда противоречат друг другу):

    • разрыв страниц должен производиться как можно реже;
    • все страницы, которые не заканчиваются принудительным разрывом, должны быть примерно одинаковой высоты;
    • не должно быть разрывов внутри блока, у которого есть граница;
    • не должно быть разрывов внутри таблицы;
    • не должно быть разрывов внутри перемещаемого объекта.

    Предположим, что таблица стилей содержит свойства ‘orphans: 4’ и ‘widows: 2’, а в нижней части текущей страницы доступно 20 строк (линейных блоков):

    • если последний абзац текущей страницы содержит не более 20 строк, то он должен остаться на текущей странице;
    • если абзац содержит 21 или 22 строки, а вторая часть абзаца не должна нарушать ограничения, устанавливаемого свойством ‘widows’ , то в силу этого его вторая часть должна состоять из двух строк;
    • если в абзаце более 23 строк, то первая его часть должна состоять из 20 строк, а вторая часть должна включать все остальные строки.

    Теперь предположим, что значение свойства ‘orphans’ равно ’10’, значение свойства ‘widows’ равно ’20’, а в нижней части текущей страницы доступно 8 строк:

    • если абзац в конце текущей страницы содержит не более 8 строк, то он должен остаться на текущей странице;
    • если абзац содержит более 9 строк, то его нельзя делить (т.к. при этом будет нарушено ограничение, устанавливаемое свойством ‘orphans’). Поэтому его следует переместить на следующую страницу в виде блока.


    13.4 Каскад в контексте описания страницы

    Объявления, осуществляемые в контексте описания страницы подчиняются правилам каскада как обычные объявления CSS2.

    Рассмотрим следующий пример:

    За счет высокой специфичности селектора псевдоклассов ширина левого поля левых страниц будет равна 4 см, а на всех остальных страницах (т.е. на правых страницах) поля будут равны 3 см.

    CSS page-break-before Property

    CSS page-break-before property adjusts page breaks before the current element.

    Usages

    The following table outline the usages and version history of this property.

    Default value: auto
    Applies to: Block-level elements
    Inherited: No
    Version: CSS2
    JavaScript Syntax: object.style.pageBreakBefore = «avoid»

    Syntax

    Here is a syntax for the CSS page-break-before property

    Property Values

    The following table describes the values of this property.

    Value Description
    auto Default. Automatic page-break
    always page-break insert before the element
    avoid If possible avoid page-break before the element
    left page-break insert before the element so that next page is formatted as a left page
    right page-break insert before the element so that next page is formatted as a right page
    initial Sets default value of this property
    inherit Inherits this property from its parent element

    Examples

    The example below shows to sets page-break-before property.

    Browser Compatibility

    • Google Chrome 1+
    • Mozilla Firefox 1+
    • Internet Explorer 4+
    • Opera 7+
    • Safari 1.2+

    Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

    CSS page-break-before Property

    The page-break-before property in CSS is used to add a page-break-before the specified element.

    This property helps to define how a document should behave when it is printed. Similarly page-break-before, page-break-after and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be when printed.

    Note: The page-break-before property cannot be used on absolutely positioned elements or an empty element.

    Syntax:

    Values:

      auto : Refers to automatic page-break.

    Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Печать : page-break-before

    Материал из WebWikiABCD

    Содержание

    Атрибут page-break-before | Свойство pageBreakBefore

    Задает должен ли быть перед печатью определенного объекта произведен разрыв страницы.

    Синтаксис

    HTML
    Скрипты [ sBreak = ] object.style.pageBreakBefore

    Используемые значения

    sBreak Строковое значение, которое может определять и принимать одно из следующих значений:

    always Всегда всталяет разрыв страницы перед объектом. auto Значение по умолчанию. Не задает, но и не запрещает разрыв страницы перед объектом. avoid Запрещает разрыв страницы перед объектом, если это возможно. empty string Тоже самое, что и auto. inherit Наследует значение этого свойства от родительского объекта. left Почти тоже самое, что и auto, но задает разрыв страницы так, чтобы последующий текст располагался на левой стороне разворота. right Почти тоже самое, что и auto, но задает разрыв страницы так, чтобы последующий текст располагался на правой стороне разворота.

    Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

    Замечания

    Это свойство применяется только при печати документа.

    Свойство pageBreakBefore не применяется к элементам BR и HR.

    Если происходит конфликт между значениями свойств pageBreakBefore и pageBreakAfter следующего элемента, то применяется то свойство, результат действия которого затронет большее число страниц.

    Разрывы страниц не поддерживаются внутри позиционированных объектов.

    Примеры

    В следующих примерах используются атрибут page-break-before и свойство pageBreakBefore для задания печати документа с новой страницы перед определенным объектом.

    В первом примере используется элемент H3. Таким образом, каждая глава документа с таким заголовком будет печататься на новой странице.

    В втором примере есть абзац с идентификатором oPrgrph и кнопка. Если пользователь выведет страницу на печать или на предварительный просмотр, то перед абзацем с этим идентификатором будет разрыв строки, но только если пользователь не нажмет на кнопку.

    Илон Маск рекомендует:  Значки для листания фотографий
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL