Web Development

How to fix your rags, widows, and orphans

Ryan Boudreaux looks at some of the most common typography problems and offers a tip to help keep them to a minimum in your web designs.

The printed word has its own elements of style that are easier to manage than in the digital world -- authors, writers, journalists, and columnists work within set margins and paper orientation, while paper size and columns are set to a particular height and width, and the layout includes headers, footers, and vertical alignment-- all before the first letter or word is banged out on the keyboard. However, it can be difficult for the web designer or web content manager to handle -- ensuring that the precise typography elements are rendered on the web page in every browser for every user. In this post, I will demonstrate taking control of your rags, widows, and orphans. How can the web designer obtain command over the rendered word avoiding unsightly rags, painful to read widows, and dreadful orphans?

Rags

Rags -- in typesetting, page layout, and typography -- are the uneven edges of text in a paragraph that is aligned on one side. It is the text flow or image placement relative to a page, measured column, table cell, or tab, and is also known as text alignment, text justification, or type justification.

The basic variations of text alignment include four typographic alignments:

  • Left alignment
  • Right alignment
  • Justified
  • Centered
The "rag" is probably one of the most overlooked details in web typography, yet its flow can make or break the look and feel of a website. What is the difference between good rag and bad rag? Good rag has a pleasing flow where the line breaks to the right of the paragraph and it goes in and out in small increments. Bad rag creates distracting shapes of irregular white space in the margins of the page or column where line breaks are varied and inconsistent. Figures A and B below illustrate bad and good rag, respectively.

Figure A

Figure B

Widows

Widows are paragraph-ending lines that fall at the beginning of the following page/column, thus separated from the rest of the text. A widow is a very short line, usually one word, or the end of a hyphenated word at the end of a paragraph or column. Widows leave too much white space between paragraphs or at the top of a page. This interrupts the reader's eye, disrupts the reading process, and can even deter comprehension. See the example of a widow in Figure C below.

Figure C

Orphans

Orphans are single words that are left alone at the end of a paragraph. An orphan is a word, part of a word, or very short line that appears by itself at the end of a paragraph. An orphan can also be a paragraph-opening line that appears by itself at the bottom of a page/column. Orphans result in too much white space between paragraphs or at the bottom of a page. See the example of an orphan in Figure D below.

Figure D

Fixing the rags, widows, and orphans

Let's find some ways to balance the rag, fix the widows, and omit the orphans in your web typography. Applying styles to your paragraphs helps take control of how your ragged text gets displayed. While utilizing CSS gives you some control, CSS3 provides additional rules to refine effective justification. While there are no foolproof solutions to controlling the rag, there are some modifications that can be applied to the block level of text.

Setting text justified or ragged text gets accomplished with CSS with the text-align property, as displayed in the code snippet below:

/* ragged right */
P {text-align:left}
/* ragged left */
P {text-align:right}
/* no ragged */
P {text-align:justify}

However, this CSS styling is not a perfect answer, and since effective justification of text can only be achieved if long words are hyphenated, HTML and CSS alone do not have any provisions for adding automatic hyphenation with all current browser support; Manual hyphenation along line breaks is out of the question; therefore, this turns out to be a poor solution.

We get some assistance from the CSS Multi-column Layout Module, which describes how text and image content can be flowed into multiple columns, for example, and can be defined with a gap and a rule between each column in an assigned column-count if desired. I reviewed this CSS3 technique in detail "Working with the CSS3 Multi-column Layout Module." A snippet of this code example is displayed below, which sets the number of fixed columns with the column-count set to 3, the column-gap at 1em, and a solid black 1px column-rule. With this styling, the column widths will vary depending on the available width of the browser.

.column_count {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      -moz-column-gap: 1em;
      -moz-column-rule: 1px solid black;
      -webkit-column-gap: 1em;
      -webkit-column-rule: 1px solid black;
      column-count: 3;
      column-gap: 1em;
      column-rule: 1 px solid black;
}
An example of this styling applied to sample text is displayed in Figure E below:

Figure E

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

4 comments
prouton
prouton

The article is entitled "How to fix Your rags, widows and orphans", but I don't find a single "fix" present. I see clear definitions and examples of how things look when they go wrong, but setting the CSS style to left justified changes what exactly? Not the default behavior of most browsers. Breaking up the page into three columns helps with rags? Or with Widows/orphans? Short of casting text in cement with PDF's or static images, you simply cannot control type flow in HTML/CSS the way that magazines and newspapers do it.

scophi
scophi

But I agree with jebswebs. This isn't a real issue unless you're using wide-fonts and very narrow columns. Most fonts over a standard 40-50em column will even out...especially when using narrow to medium width sans-serif fonts, like Arial, Helvetica, and Lucida Grande. For the record, I can't stand full justification. The right-side "rag" is what gives a page some character. Full-justification looks too mechanical, like I'm reading a dissertation or technical report. The "rag" also helps the eye to verify the next correct line when line-height is not sufficient. I'm glad there are people that pay attention to small details. And I'm glad to see them discussed. But I don't think this case is an actual issue.

jebswebs
jebswebs

It appears that this is an article for (by?) graphic artists who still think of the web as a printed page. Given the facts noted in the article - specifically the fact that no two user experiences will be the same given the variety of hardware and software - it seems silly to even worry about this. If I get an orphan or widow while viewing a web page in a standard browser, all I have to do is re-size my screen (or the font) and the problem "goes away." It seems to me the issue of "rags" (thank you - a new term for me) really only comes into play when you have images or other objects in the mix - particularly ones on the right of the text with left-justified alignment. If you use the CSS style float:right with some padding on the image/object you can sometimes finesse this. I've recently read somewhere the opinion that if you have a certain amount of text in your web document (the exact amount of text I don't remember...may be a more than a standard "page" - whatever that is) the designer should create a PDF where one can in fact control the layout of the text. This might not be a bad strategy as I personally prefer to print out large/long documents and print them out (Yeah, I know I'm an ole fart). In this world of handheld devices "fluid design" has to be the prevailing theme. So, I am not worried about widows, orphans or rags - at least not in web design. I'll be interested in hearing what others have to say on this issue.

Editor's Picks