Photograph of a Victorian boy holding out an empty food bowl

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:

Example of a printed widow

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:

Printed pages with solved widows

“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:

An example of orphaned text

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:

An example of solved orphaned text

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:

Orphaned text in columns

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:

Orphaned text solved in columns

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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.