Fix widows with non‑breaking spaces
navigateleft January 10, 2014
After learning the ins and outs of typography in design school, I started seeing the world through new eyes. Unfortunately, these eyes focus on the imperfections, like a single word on its own line, known as a “widow”. These imperfections are everywhere on the web because type isn’t laid out as carefully as it is in print.
While CSS does have a widows property, it’s for handling widow lines in column layouts—not words. Because of this, we need to rely on a hack—placing a non-breaking space between the last two words. In the past, I used the entity, but stopped because of how much it clutters the code. Now, I use an actual non-breaking space character, which can be created with option+space. This works as long as you have <meta charset='UTF-8'> in the <head> block.
I like this approach because it’s clean and easy. The non-breaking space looks like any other space and when used in titles, it even prevents widows in the UI of Siteleaf.
Note
I’m well-aware of the more automated ways of handling widows, like using the String.replace method in Javascript with a regular expression, but I try to refrain from using JS when there are HTML or CSS‑based alternatives. Also, manually inserting a non-breaking space allows me to pick and choose where to prevent widows, in cases where a title widow is long enough to live on its own line.