Widow/Orphan Control with JavaScript?

css orphans
css prevent orphan words

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.


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

Prevent orphans using JavaScript with TypeMate - Andy Bell, He also got upset about orphans and widows, and like me, was very vocal about it. This made me decide for a bit of fun, to play around with an  I was wondering if there's a way to automatically control orphaned words in an HTML file, possibly by using CSS and/or Javascript (or something else, if anyone has an alternative suggestion). By 'orphaned words', I mean singular words that appear on a new line at the end of a paragraph. For example:


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

HTML DOM Style widows Property, Tip: See the orphans property to set or return the minimum number of lines for an element that must be visible at the bottom of a page. Browser Support. Property. I always get widows and orphans confused so I remind myself that orphans are left alone at the start; widows are left alone at the end. Another way is to remember that alphabetically the word “orphans” comes before “widows”. Browser support for Orphans


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.

HTML DOM Style orphans Property, Tip: See the widows property to set or return the minimum number of lines for an element that must be visible at the top of a page. Browser Support. Property. While elements like headings can also have dangling or leading fragments, it’s more common to treat then with page-break controls than widows and orphans. Which Is Which? An easy (if somewhat Dickensian) way to remember the terms: Orphans are “left alone at the beginning”. Widows are “left alone at the end”. Widows & Orphans on Screen


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

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

Preventing display of orphans in text using JavaScript, Preventing display of orphans in text using JavaScript With a few lines of jQuery code, we can prevent widows and orphans as shown below:  I thought I had found a "keep with next" kind of function to keep section titles from being separated from the following text, but now I can't find it. I'd like an overall widow/orphan control function, too. Do they exist?


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

CSS last-line: Controlling Widows & Orphans, “Widows” and “orphans” refer to a word or line of text that is laid out on the page in a way that disturbs reading flow and the “look” of the page:  widow and orphan control Your call. Pic­ture a para­graph that starts at the bot­tom of one page and con­tin­ues at the top of the next. When only the last line of the para­graph ap­pears at the top of the sec­ond page, that line is called a widow.


Code – Prevent Widows and Orphans in Fluid Width Web Layouts , Web typography - prevent widows and orphans (single words on new lines) in responsive fluid-width web layouts using a simple JavaScript  A widow is a lone word that appears at the bottom of a paragraph or page. An orphan is a similar unwanted straggler, but this describes a word that at the top of a page. Discover how to avoid widows and orphans in your publications.


widows, The widows property in CSS controls the. split on the new page. orphans = minimum number of lines in a paragraph split on the old page. MS Word Widow and Orphan Paragraphs. MS Word Format Hanging Indent Widow Orphan Control and Those Extra Lines Between Paragraphs - Duration: 6:16. DrMarylynne 4,096 views


orphans, The orphans CSS property sets the minimum number of lines in a block container that must be It is used to demonstrate how widows work. Most full-featured word processors and page layout applications include a paragraph setting (or option) to automatically prevent widows and orphans. When the option is turned on, an orphan is forced to the top of the next page or column; and the line preceding a widow is forced to the next page or column with the last line.