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.

Advertisements