What are the orphans and widows in css?

Question

I have never seen before like the following (seen in bootstrap template):

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

So, what are the orphans and widows for?

Answer 1

In typography, a “widow” is the last line of a paragraph that appears at the start of a new page, and an “orphan” is the first line of a paragraph that appears at the end of a page. So both are single lines that have been isolated from the rest of the paragraph by a page break. They are regarded as avoidable, though opinions disagree on how serious the problems are.

The CSS concepts are generalizations of the typographic concepts, replacing “the last line” by “the last few lines” and “the first line” by “the first few lines”. These generalizations are not particularly useful; there is generally nothing wrong with having two (or three or...) lines of a paragraph on a page other than the rest of the paragraph.

The definitions of the CSS properties are somewhat unnatural, since e.g. orphans: 4 does not mean four orphans anywhere. Instead, it says that less than 4 lines of a paragraph at the end of a page be considered an orphan and be avoided. It is rather difficult to find use for such a setting.

The initial value of both properties is 2, which thus means that the single line orphans and widows (i.e., orphans and widows in the typographic sense) are to be avoided.

So why would you set those properties? Normally only as orphans: 1 or widows: 1 or both, to specify that typographic orphans or widows need not be avoided. It’s difficult to find use cases even for these.

The example in the question thus means that a page break may not appear inside a p, h2, or h3 element, unless at least 3 lines of it appear on each page. So a 5-line paragraph may not be broken across two pages at all, and 6-line paragraph may only be broken as 3 and 3 lines. This sounds pointlessly excessive. For headings, it should cause no harm, since a heading normally fits on one line – but the setting is pointless for headings, since even the defaults prevent a 2- or 3-line heading from being broken (and a heading longer than 3 lines is really anomalous).

Answer 2

Quoting from moz.com

orphans: <integer>
widows: <integer>

These two properties are used primarily in paged media to control line breaks by specifying the number of lines in a paragraph that should be left at the top (widows) or bottom (orphans) of a page.