Tag orphans

📄 CSS orphans: Keeping Paragraphs Intact Across Page or Column Breaks

When dealing with printed documents or multi-column layouts in web design, content can sometimes break awkwardly between pages or columns. The orphans property helps you control how many lines of a paragraph must be left at the bottom of a page or column to avoid these visually jarring breaks.

🧾 What is orphans?

The CSS orphans property sets the minimum number of lines in a block container (like a paragraph) that must be left at the bottom of a page or column before a break occurs.

It is especially useful when working with:

  • Print stylesheets
  • Multi-column (column-count) layouts
  • E-books or paginated web content

🧬 Syntax

selector {
  orphans: <integer>;
}

Value:

TypeDescription
<integer>Minimum number of lines to remain before a break
inheritInherits from the parent
initialDefaults to 2
unsetRemoves explicitly set value

📖 Example

p {
  orphans: 3;
}

This rule ensures at least 3 lines of a paragraph are kept at the bottom of a page or column. If fewer than 3 lines can fit, the entire paragraph will move to the next page or column.

👁️ Visual Explanation

Imagine a paragraph split between two pages:

Page 1:
Line 1
Line 2

Page 2:
Line 3
Line 4

With orphans: 3, this break is prevented, and the paragraph would instead be moved entirely or mostly to the next page to keep at least 3 lines together.

🧠 Why It Matters

  • Improves typographic quality
  • Prevents awkward, orphaned lines that look out of place
  • Provides better reading flow, especially in print

💡 Best Practices

  • Use in print media via @media print stylesheets.
  • Combine with the widows property, which controls lines left at the top of the next page or column.
  • Consider using orphans: 3 and widows: 3 together for consistent results.
@media print {
  p {
    orphans: 3;
    widows: 3;
  }
}

✅ Browser Support

Basic support is available in:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge

⚠️ Not supported in Internet Explorer, and support in screen-based media may be limited. Most effective in print or paged media contexts.

🔚 Conclusion

The CSS orphans property is a subtle but powerful tool for professional-level typography. It ensures content looks polished and readable, especially in print documents or multi-column layouts. While not commonly used in screen-based designs, it’s indispensable for designers crafting eBooks, PDFs, or articles for print.