Chapter 50. Controlling Justified and Ragged Type
Justified lines of type have the same length. To create this effect, the browser pads shorter lines with extra space, as in Figure 50.1.
Figure 50.1. The paragraph on the left is justified. In justified type, the browser pads shorter lines with extra space so that they're all the same length.
[View full size image]
GEEKSPEAKJustified lines of type have the same length. |
But CSS makes this method obsolete. Include the text-align CSS attribute in your style definition instead:
<p align="justify">This paragraph has justified text.</p>
A word to the wise: The browser's built-in calculations for justifying text aren't very sophisticated, which often makes justified blocks of type on the Web look pompous in the worst way, worse than the most low-budget local newspaper you've ever seen. When done right, with skill and precision, justification often brings a classy touch to books and other printed material. But ragged type tends to be easier to read on a monitor, and legibility trumps all in onscreen typography.
<p style="text-align: justify;">This paragraph has justified text.</p>
GEEKSPEAKThe opposite of justified is ragged. Ragged type tends to play better on the Web than justified type. |
GEEKSPEAKRagged right type lines up on the left and leaves the right side uneven. Ragged left type lines up on the right and leaves the left side uneven. Ragged center type is uneven on both sides and appears centered in its block. |
Figure 50.2. The paragraph on the left has ragged right type, while the paragraph in the middle has ragged center type, and the paragraph on the right has ragged left type.
[View full size image]
If your mind is twisting, try to think of it in terms of where the text lines up, which is probably how the people who designed HTML and CSS were thinking back in the day. In ragged right type, the text aligns on the left, so, in this sense, text-align: left; seems pretty reasonable.This leaves ragged center type, which takes the value center:
<p align="left">This paragraph has ragged right type.</p>
<p style="text-align: right;">This paragraph has ragged left type. </p>
<p align="center">This paragraph has ragged center type.</p>
<p style="text-align: center;">This paragraph has ragged center type. </p>