Controlling 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;
}

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;
}

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 "chapter" page:

div.cover {
    page: cover;
}

div.chapter {
    page: chapter;
}

The XML document:

...
<div class="cover"> Welcome to the User Guide... </div>
<div class="chapter"> Here are the details... </div>
<div class="chapter"> Here are some more details... </div>

In this example, there will be a forced page break between the first <div> (associated to the "cover" page) and the second because of the page change.

@page content:first{
  background-color: yellow;
}

div.chapter {
  page: chapter;
  -oxy-page-group:start;
}

There are cases where a page break is placed between paragraph lines. Typically, for aesthetic purposes, the first paragraph should have more than one line. Another constraint might be the number of lines that are moved to the next page and again, it should avoid leaving a single line. CSS defines two properties for this type of control:

p {
  orphans: 4;
  widows: 2;
}