Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of April 2018 04:41:14 PM

5.7. Summary

Although authors cannot count on a specific font being used in a document, they can very easily specify generic font families to be used. This particular behavior is generally very well supported, since any user agent that didn't let authors (or even readers) assign fonts would quickly find itself out of favor.

As for the other areas of font manipulation, support varies. Changing BIG {font-size: 200%;}<P>This paragraph has a line-height of 1.5 times its font-size. In addition,any elements within it <SMALL>such as this small element</SMALL> also haveline-heights 1.5 time their font-size... and that includes <BIG>this bigelement right here</BIG>. By using a scaling factor, line-heights scaleto match the font-size of any element.</P>

Figure 8-64

Figure 8-64. Using a scaling factor for line-height

In this example, the line-height for theSMALL element turns out to be12px , and for the BIG element, the size of fonts usually works well, but twentieth-century implementations ranged from frustratingly simplistic to very nearly correct in this area. The frustrating part for authors, though, is usually not how font sizing is supported, but how a unit they want to use (points) can yield very different results in different media, or even different operating systems and user agents. The dangers of using points are many, and using length units for web design is generally not a good idea. Percentages, em units, and ex units are usually best for changing font sizes, since these scale very well in all common display environments.

Now that we've worked our way through altering text and fonts, let's turn to ways to style the elements that contain the text.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

Here's an  in-line greyscale image with default settingsand unpredicable placement on the page. 

<IMG SRC="ugly2.gif">

If you resize the  browser window the image jumps around asthe lines re-wrap. Here's an in-line greyscale image with default settingsand unpredictable placement on the page. If you resize the browser window the image jumps around as the lines re-wrap. the element the line-boxes are aligned. The value justify is supported by programmatically adjusting the letter- and word-spacing of the line's content, and results may vary by user agent.

Example

text-indentIE4 Y/Y IE5 Y/Y NN4 Y/Y Op3 Y/-

Used to set the indentation of the first line of an element. This is most often used to create a tab effect for Negative values are permitted, and cause "hanging indents."

P.contain {position: relative;}

Consider the example in Figure 9-19. It shows twoparagraphs that contain identical text. However, the first paragraphcontains an inline boldface element, and the second an absolutelypositioned boldface element. In the second paragraph, the styles usedwould be something like what is shown here:

P {position: relative;}   /* establish containing blocks */<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;