Widow/Orphan Control with JavaScript?

Question

It can be library-dependent or -agnostic. I just want to know if a script exists that will analyze the page (or maybe certain nodes that it has been given) and... "protect" against widows and orphans in the text.

What does "protect" mean? I don't know. I considered seeing if I could come up with one myself, but part of the problem is I'm not even sure how I would go about doing it.

Clarification: This would be for the screen version of the site, not print.

Answer 1

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');

Answer 2

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.

Answer 3

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