Widow/Orphan Control with JavaScript?

I recently ran into this problem in my angular app and used some regex I found on this post to add a non-breaking space before the last word:

String.replace(/\s([^\s<]+)\s*$/,\'&nbsp\;$1');

But angular was printing the non-breaking space as a string so I used unicode and it worked great:
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');


I believe you're describing typographic widows in an HTML document? Where a single word wraps around onto a new line in a header, for example?

The jQuery Widon't plugin goes through your HTML looking for this and puts a non-breaking space between the second-last and last words to ensure that at least two words wrap to a new line.

Hope this helps, Karl


Adobe has stepped up and decided this is a serious issue on the web. They have put forward a proposal to help fix widows/orphans and other text balancing typography issues.

The repository for their jQuery plugin is here: https://github.com/adobe-webplatform/balance-text

The proposal to the w3c was here: http://adobe-webplatform.github.io/balance-text/proposal/index.html

It has since been adopted into the CSS Text Module Level 4 Editor's Draft.