CSS widows and orphans: keep short print paragraphs together

When to use it

An incident report is exported to paper for a review meeting. A paragraph with seven lines would read poorly if one line landed alone at a page boundary, so the print stylesheet requests two lines on each side of a break. A nearby heading has a separate break-after rule so it is not stranded from its first paragraph. Test actual printer previews with the final font, page margins, and long localized paragraphs. A browser may move more text than expected, and some print engines handle fragmentation differently. If the report contains tables, figures, or a page-sized block, widows and orphans will not solve those layout constraints. Keep a plain readable result if the hint is ignored. Do not force every paragraph to break-inside: avoid; that can create large blank spaces and may still fail when a paragraph is taller than a page. For a short receipt, the output may be simpler if the content is restructured rather than layering many print rules onto it.

@media print { .incident-report p { orphans: 2; widows: 2; } .incident-report h2 { break-after: avoid; } .incident-report { color: #000; background: #fff; } }

Cost and verification

These declarations do not add runtime network or script cost. Their practical cost is page-layout QA across print engines and content lengths. A different font metric can shift line breaks and invalidate a preview taken before assets load. Wait for fonts in a print test, then inspect page boundaries rather than only the first page. Use modest minimums: demanding four or five lines around every break may create excessive whitespace. The browser may not honor the hint in every fragmentation situation, so the text must remain coherent without it. This rule affects print and other fragmented contexts, not the ordinary scrolling page.

Common Mistakes

• Do not confuse widows and orphans with break-inside: avoid.
• Do not expect them to keep a whole section on one page.
• Do not approve print layout after checking only the first page.

Connected lessons

• CSS Property Decisions
• CSS print styles: preserve the record and remove screen-only controls
• CSS @page: set a print sheet contract without hiding overflow
• CSS break-inside: keep small report units together in print
• HTML print stylesheet: declare a separate rendering context