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;
}
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.
orphans set to 1
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:
-
MDN for
break-before,break-after,break-inside,orphansandwidows - W3C CSS specification