Authentic people growing open source code with taste

CSS Tricks: page breaks

When creating paged documents automatically, one of the most common remarks is: "This page break is really ugly, a human would never have done this!" That’s true: humans are still better than computers to define page breaks. But nothing prevents humans from teaching computers how to choose better page breaks!

The easiest way to improve page breaks is to define forced page breaks. For example, you may want a page break before each article title:

article h1 {
  break-before: page;
Two pages with a page break before the article title
Two pages with a page break before the article title

With break-before: page and break-after: page, you can insert forced page breaks before or after selected elements. You can also use left or right instead of page to force the next page to be a left or right page.

But there’s more: you can also define places where you want to avoid page breaks. Let’s say you want to avoid page breaks in paragraphs, or between paragraphs and tables:

p {
  break-inside: avoid;

p + table {
  break-before: avoid;

These rules can be defined on any block-level boxes, and between table rows for example. For lines, other rules exist: orphans and widows define the minimum number of lines required at the beginning or at the end of an element broken between two pages.

A page break in a paragraph without the orphans and widows properties set
A page break in a paragraph with orphans set to 1
A page break in a paragraph with the orphans set at 4 and the widows set at 8
A page break avoided in a paragraph with orphans set to 2

Some rules are already defined for you, for example to avoid page breaks just after titles or before lists. The default value set for orphans and widows is 2, preventing text lines to be alone at the beginning or the end of a page.

Fine-tuning these rules can be long and difficult, particularly for long documents. With some experience, this work will become easier and give results that are closer to what humans would do manually!

Learn more about page breaks: