Save The Orphans

I’ve finally released my first ever jQuery plugin! \o/

It’s a very small bit of code that will prevent orphaned words on your web pages.

Now we’ve gone all responsive, and text is (virtually) no doubt the vast majority of web content from here on out, it’s the attention to detail that will make the difference when we look at our typography as a starting point.

Go and grab it

I’ve popped a demo page up here, and here’s a link to the GitHub repository.


This could possible be the most belated piece of code in the history of the technological age.

A bold statement considering the vapourware nature of Duke Nukem Forever, but this has been on my to do list since… actually, let’s do a flashback.

Time for an idiosyncratic wipe

It all started in Nottingham, in the bitterly cold January of 2011. I had managed to wangle a ticket, through my employers at the time, to go to my first ever web design conference. In this case it was New Adventures in Web Design, put together by Simon Collison and Greg Wood.

And a wonderful event it was too. But there is still one distinct point that sticks in my mind.

It was during Jon Tan’s talk, “Language and the Lizard Brain”, the he made a passing reference to orphaned text, and how it was a pet hate of his (it was something along those lines, apologies, we’re now trusting my brain to remember something from 2½ years ago).

In that moment I had a spark of inspiration.

“I must make a little jQuery plugin that will fix that problem. It’ll only be small, so it won’t take me long…”

Fast-forward 2½ years

I finally had a reason to implement this plugin I’d had in the back of my mind for a ridiculously long time. It just popped back in to the forefront of my mind when resizing the browser down to see where the design break.

The design didn’t, but the text did. With my OCD tendencies (if you’re not aware of these, you may need to read about my socks), that lonely little word, all by itself on it’s very own line… Well, it just wound me up.

So I built my first every jQuery plugin.

In a grand total of 1 hour.

Go and grab it and save those poor little orphans.

This entry was posted in jQuery.

4 thoughts on “Save The Orphans

  1. I love this script Wes and I have tried to use it on my last couple of projects. However, I have run into an issue of the project I am using this on now. In that this is getting applied to links and stuff within the p element which breaking some other JQuery I have running. Do you know if there is a way to restrict this from being applied to certain tags perhaps ones that have a class or to stop this being applied to the code within the <a href within the tag.

    I hope this makes sense?

    otherwise lovely little script.


    • I believe someone else had exactly the same issue and issued a pull request to the repo, which was gladly accepted. But I do think there are still issues with it. One of the guys at work had actually taken a copy of it and gave it a huge overhaul, making it far more robust. I shall get right on his case to issue a pull request for the work he’s done. That’ll hopefully fix the issues your having.

  2. Thanks Wes. I did get around it by using $(“p:not(.classname)”) and then apply a class to each where there were links causing the breakage. It works but it’s not the cleanest approach. I suppose the best approach is for it to not apply it to any HTML tags and just letters/numbers within the tag itself. If you can get updated version that would be ace!

    Thanks buddy.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>