The page break properties allow us to describe page breaks with the CSS.

There are five properties that may be used to define the following page break or breaks. Each of the page breaks stops the layout of the current page box and makes the remaining pieces to be laid out in a new box.

Page break properties

The main three properties used as page break properties are page-break-before, page-break-after and page-break-inside.

The page-break-before and page-break-after properties contain following information:

  1. value: auto, always, avoid, left, right or inherit;
  2. initial: auto;
  3. applies to: block level elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual, paged;
  7. computed value: as specified.

The page-break-inside property contains following information:

  1. value: avoid, auto or inherit;
  2. initial: auto;
  3. applies to: block level elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual, paged;
  7. computed value: as specified.

The auto value does not force or forbid a page break, it's neutral. Values always and avoid are used to force a page-break or avoid a page-break in respective order. Other two values, left and right will force a page-break after the page box and make the next page starts as a left page, or a right page depending on the value chosen.

When a page-break splits a page, the margin, borders and padding properties have no influence where the split occurs.

Breaks inside elements

Other two page-break properties are used to create breaks inside the elements. These are orphans and widows properties.

The orphans and widows properties contain following information:

  1. value: <integer> or inherit;
  2. initial: 2;
  3. applies to: block container elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual, paged;
  7. computed value: as specified.

The orphans property specifies the minimum number of lines in a container that must be left at the bottom of the page while the widows property specifies the same but at the top of the page.

Breaking pages in a normal flow can occur in the following places:

  • in the vertical margin between block level boxes;
  • between line boxes inside a block container box;
  • between the content edge of a block container box and the outer edges of its child content.

The following rules define when the breaks are allowed:

  • breaking is allowed if the page-break-before and page-break-after properties of all elements boxes that meet at this margin allow it, which will happened if at least one of them has the value always, left or right or when all of them are auto;
  • if all the elements are auto and a common ancestor has a page-break-inside value of void, the breaking is not allowed;
  • breaking is allowed if the number of line boxes between the break and the start of the enclosing block box is the value of orphans or more, and the number of line boxes between the break and the end of the box is the value of widows or more;
  • breaking is allowed only if the page-break-inside property of the element and all its ancestors is auto.

There are some basic recommendations regarding how or when to use the breaks:

  • break as few times as possible;
  • make all the pages that do not end with a forced break appear as they are of approximate same height;
  • avoid breaking inside a replaced element.

Example

Example with CSS page breaks:

 

›› go to examples ››