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

Widows and orphans are old printing terms used to specify the minimum amount of lines of text that should appear at the top and bottom of a printed page, respectively. The CSS2 properties accomplish the same thing, ensuring that a minimum amount of text appears at the top and bottom of each page.

Both the widows and orphans properties share the same values: an integer value that assigns the number of lines that must appear in a paragraph before it is forced to move to another page (one way or the other), and the named value inherit, which takes on whatever parent value may have already been set. The default numeric value for both widows and orphans is 2, ensuring that at least two lines of text in a paragraph are either at the top or bottom of a page before a page break will occur. These properties are designed only to be used with block-level elements, such as <p> or <div>.

Reference:- safaribooksonline.com

Answer 3

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.