unorphan.js

Prevents text orphans.

orphan (n.) A word, part of a word, or very short line that appears by itself at the end of a paragraph. (via Wikipedia)

Usage

Call unorphan() on some nodes.

unorphan('h1, p')

Or pass on a node, or a list of nodes:

// Node
unorphan(document.querySelector('#top-heading h1'))
 
// NodeList
unorphan(document.querySelectorAll('h1, p'))
 
// jQuery
unorphan($('h1, p'))

How does it work? — This changes last orphan space to a non-breaking space so the last 2 words stick together. Yes, it's smart and handles many edge cases.

<!-- before: --> <h1>Hello there world</h1>
<!--  after: --> <h1>Hello there&nbsp;world</h1>

Line breaks — You may also unorphan before line breaks by passing { br: true }.

unorphan('h1, p', { br: true })

<p>4 Privet&nbsp;Drive<br>
Little&nbsp;Whigging<br>
Surrey</p>

Download

npm install unorphan
bower install unorphan

Thanks

unorphan © 2015+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz