Typographic widows and orphans drive my designer friends nuts.

Somewhere in designer school, I think, the concept that single lines of paragraphs, or single words on lines of text are evil. It’s a thing left over from the world of print. Typesetters from Gutenberg on down simply didn’t allow it.

And that’s fine when you’re working with a printed page where things never move around. You print it. It’s there forever.

The problem is when you try to force the rules of print onto the world of screens. With screens, every time you display text, you’re casting your words into a completely new environment, and you never know what the size of the page will be.

To handle this, browsers wrap text as it comes. When you get to the end of the line, you wrap to the next. From one screen to the next the width of any given text column will be variable, and lines will wrap at different points in the text. If it happens to leave a single word at the end of a paragraph that doesn’t fit on a line, you get a wrap. It might happen one one screen and not on another. You just can’t know until it shows up.

For web developers, it’s just a fact of life. This isn’t a printed page. It doesn’t matter. It makes about as much sense as continuing to insist children learn to read and write in cursive. It’s something people used to need to know, but that was then; this is now.

But it drives (some) designers nuts. “Can you increase the font size so the penultimate word will wrap, too?” “Can you please widen the column slightly so that the widowed word will come up to the previous line?”

“Well, yes. But if you change the size of your browser window slightly, the problem will just as likely reappear.”

“But if you change the font size or the margins, that should take care of it, so please go ahead and do it.” Because it does take care of it in print where you set the size and the width and it stays where you set it.

So you do it. In the first instance, the path of least resistance, you can do it one of 2 ways:

  • You can change the margins or font size site wide.
  • Or you can change it for just that paragraph.

Neither solution is any good. If you change things site-wide, you’ve broken the sizing and layout all over the site. If you change it for that paragraph, it won’t look right against the rest of the styles on the page that are following the usual style rules, and you have a bit of single-use code for that paragraph – which is going to bite you in the ass down the road.

The other reason neither of these solutions are any good is that it doesn’t fix the underlying issue: text in a browser flows. Tomorrow when your designer opens the page in a slightly different sized browser window, the overall widths will have changed – and the widow will reappear, and she’s going to wonder why what you fixed yesterday is still broken today.

Another solution is to put a non-breaking space between the last two words of the paragraph. Which is a little hack that will work for this paragraph. And if it’s just one paragraph, that’s fine, but try to explain to someone, a client, that they have to end all their paragraphs by typing between the last two words instead of just hitting the space bar. (Yes, that’ll work!)

The only really bullet-proof way to widow-proof text on a website is with javascript. No biggie. Most web pages have a ton of javascript running on them already. What’s one more snippet?

If you’ve got jQuery on the page, the snippet goes like this (courtesy of Justin Hileman):

jQuery(function($) {
    $('h1,h2,h3,li,p').each(function() {
        $(this).html($(this).html().replace(/\s([^\s<]+)\s*$/,' $1'));
    });
});

What this does is goes through the whole page and replaces the last space in every major heading and paragraph with the &nbsp character. Even that’s not quite bullet-proof. If the last word is wrapped in a tag (bolded or italicized, for instance). But it’ll get you most of the way there.

If you’re using WordPress, there’s a plugin for it. There are also plugins for most other CMSs. Google “widon’t” to find yours.