Typographic Orphans on the Web

Three Ways to Eliminate Them

Note: The word “orphan” and “widow” often get used interchangeably. For this article, “orphan” will be used but one can refer to them however they like.

TL;DR

Use the NYT text-balancer where appropriate

Screen capture from The Orphan

What’s an orphan?

…A word, part of a word, or very short line that appears by itself at the end of a paragraph. Mnemonically still “alone at the bottom”, just this time at the bottom of a paragraph. Orphans of this type give the impression of too much white space between paragraphs.*

To put it more succinctly, a typographic orphan refers to the last word(s) in a block of text, which occupies its own line. Here’s an example of one found in my Medium feed:

“Development” is considered an orphan

Subjectively, orphans are considered bad design. Fixing them in static mediums, like print, is a simple task but correcting them on a dynamic canvas, like the internet, is a bit more tricky.

Why Do Client’s Hate Orphans?

The main reason that the typical client dislikes these typographic terrors are they tend to be more familiar with static mediums like print. In this world, there’s no excuse for letting a word dangle at the end of a heading or paragraph. Unfortunately, the internet terrain is quite different. Websites need to be agnostic of the device they’re presented on. The same site will be viewed on massive monitors, tablets, and mobile devices. Simply adding a manual line-break is likely to create more problems than it solves.

Your designer is also not doing you any favors for the same reason. Graphic designers are designing on a static medium; they have full control over all line-breaks and lorem ipsum. In order to appease the client, who has been trained to identify orphans, most designers will ensure that they do not exist in their design. This compounds the problem. Now the client’s expectations for an orphan-less site have been reinforced.

The final nail in the coffin is that some of your client’s favorite webpages are actually handling this problem correctly! Take a look at the headlines on https://www.nytimes.com/.

Familiarity with static mediums, typography unnaturally massaged by designers, and the existence of sites without orphans on the web all contribute to the client’s desire to rid them. Frustration may be the knee-jerk reaction to a request like but there’s hope in the form of some simple solutions!

The Solve(s)

For performance reasons, the following solutions should probably not be applied site-wide. Instead, focus your efforts on headlines, subtitles, heroes, etc..

The Ugly

The above is just an acknowledgment that adding a non-breaking space between the last two words sorta solves the problem. A caveat: the above script will fail if the last words contain HTML, like a link.

The Bad

Adobe has a very popular plugin called balance-text. Simply include their script and call balanceText(). By default, this will look for all tags that have the class .balance-text. Check out the documentation for some more implementation details. Here’s how it works:

1. Add 1 word at a time to the current line until the next word won’t fit.
2. Break text so that the next word starts on a new line.
3. Repeat until all text has been rendered.

You’ll find this plugin works remarkably well at “balancing” text and thus removing orphans.

Here’s an example of the HTML output:

The Good

The New York Times has a very similar plugin to Adobe’s balance-text. Perhaps, not coincidentally, it’s called text-balancer. The result is pretty much identical to the Adobe plugin but the script itself is a few Kb smaller and it can be imported as an es6 module. In my mind, this gives the NYT plugin the edge.

Here’s an example of how to use:

text-balancer works a little differently than its Adobe counterpart. It simply sets the max-width!

It does this by setting the max-width of the dom node to the threshold that it would spill onto another line.**

Again, please check out the documentation for a more thorough understanding of how to use it.

Finally

Check out this codepen to play around with the NYT and Adobe solutions listed above.

References

https://en.wikipedia.org/wiki/Widows_and_orphans*
https://github.com/nytimes/text-balancer**