CSS last-line: Controlling Widows & Orphans

Cet article est également disponible en français

While CSS has many options for controlling the first-line of text, it’s ability to control the last line is limited, although not without some uses:

Remnants & Fragments

“Widows” and “orphans” refer to a word or line of text that is laid out on the page in a way that disturbs reading flow and the “look” of the page: most commonly, words that are left dangling at the end of paragraphs. In paginated media, this is commonly seen as end-of-paragraph words that fall onto the next page:

Browser’s don’t have a concept of “pages” for the screen, but widows can come up when a site is printed, and should be controlled for:

p { widows: 3; }

This translates to “if a paragraph breaks to the next printed page, the remnant must consist of at least three lines.” A browser that supports the property will space elements in such a way as to make that happen:

“Orphans”, on the other hand, occur at the start of text blocks. The most common example is a paragraph that starts at the bottom of a page:

Again, it can be controlled with by setting the orphans property to a reasonable value:

p { orphans: 3; }

Meaning: a paragraph must start with at least three lines on a page before it can be broken; otherwise, the paragraph should start on a new page.

The result:

Suggested Use

Both widows and orphans should have reasonable default values set in site stylesheets:

p { widows: 3; orphans: 3: }

While elements like headings can also have dangling or leading fragments, it’s more common to treat then with page-break controls than widows and orphans.

Widows & Orphans on Screen

By its very nature, responsive design creates innumerable fragments of widowed text. Some of these can be treated by intelligent use of hyphens and justification, but others are simply unavoidable.

Many resources will tell you that widows and orphans properties can only be used in print, but that’s not true: in supportive browsers, the properties can also be applied to newspaper-style web column layouts, which often experience the same problems:

The prefix-free CSS, together with a solution for orphaned text:

div { column-count: 2; column-gap: 2rem; }

p { line-height: 1.6; font-size: 1rem; orphans: 2; }

Result:

I assume that this same ability will be applied to CSS Regions, once the spec is fully supported in browsers.

Single-Line Fits

The most egregious case of text widows occur in headings, where terminating words are often left dangling on a new line. There are solutions for this: FitText is a JQuery plugin that resizes text dynamically as the browser resizes; Chris Coyier’s technique inserts non-breaking spaces, and there are also SVG solutions. My personal preference is to use vw units to fit heading text on a single line, although this often requires some calculation and experimentation; I hope to create a “FitterText” script in the near future that can apply the correct vw measurement once to text elements, with no recalculation-on-viewport-resize required.

Browser Support

Support for widows and orphans is decent: as of this writing, Chrome and IE have good support, with Firefox and Safari lacking any awareness of the properties. As such, they should be considered progressive enhancement for a site: finishing touches that are great to have and well-appreciated, but not critical for page content.