The Text-Transform Property


The text-transform property, like the text-decoration property, does not specify a font. However, it best fits this chapter because it affects the case of text.

Name:

text-transform

Value:

capitalize | uppercase | lowercase | none

Initial:

none

Applies to:

all elements

Inherited:

yes

Percentages:

N/A


This property has four values:

  • capitalize

  • uppercase

  • lowercase

  • none

The capitalize value capitalizes The First Letter Of Each Word, To Give An Effect Like This. Uppercase converts everything to UPPERCASE LETTERS LIKE THESE; lowercase does the opposite. None neutralizes an inherited value. These effects are often used in headings and titles but seldom in running text.

Here are some example usages:

 H1 { text-transform: uppercase } H1 { text-transform: capitalize }

The rules for converting from uppercase to lowercase and vice versa depend on the language used and on the browser. For example, the Dutch have a special letter that is usually written "ij," although it is really a single letter. So a word like ijstijd would be capitalized as IJstijd. Turkish has a dotless 1 as well as a dotted i, the former capitalizes to an equally dotless 1, the latter to a dotted i.

The property is also useful for converting acronyms, such as NATO, BASIC, PIN, and NASA to small-caps, as in, NATO, BASIC, PIN, and NASA. Acronyms in standard uppercase letters look too large. So in the next example, we use small-caps instead. We use font-variant to change the font to small-caps. But, we don't use the uppercase version of small-caps because our intent is to make the acronym look smaller, as shown earlier in the paragraph. So, we use the lowercase version of small-caps (text-TRansform: lowercase) to achieve the right effect:

 ACRONYM {   text-transform: lowercase;   font-variant: small-caps; } Success for <ACRONYM>NASA</ACRONYM>

Figure 5.17. Converting acronyms from standard uppercase letters into lowercase small-caps: (a) the acronym in standard uppercase letters; (b) the acronym in uppercase small-caps this is not the effect we want; (c) the acronym in lowercase small-caps this is the effect we want.

CSS:

/* no CSS rules */

 .acronym {  font-variant: small-caps }

 .acronym {  font-variant: small-caps;  text-transform: lowercase }

Formatted result:

Success for NASA

Success for NASA

Success for NASA

 

(a)

(b)

(c)


There is often confusion about the effects of text-transform's uppercase and font-variant's small-caps. However, as stated earlier in this chapter, selecting a small-caps font doesn't change the characters. A text transform, on the other hand, does. Font-variant selects a font, but text-transform doesn't. There is still a connection between them, however.

The fact that small-caps relies on the availability of a small-caps font also means that it can fail if there is no such font available. For example, if the style sheet reads:

 P {   font-family: "Zapf Chancery", cursive;   font-variant: small-caps; }

the small-caps fails because the Zapf Chancery family doesn't have a small-caps variant. The browser may be able to synthesize one by taking the capitals and reducing them in height, but if it is not able to do that, it shows the P in all capitals instead, exactly as if the rule had read text-transform: uppercase. In other words, uppercase is a fall-back strategy for browsers that don't have access to small-caps fonts.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net