Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 19th of January 2018 12:54:13 AM

10.3. Fonts and Text

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

caption
<DIV STYLE="width: 200px;">
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its padding will be 10% of the width of the paragraph's parent element.
Given the declared width of 200 pixels, the padding will be 20 pixels on
all sides.</P>
</DIV>
<DIV STYLE="width: 100px;">
<P>This paragraph is contained within a DIV with a width of 100 pixels,
so its padding will still be 10% of the width of the paragraph's parent.
There will, therefore, be half as much padding on this paragraph as that
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 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.

browser deals with the data it imports. After all, there may be otherstyle languages in the future, so it will be important to say whichlanguage you're using.

Next we find the HREF attribute. The value of this attribute is theURL of your style sheet. This URL can beeither absolute or relative, depending on what works for you. In ourexample, of course, the URL is relative. It could as easily have beensomething like http://www.style.org/sheet1.css.

top: 10%; bottom: auto; left: 50%; right: 10%; height: auto; min-width: 15em;

Here we have a case where the element should be 40% as wide as thecontaining block but can never be less than 15emwide. We've also changed the bottom andheight so that they're automaticallydetermined. This will let the element be as tall as necessary todisplay its content, no matter how narrow it gets (never less than15em, of course!).

Although it is sometimes important to set the width and height of anelement, this is not always necessary when positioning elements. Forexample, if the placement of the four sides of the element isdescribed using top, right,bottom, and left, then theheight and width of the element are determined by the placement ofthe sides. Assume that you want an element to fill the left half ofits containing block, from top to bottom. You could use these styles,sheet or the embedded style sheet , since this style sheet is embedded within the document. It contains styles that apply to the document, but it can also contain multiple links to external style sheets using the @import directive.

1.4.3. The @import Directive

Now for the stuff that is found inside the STYLE