Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 23rd of August 2014 09:47:45 PM

10.3. Fonts and Text

The font property has also picked up a few new values in CSS2:

caption
icon
menu
message-box
small-caption
status-bar 

These values give the font property the ability to match the font family, size, weight, and so forth, according to the settings users have specified on their computers. For example, icons on a Macintosh are typically labeled using 9-point Geneva. Assuming that hasn't been changed by the user, any font declaration with a value of icon will result in 9-point Geneva for that text -- as long as the page is viewed using a Macintosh:

SPAN.OScap {font: icon;}  /* will look like icon labels in OS */

On a Windows system, of course, the font would come out different, and under other window managers (like X), it would look different still. The flexibility is certainly interesting, and it allows the author to easily create pages that have an appearance familiar to the user.

10.3.1. New Font Properties

The font section gains two new properties in CSS2. font-size-adjust is intended to help browsers make sure that text will be the intended size, regardless of whether the browser can use the font specified in the style sheet. It is often a problem that authors will call for a font that is not available to the user, and when another font is substituted, it's either too big or too small to read comfortably. This new property addresses that very problem, and should be very useful for authors who want to make sure that their documents are readable no matter what font is substituted.

The other new font property is font-stretch , which percentages in the preceding example, the image would be placedtwo-thirds of the way across the element and one-third of the waydown. It's also worth noting what happens if you only supplyone value. In that case, the single value supplied is taken to be thehorizontal value, and the vertical is assumed to be 50%. This isbasically the same as with the keywords, where if only one keyword isgiven, the other is assumed to be center. Thus:

BODY {background-image: url(bigyinyang.gif);background-repeat: no-repeat;
allows you to define variable widths for the fonts you use. This is
similar to setting a character width in a desktop publishing system.
The property uses keywords such as ultra-condensed
, wider, and expanded. The
changes are handled in a fashion similar to font weights, where a
table of condensed and expanded font faces is constructed, and the
keywords are assigned to various faces. If no face exists, the user
agent may try to scale a font on its own, or it may simply ignore
font-stretch altogether. Figure 10-13 shows what a font might look like for each
possible value of font-stretch.

Figure 10-13

Figure 10-13. Stretching fonts

10.3.2. text-shadow

In terms of text, there is one new property, text-shadow, which has the effect you'd probably expect from its name: you can define a drop shadow of a given color for text. You can even set an offset and a blur radius, which means you can get cool fuzzy shadows, or even glow effects, using this property. We should fully expect to see this property horribly abused the instant it's supported by any browser; for a few examples of why, see the simulations in Figure 10-14.

Figure 10-14

Figure 10-14. Various effects using the text-shadow property



Library Navigation Links

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

There is one major difference between margins and padding when it comes to inline elements. Let's turn things around and talk about left and right padding first off. Here, if we set values for the left or right padding, they will be visible, as Figure 7-60 makes apparent.

B {padding-left: 10px; padding-right: 10px; background: silver;}
Figure 7-60

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of thewith Microsoft's GIF Animator (a freebie you can pull off the web).  The image is square, but the white image background blends seamlessly with the page background. It is also possible to specify one or more colors in a GIF's palette as transparent.  Here's a link to my <A HREF="mailto:johnmack@udel.edu?subject=Your Awesome MAD-DOG Page!">
e-mail: &nbsp;<IMG ALT="Great Page, Mad Dog!" src=mailbox.gif></a> so you can complain about this page.  The link encloses both 

Figure 4-16

Figure 4-16. Justification choices

Anotherproblem is that CSS doesn't say anything about how hyphenationshould be handled. Most justified text uses hyphenation to break longwords across two lines, thus reducing the space between words andimproving the appearance of lines (see Figure 4-17).

Figure 4-17

Figure 4-17. Justification with hyphenation

TIP

The fact that hyphenation is not described in CSS has more to do with