Recipe 2.6. Setting Text to Be Justified

Problem

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

Figure 2-7. The paragraph justified on both sides

Solution

Use the text-align property:

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

Discussion

How well does web-based 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 may have a lot of whitespace between words.

Problem

Figure 2-7. The paragraph justified on both sides

Solution

Discussion

See Also