Stop orphans on your website using jQuery

An orphan is a single word at the bottom of a block of text or a title, this interrupts the reader’s eye and diminishes readability.

Example of an orphan

How to solve this on a responsive website website without re writing the copy

I found several JavaScripts that would add a non-breaking space ( ) between the last 2 words. But found there was many instances that this did not work for example if there was only one word or if I had HTML tags inside the paragraph the script was run on the site would brake.

After many Google searchers I came across a jQuery script by Simon Goellner called jquery-unorphanize on Github. This was a well thought out script that dealt with all the issues I was experiencing. Head over to his Github page to find out how to implement it: https://github.com/simeydotme/jquery-unorphanize (the script is well commented if you are interested in seeing exactly how it works).

If you are using bower you can install with $ bower install jquery-unorphanize

Note: while writing this I see that this blog suffers from orphans… an issue has been logged.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s