Blog on Taking Care of the Widow and Orphan

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

Blog on Taking Care of the Widow and Orphan

Source: https://www.techrepublic.com/blog/web-designer/how-to-fix-your-rags-widows-and-orphans/

Share this post