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.
One way to create justified text in HTML is to set the align attribute of the tag in question to the value justify: <p align="justify">This paragraph has justified text.</p> But CSS makes this method obsolete. Include the text-align CSS attribute in your style definition instead: <p style="text-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.
Speaking of ragged type, there are three kinds: ragged right, ragged left, and ragged center. Ragged right type lines up on the left margin, leaving the right side ragged; while ragged left lines up on the right margin, leaving the left side ragged. In ragged center type, both sides are ragged, and the lines of type appear centered in their block, as Figure 50.2 demonstrates. By default, browsers display ragged right type. 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. Specifying ragged type is actually counterintuitive, in that the proper value for HTML's align attribute or CSS' text-align attribute is the opposite of what it should be. For ragged right type, the correct value is left, and for ragged left type, the correct value is right: <p align="left">This paragraph has ragged right type.</p> <p style="text-align: right;">This paragraph has ragged left type. </p> 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="center">This paragraph has ragged center type.</p> <p style="text-align: center;">This paragraph has ragged center type. </p> |
