Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 23rd of October 2017 02:41:36 AM

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 use of the keyword bolder. If we were to replacethe text in the paragraph with numbers representing thefont-weight of each element, we would get theresults in Figure 5-13:

<P>100 <SPAN> 400 <STRONG> 700 <B> 800 </B></STRONG></SPAN>.</P>
Figure 5-13

Figure 5-13. Changing weight, with the numbers to illustrate it

The first two weight increases are large because they represent jumps 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.

Figure 8-43

Figure 8-43. The details of floating up and left with negative margins

The math in this situation works out something like this: assume thetop inner edge of the DIV is at the pixel position 100. The browser,in order to figure out where the top inner edge of the floatedelement should be will do this: 100px+ (-15px)margin + 0padding =85px . Thus the top inner edge of the floated

Figure 8-58

Figure 8-58. Inline padding and line-box layout

Note that this padding does not alter the actual shape of thecontent-height, and so will not affect the height of the inline boxfor this element. Adding borders to an inline element will not affectthe way line boxes are generated, as Figure 8-59illustrates.

Figure 8-59

Figure 8-59. Large inline boxes can overlap many other lines

One can assign margins to nonreplaced inline elements as well, butthese effectively do not apply to the top and bottom of a nonreplaced

By making the W3C the keeper of the XML standard, it ensures that no one vendor should be able to cause interoperability problems to occur between systems that use the open standard. This should be reassuring to most companies making an investment in this technology, by being vendor neutral, this solution proposes to keep even small companies out of reach of big companies choosing to change the standards on them. For example, if a big company chooses to change the platform at its whim, then most other companies relying on that platform suffer. By keeping all data in XML and using XML in communications protocols, companies can maximize the lifetime of their investment in their products and solutions.

XML is language independent

By being language independent, XML bypasses the requirement to have a standard binary encoding or storage format. Language independence also fosters immense interoperability amongst heterogeneous systems. It is also good for future compatilbilty. For example, if in the future a product needs to be changed in order to deal with a new computing paradigm or network protocol, by keeping XML flowing through the system, addition of a new layer to deal with this change is feasible.

DOM and SAX are open, language-independent set of interfaces