Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 23rd of July 2014 08:03:34 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.

Depending on which of the three options you use to access information using your Java classes, this information must at some point be saved back to a file (probably to the one from which it was read). When the user of your application invokes a File->Save action, the information in the application must be written out to an ApplicationML file. Now this information is stored in memory, either as a (DOM) tree of nodes, or in your own proprietary object model. Also note that most DOM XML parsers can generate XML code from DOM document objects (but its quite trivial to turn a tree of nodes into XML by writing the code to do it yourself). There are 2 basic ways to get this information back into an ApplicationML file:

There are advantages and disadvantages to using some of the strategies to import and export XML. The complexity of your application data and available system resources are factors that would determine what strategy should be used.

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 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.

Example

text-alignIE4 Y/P IE5 Y/Y NN4 Y/P Op3 Y/-

This sets the horizontal alignment ofthe text in an element, or more precisely, defines to which side ofthe element the line-boxes are aligned. The valuejustify is supported by programmatically adjustingthe letter- and word-spacing of the line's content, and resultsmay vary by user agent.

Example

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

Used to set the indentation of thewill be only rarely that you have a document where the STYLE element does not contain any rules.

For those of you concerned about making your documents accessible to older browsers, there is an important warning to be made. You're probably aware that browsers ignore tags they don't recognize; for example, if a web page contains a BLOOPER tag, browsers will completely ignore the tag because it isn't a tag they

Figure 10-11

Figure 10-11. Selecting styles for certain first children

The very first paragraph is italicized because it is the first childof the BODY element. Similarly, the firstparagraph in the first DIV is italicized becauseit is the first child of the DIV, even though textpreceded it. Only structural elements count for this pseudo-class, sothe text before the paragraph doesn't affect theparagraph's status as the first child. However, in the secondDIV, the H2 is the first child,so it does not match the rule P:first-child. If