Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to automatically control orphaned words in an HTML document?

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:

"This paragraph ends with an undesirable orphaned
word."

Instead, it would be preferable to have the paragraph break as follows:

"This paragraph no longer ends with an undesirable
orphaned word."

While I know that I could manually correct this by placing an HTML non-breaking space ( ) between the final two words, I'm wondering if there's a way to automate the process, since manual adjustments like this can quickly become tedious for large blocks of text across multiple files.

Incidentally, the CSS2.1 properties orphans (and widows) only apply to entire lines of text, and even then only for the printing of HTML pages (not to mention the fact that these properties are largely unsupported by most major browsers).

Many professional page layout applications, such as Adobe InDesign, can automate the removal of orphans by automatically adding non-breaking spaces where orphans occur; is there any sort of equivalent solution for HTML?

like image 641
Josh M. Lenius Avatar asked Jan 13 '12 16:01

Josh M. Lenius


People also ask

How do you avoid widows and orphans in HTML?

The most simple way to get rid of widows is to manually add a non-breaking space inside your HTML code. A non-breaking space acts as a glue between two words, and force them to be on the same line. A non-breaking space looks like this:   .

How do you keep words together in HTML?

The secret code To force a web browser to treat 2 separate words as if they were 1, use the code   instead of a space, like so: These two words are like one.


1 Answers

You can avoid orphaned words by replacing the space between the last two words in a sentence with a non-breaking space ( ).

There are plugins out there that does this, for example jqWidon't or this jquery snippet.

There are also plugins for popular frameworks (such as typogrify for django and widon't for wordpress) that essentially does the same thing.

like image 173
Shawn Chin Avatar answered Oct 04 '22 17:10

Shawn Chin