Widow/Orphan Control with JavaScript?

问题

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.

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

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

回答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.

回答4:

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

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

回答5:

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

回答6:

$('span').each(function() {
  var w = this.textContent.split(" ");
  if (w.length > 1) {
    w[w.length - 2] += "&nbsp;" + 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>

回答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) + "&nbsp;" + text.substr(lastSpace+1);
    textNode.replaceWith(newText);
  });

来源：https://stackoverflow.com/questions/4742418/widow-orphan-control-with-javascript

标签

javascript

typography