It paginates wrong
Single lines are left stranded at the top or bottom of a page
A paragraph breaks so that one line sits alone at the bottom of a page, or the last line of a paragraph appears by itself at the top of the next one.
What is actually happening
The orphans and widows properties default to a value of 2 in most engines, which is low enough that a single stranded line is still legal in a lot of cases, particularly with short paragraphs. They also only work on block containers with normal flow; they do nothing inside a flex or grid item.
Confirming it is this and not something that looks like it
Raise both to an obviously large number, 5, and rebuild. If the layout changes dramatically, the properties are working and the value was simply too low.
The fix
Set orphans and widows to 3 on body copy. This is a small change with a large effect on how professional a long document looks, and it costs nothing.
.document p,
.document li,
.document dd {
orphans: 3;
widows: 3;
}
/* Short blocks that should simply never split. */
.document blockquote,
.document .callout {
break-inside: avoid;
}If that was not it
These produce the same symptom often enough to be worth ruling out before assuming the fix above did not work.
- Paragraphs inside flex or grid items, where the properties do not apply
- A paragraph shorter than the orphan count, which cannot satisfy the rule and is ignored
- Very tight line-height, which makes stranded lines more likely by fitting more per page
- The properties set on a container rather than on the block that holds the text
Frequently asked
Does this happen with every rendering engine?
The behaviour behind it is not specific to one tool. The orphans and widows properties default to a value of 2 in most engines, which is low enough that a single stranded line is still legal in a lot of cases, particularly with short paragraphs. Anything rendering HTML to a paged medium has to make the same decision, so the fix travels with you if you change how the render happens.
Will this show up as an error in my logs?
No, and that is what makes it expensive. A document that renders wrong is still a successful render as far as every log line is concerned. It is found by someone opening the file, which is usually the customer.
Related failures
Problems people arrive at from the same starting point, or mistake for this one.
Page breaks land in the wrong place
Nothing told the layout where it is allowed to break, so it breaks wherever the content runs out of page.
Table headers do not repeat on the next page
Header repetition is driven by table sectioning, not by styling.
There is an extra blank page at the end
Something extends a fraction of a millimetre past the end of the last page.
Content is cut off at the right edge of the page
The element is wider than the page's content box and has nothing telling it to wrap.
Page numbers are missing or all show 1
Page numbers come from the footer template's special classes, not from CSS counters in the document body.
CSS for paged documents, and what actually works
Which parts of the paged media specification a browser-based render implements.
Everything that goes wrong, by category
The full list, grouped by where in the pipeline it breaks.
Paste your markup and see the rendered document, without signing up.