Prevent orphans using JavaScript with TypeMate

Using progressive enhancement to help improve your website’s look and feel

Andy Bell
Andy Bell
Dec 22, 2017 · 3 min read
Image for post
Image for post
Beautiful letterpress blocks. Photo by Hannes Wolf on Unsplash

Those that know me well know that I absolutely love typography. If they’ve been unlucky enough to work with me, they’ll tell you that I get obsessive about stuff like orphans and widows. I had, however conceded that it was too difficult to completely prevent them in responsive web design, so learned to ignore them — mostly, anyway.

This was until I started working for a very traditional agency.

The boss there was a very oldschool, classic designer, who by his own admission, didn’t get the shortcomings of the web when implementing design. He also got upset about orphans and widows, and like me, was very vocal about it.

This made me decide for a bit of fun, to play around with an idea one evening. This was to use   characters to prevent orphans. I actually ended up baking the plugin I wrote that night into the now-ageing front-end framework I built: Stalfos.

More recently though, I decided to rewrite that plugin as a little vanilla JavaScript NPM package, TypeMate:

The idea with TypeMate is to give developers a little plugin that packs a punch. It’s only 1.2kb (655 bytes gzipped), so it shouldn’t make much of a footprint. It also only affects <p> elements by default, so it shouldn’t be too disruptive either.

So what are orphans?

I’m sure it comes as no surprise to you that the definition differs depending on who you ask. People will dispute it until they die too, I imagine… For the interest of keeping this article slim though, we’re going with the definition that says that an orphan is a word that hangs off the end of a paragraph in a solitary fashion.

Image for post
Image for post
An example of a sad, lonely little orphan 😢

As you can see, it leaves a whopping amount of white-space, which can really affect the user’s reading experience. TypeMate fixes this by stiching the last two words of a paragraph together which stops this from happening.

Now, this isn’t perfect, but it’s better. We don’t have the ability to artwork our pages to pixel precision in responsive web design, but we can make little tweaks like this to make things a bit slicker and polished.

How does TypeMate work then?

Basically, it finds all the configured elements (<p> by default) and stitches the last two words together with an &nbsp; character.

Using some of the newer tools that ES6 gives us, like spread operators and Object.assign() — it was a breeze to make a nice, scalable plugin that should be easy to enhance and modify in the future. It’s also pure, vanilla JavaScript, so it’ll sit happily in any project!

The TypeMate plugin in action

Here’s a CodePen project with the plugin in action. I’ve copied the source of TypeMate into a “fake” node_modules folder, so you can see an accurate enough implementation.

The little switch at the top will turn it on and off, so you can see the effect on both the article heading and its paragraphs.

I hope TypeMate and this little post help you improve your typography work long-term. Give me a shout on Twitter if they do. I’d love to see how TypeMate has helped you :)

You can also get involved in the GitHub repo. It’d be awesome if TypeMate ends up being a really useful tool for developers. Any help to achieve that will always be appreciated. You could start by giving it a little star 😘

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store