CSS Cookbook

1.15. Setting Text to Be Justified

Problem

You want to align text to be justified on both the left and right sides, as in Figure 1-29.

Figure 1-29. The paragraph justified on both sides

Solution

Use the text-align property:

P {
 width: 600px;
 text-align: justify;
}

Discussion

How well does text justification work? According to the CSS 2.1 specification, it depends on the algorithms developed by the engineers who made the browser being used to view the web page. Because there isn’t an agreed-upon algorithm for justifying text, the look of the text varies from browser to browser, even though the browser vendor technically supports justification.

Browser support for the property is good in Internet Explorer 4+ for Windows, Internet Explorer 5 for Macintosh, Safari, and Opera 3+. In those browsers, justified text looks pleasing to the eye. In other browsers, justified text may look bad; for example, it might have large whitespace between words.

See Also

The CSS 2.1 specification about the text-align property at http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop.