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 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

Answer 2

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 3

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 4

There is plugin called widowfix that is a bit more configurable than the accepted answer.

$('h1').widowFix({
    letterLimit: 10,
    prevLimit: 5,
    linkFix: true 
});

Answer 5

$('span').each(function() {
  var w = this.textContent.split(" ");
  if (w.length > 1) {
    w[w.length - 2] += " " + w[w.length - 1];
    w.pop();
    this.innerHTML = (w.join(" "));
  }
});

#foo {
  width: 124px;
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <span class="orphan">hello there I am a string really really long, I wonder how many lines I have</span> 
</div>

Answer 6

A vanilla JavaScript solution, as originally posted at CSS Tricks:

var headings = document.getElementsByTagName( 'h1' );
for ( var i=0; i<headings.length; i++ ) {
  var h1s = headings[i].innerHTML.split( ' ' );
  h1s[h1s.length-2] += "&nbsp;" + h1s[h1s.length-1];
  h1s.pop();
  headings[i].innerHTML = h1s.join( ' ' );
}

Answer 7

Here is a JQuery solution that doesn't format the entire HTML. It uses only the text nodes (node type 3) from the DOM node tree. This is useful when you don't want to lose functionality of elements like HTTP addresses or email links (node type 1) that may be in your copy. The above solutions format the text in such a way that they strip everything from the HTML in order to rebuild it again.

$(".no-widows").each(function () {
    const parent = $(this);
    const textNode = parent.contents().filter(function () {return this.nodeType === 3;}).last();
    const text = textNode.text().trim();
    const lastSpace = text.lastIndexOf(" ");
    const newText = text.substr(0, lastSpace) + " " + text.substr(lastSpace+1);
    textNode.replaceWith(newText);
  });