Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:41 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 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

Speaking of list items, they have a fewspecial rules in addition to everything discussed so far. List itemsare typically preceded by amarker, such as a small dotor a number. This marker isn't actually part of thelist-item's content area, so you get effects like thoseillustrated in Figure 8-25.

In CSS1, very little is said about the placement and effects of this 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.

This paragraph contains elements of increasing weight: there is an<SPAN>SPAN element which contains a <STRONG>strongly emphasizedelement, and that contains a <B>boldface element</B></STRONG></SPAN>.</P>
Figure 5-12

Figure 5-12. Moving up the weight scale

In the last two nested elements, the computed value offont-weight is increased because of the liberaluse of the keyword bolder. If we were to replacethe text in the paragraph with numbers representing thefont-weight of each element, we would get theassuming that a user agent supports negative margins at all.

TIP

User agents are not, according tothe CSS1 specification,required to fully support negative margins, using the phrase,"A negative value is allowed, but there may beimplementation-specific limits." In the world of web browsers,though Navigator 4.x, Explorer 4.x/5.x, and Opera 3.x do permitnegative margins:

Thus, if the width of the DIVis 30em , then the sum total of the content width,padding, borders, and margins of each paragraph will be30em. In Figure 8-7, the"blank" space around the paragraphs is actually theirmargins. (If the DIV had any padding, there wouldbe even more blank space, but that wasn't the case here.)

In a similar fashion, the overall width of a list item's element box is equal tothe content width of the list element that contains it. As you canbeen illustrated in Figure 8-41.

Figure 8-41

Figure 8-41. Backgrounds "slide under" floated elements

Because the floated element is both within and without the flow, this sort of thing is bound to happen. What's going on? Well, the content of the paragraphs is being "displaced" by the floated element. However, each paragraph's element width is still as wide as its parent element. Therefore, its content area spans the width of the parent, and so does the background. The actual content doesn't flow all the way across its own content area in