Controlling Page Breaks

If you want to start a new page with each chapter title, or if you want to avoid breaking a table onto two pages or avoid a break after a section title, you can use CSS properties to control the breaks.

CSS offers the following properties to control the page breaking process:
  • page-break-before
  • page-break-after
  • page-break-inside

Forcing Page Breaks

To always move the content to the beginning of the page (for example, before the title of a section), you can use: 

section h1 {
    page-break-before: always;
}

Or if you only want a specific element to appear on a single page:

div.notice {
    page-break-before: always;
    page-break-after: always;
}

Avoiding Page Breaks

Sometimes page breaks should be avoided. For instance, to avoid breaking between a title and the subsequent content: 

h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
}

Or if you want to avoid breaks inside tables and lists:

table, ol, ul {
    page-break-inside: avoid;
}

Implicit Page Breaks

A page break will be created each time there is a change in the page property associated to the elements in a sequence. Suppose that you have a sequence of div elements, one of them associated with a "cover" page, and others with a "content" page:

div.cover {
    page: cover;
}

div.content {
    page: content;
}

The XML document:

...
<div class="cover"> Welcome to the User Guide... </div>
<div class="content"> Here are the details... </div>
<div class="content"> Here are some more details... </div>
In this example, there will be a forced page break between the first div and the second because of the page change.
Note: Oxygen PDF Chemistry also breaks the page between the two div elements with class "content". Although this ignores the CSS specification, it makes easier to implement page breaks for a technical book. You could have a "chapter" page associated to a sequence of elements. There will be no need for additional page-break-before properties.

Breaks Between Lines: Widows and Orphans

There are cases where the page break is placed between paragraph lines. For aesthetic purposes, it is required that at least several lines remain in the first (for example, the paragraph is not left with just a single line). Another constraint might be the number of lines that are moved to the next page. Again, it should avoid leaving just a single line. CSS defines two properties for this type of control:

  1. The orphans property specifies the minimum number of line boxes that should be left in a paragraph before the page break occurs.
  2. The widows property specifies the minimum number of line boxes of a block container that must be left in a paragraph created on the next page after a break.
The following example shows how to keep the paragraphs at least four lines on the page before the break, and two lines on the page following the break:
p {
  orphans: 4;
  widows: 2;
}