Short Lines, Bad Breaks, and CSS

Published on:

November 27, 2024

Categories:

Typography⁴, CSSWG⁴, CSS⁶¹

Current music:

Daughter — Dandelion

Current drink:

Peppermint Tea

The Problem

In today’s CSSWG meeting, there was one issue about the new value of text-wrap-style property — avoid-orphans (originally by Simon Owen, in the agenda regarding an addition of it to the spec by Florian Rivoal).

When going through the list of issues in the agenda before the meeting, I saw this issue, and it reminded me of one typographic thing that I had been thinking about for quite a while: the weirdness of the “widows” and “orphans” terms.

I never could remember them, even when people mentioned various mnemonics. And then, whenever in some typographic context people mentioned “eliminate widows”, without that context, it sounded pretty bad.

I was glad that I am not the only one who did not like this term: this year I bought the third edition of Ellen Lupton’s “Thinking with Type”, and was pleasantly surprised when she brought this up in the “Short Lines” chapter (starting from page 128):

In English, short lines are often called widows and orphans. When used as epithets, these terms are sexist and insensitive. Neutral descriptions like “short line” or “bad break” are respectful and easy to understand.

I read the whole book, and can happily recommend it to everyone, by the way.

Beyond the terms being insensitive, there is another problem that I mentioned in the beginning: these terms are just plain confusing. If you go to the Wikipedia page about them, here is what you will find in how it defines these terms:

Widow (sometimes called orphan)

A paragraph-ending line that falls at the beginning of the following page or column, thus separated from the rest of the text. Mnemonically, a widow is “alone at the top” (of the family tree but, in this case, of the page).

Orphan (sometimes called widow)

A paragraph-opening line that appears by itself at the bottom of a page or column, thus separated from the rest of the text. Mnemonically, an orphan is “alone at the bottom” (of the family tree but, in this case, of the page).

Runt (sometimes called widow or orphan)

A word, part of a word, or a 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.

Just look at these parentheses! No wonder, I was confused for so long: likely, I looked at different sources inconsistently calling the same thing different names.

Even more: if we look at the definitions of “widows” and “orphans” in this Wikipedia article, we’ll see that the proposed avoid-orphans is about neither! It is about the third case, which in this article is called “runts”. And, which, unsurprisingly, also can be used as a derogatory term (see third definition). This was also the first time I heard this term in a typographic context, so I just flipped through a few books on typography from my bookshelf and did not find it mentioned there.

Opening Issues

Anyway, stumbling upon this issue today made me remember this grip I had with the terms, so I both commented on the issue, and then later brought all of that up in the discussion.

There was agreement that we should look for a better name, and open a separate issue about this, which I did. Spoiler: my suggested name for this value is avoid-short-lines, but if you have a better name (or just agree) — please, participate there.

In the discussion, it was mentioned that CSS already has two other properties: orphans and widows. Oh wow, I completely forgot that we had these! Likely, because their support is still not there, with Firefox missing, and in browsers that claim to support them, it appears to be uneven. See this test example by Peter-Paul Koch and compare how things render in Safari vs Chrome. There was also an Interop 2023 proposal related to this by Scott Kellum.

After some thought, I decided to open an issue about renaming (and maybe reimagining?) them too: “Rename and/or reimagine widows and orphans”. Given that they’re not interoperable today, we could retire them (well, keep them deprecated by “working” where they do now), and come up with both better names, and perhaps better behavior (if needed).

Final Words

Let me copy the last two paragraphs from that second issue:

This could be a good opportunity to discuss these differences, why they’re there, and if we could come with a consensus which all browsers could agree on, so we could move forward.

Both avoiding short lines, and avoiding single leading or trailing lines in fragments are something I (and many other developers) wanted to have for a while, so it would be great to get closer to it.

Do you have an opinion about this? Were you also confused about these terms? Did you want to use them in your code? Please let me know, or — even better — comment in these issues.