typography - WidowOrphan Control with JavaScript? - Stack Overflow

admin管理员组

文章数量:1206197

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.

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.

• javascript
• typography

Share Improve this question Follow edited Jan 20, 2011 at 1:10 sdleihssirhc asked Jan 20, 2011 at 0:50 sdleihssirhcsdleihssirhc 42.5k66 gold badges5454 silver badges6767 bronze badges 3

• Are you talking about printing the page? – SLaks Commented Jan 20, 2011 at 0:56
• How can you have orphans or widows on screen? – SLaks Commented Jan 20, 2011 at 1:43
• Is there not a plain vanilla JavaScript solution for this? Everyone, everywhere is a jQuery dependent script. – Ricardo Zea Commented Jul 15, 2015 at 17:40

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 5

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

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.

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

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

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

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

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

$('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>

本文标签： typographyWidowOrphan Control with JavaScriptStack Overflow