Text Properties
| < Day Day Up > |
Text properties are used to affect the presentation, spacing, and layout of text. The basic properties enable the page designer to set text presentation such as decoration, indentation, word spacing, letter spacing, spacing between lines, horizontal and vertical text alignment, and the control of white space. Let's begin our discussion of these properties with a relatively unused CSS text property, text-transform , which enables designers to transform text case.
text-transform
The text-transform property determines the capitalization of the text that it affects. The possible values for this property are capitalize , uppercase , lowercase, and none , which is the default value. Note that the value capitalize will result in capitalizing every word. Here are some possible uses of the text-transform property:
p {text-transform: capitalize;} .upper {text-transform: uppercase;} .lower {text-transform: lower;} p.none {text-transform: none;} /* override the capitalize for some p tags */ text-decoration
The text-decoration property is used to define an effect on text. The standard values for this property include line-through , overline , underline , and none . The meaning of these values should be obvious, except for overline , which just creates a line above text. Some versions of Netscape browsers also have support for the blink value. The following examples show possible uses for this property:
.struck {text-decoration: line-through;} span.special {text-decoration: blink;} /* browser specific */ h1 {text-decoration: overline;} a {text-decoration: none;} #author {text-decoration: underline;} The text-decoration property often is used with the a element and link state pseudoclasses, which include a:link , a:active , a:visited, and a:hover to change presentation, in particular turning underlining off or on, as shown here:
a {text-decoration: none;} a:hover {text-decoration: underline;} word-spacing
The word-spacing property specifies the amount of space between words. The default value, normal , uses the browser's word-spacing default. Designers are free to specify the distance between words in a variety of measurements as previously discussed, including inches ( in ), centimeters ( cm ), millimeters ( mm ), points ( pt ), picas ( pc ), the em ( em ) measurement, x-height ( ex ), and pixels ( px ). A few examples are shown here:
body {word-spacing: 10pt;} p {font-size: 18pt; word-spacing: 1em;} | Note | This property is poorly supported, particularly in older CSS-aware browsers. |
letter-spacing
The letter-spacing property specifies the amount of space between letters . The default value, normal , uses the browser's letter-spacing default. Like the word-spacing property, a variety of measurements can be used to set word spacing, from pixels to em values. A few examples of this property are shown here:
p {letter-spacing: 0.2em;} body {letter-spacing: 2px;} .wide {letter-spacing: 10pt;} #Fun {letter-spacing: 2cm;} vertical-align
The vertical-align property controls the vertical positioning of text and images with respect to the baseline currently in effect. The possible values for the vertical-align property include baseline , sub , super , top , text-top , middle , bottom , text-bottom , and percentage values. Compare these values with the align attribute for the img element, as well as alignment options for table cells , and you should see a similarity. However, the flexibility of vertical alignment provided by style sheets enables designers to set element values on individual characters . When not specified, the default value of vertical-align is baseline . Here are a few examples:
p {vertical-align: text-top;} .superscript {vertical-align: super; font-size: smaller;} .subscript {vertical-align: sub; font-size: 75%;} Notice in the preceding example how vertical-align can be used with other properties to create an interesting contextual class such as .superscript . Given this flexibility, it is obvious why presentational tags such as <sub> and <sup> could be deprecated from strict variants of HTML and XHTML.
| Note | According to CSS1 specification, the vertical-align property is not inherited by enclosed elements, but testing reveals this not to be the case in most browsers. |
text-align
The text-align property determines how text in a block-level element, such as a <p> tag, is horizontally aligned. The allowed values for this property are left, which is the default, right , center , and justify . This property is used only on block level elements such as p in a similar manner to the align attributes from HTML. Be aware that setting a value of justify may not produce an eye-pleasing result when the font is very large as it might show the added spaces. A few examples are shown here:
p {text-align: justify;} div {text-align: center;} .goright {text-align: right;} text-indent
The text-indent property sets the indentation for text in the first line of a block-level element such as p . Its value can be given either as a length value ( .5cm , 15px , 12pt , and so on) or as a percentage of the width of the block, such as 10% . The default value for the property is , which indicates no indentation. A few examples of how text-indent might be used are shown here:
p {text-indent: 2em;} p.heavy {text-indent: 150px;} One interesting effect is the use of negative values to create a hanging indent, wherein the text within the block element expands outside of the box defined by the tag. The following rule creates a paragraph with a yellow background with a hanging indent 10 pixels to the left of the paragraph block:
p {text-indent: -10px; background-color: yellow;} Combining the hanging indent with a large first letter using the pseudoclass :first-letter for the paragraph element creates an interesting initial-cap effect.
line-height
The line-height property sets the height between lines in a block-level element, such as a paragraph. The basic idea is to set the line spacing, known typographically as leading . The value of the attribute can be specified as a number of lines ( 1.4 ), a length ( 14pt ), or as a percentage of the line height ( 200% ). So, double spacing could be written as
p.double {line-height: 2;} as well as
p.double2 {line-height: 200%;} Other examples of using line-height are shown here:
p {font-size: 12pt; line-height: 18pt;} p.carson {font-size: 24pt; line-height: 6pt;} Notice in the second example how the line-height property is much smaller than the font-size property. A browser generally should render the text on top of the other text, creating a hard-to-read, but potentially "cool" effect.
white-space
The white-space property controls how spaces, tabs, and newline characters are handled in an element. The default value, normal , collapses white space characters into a single space and automatically wraps lines, just as in an HTML/XHTML document. When a value of pre is used for the property, white-space formatting is preserved, similar to how the <pre> tag works in XHTML. The nowrap value prevents lines from wrapping if they exceed the element's content width. This example shows how the white-space property would be used to simulate the <pre> element:
p.pre {white-space: pre;} .nowrap {white-space: nowrap;} | Note | The white-space property is not supported well by older CSS-aware browsers. |
A complete example showing the HTML and cascading style sheet markup for text properties previously presented is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> CSS Text Properties Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- /* letter and word spacing */ .letterspaced {letter-spacing: 10pt;} .wordspaced {word-spacing: 20px;} /* vertical alignment examples */ .sub {vertical-align: sub;} .super {vertical-align: super;} /* text alignment properties */ .right {text-align: right;} .left {text-align: left;} .justify {text-align: justify;} .center {text-align: center;} /* indentation and line-height examples */ p.indent {text-indent: 20px; line-height: 200%;} p.negindent {text-indent: -10px; background-color: yellow;} #bigchar {background-color: red; color: white; font-size: 28pt; font-family: Impact;} p.carson {font-size: 12pt; font-family: Courier; letter-spacing: 4pt; line-height: 5pt;} /* text transformation properties */ .uppercase {text-transform: uppercase;} .lowercase {text-transform: lowercase;} .capitalize {text-transform: capitalize;} /* text-decoration properties */ .underline {text-decoration: underline;} .blink {text-decoration: blink;} .line-through {text-decoration: line-through;} .overline {text-decoration: overline;} /* white space control */ .normal {white-space: normal;} .pre {white-space: pre;} .nowrap {white-space: nowrap;} --> </style> </head> <body> <h2> Letter Spacing and Vertical Alignment </h2> <p> This is a paragraph of text. <span class="letterspaced"> Spacing letters is possible </span> and so <span class="wordspaced"> should word spacing. Alas, it is not always supported! </span></p> <p> Vertical alignment can be used to make <span class="sub"> Subscript </span> and <span class="super"> Superscript </span> text, but the common use of the property is for aligning text next to images. </p> <h2> Alignment </h2> <p class="left"> Align a paragraph to the left as normal. </p> <p class="right"> Align paragraphs to the right as we did in HTML. </p> <p class="justify"> You can even set the justification of text so that it is aligned on both the left and the right side. You need to be careful with this so that you don't get rivers of white space running through your paragraphs. </p> <p class="center"> Text can of course also be centered. </p> <h2> Indentation and Line Height </h2> <p class="indent"> With style sheets it is possible to set indentation as well as line height. Now double spacing is a reality. This is just dummy text to show the effects of the indentation and spacing. This is just dummy text to show the effects of the indentation and spacing. </p> <p class="negindent"><span id="bigchar"> T </span> his is another paragraph that has negative indenting. Notice how you can pull a character outside the paragraph for interesting effects. This is just dummy text to show the effect of the indent. This is just dummy text to show the effect of the indent. </p> <h2> Surf Gun </h2> <p class="carson"> Don't get carried away with your newfound powers. You may be tempted to show how cool you can be using text on top of other text. While this may be good for certain situations, it may also confuse the viewer. </p> <h2> Text Transformation </h2> <p> The next bit of text is transformed <span class="uppercase"> to all uppercase. </span> <br /> The next bit of text is transformed <span class="lowercase"> To All Lowercase. </span> <br /><span class="capitalize"> This text is all capitalized. It doesn't do what you think, does it? </span></p> <h2> Text Decoration </h2> This text should <span class="blink"> blink under Netscape. </span> <br /><br /> This text should be <span class="underline"> underlined. </span> <br /><br /> This text should be <span class="line-through"> struck .</span> <br /><br /> This text should be <span class="overline"> overline .</span> <br /><br /> <h2> White Space Control </h2> <p class="normal"> This text controls space normally like HTML; it condenses all spaces and returns to a single character. </p> <p class="pre"> This paragraph preserves any S P E C I A L spacing. </p> <p class="nowrap"> This paragraph does not wrap at all and keeps going and going and going and going to the right until I stop typing. </p> </body> </html> The rendering of the text properties example is shown in Figure 10-6.
Figure 10-6: Rendering of text properties under Mozilla
| < Day Day Up > |
EAN: 2147483647
Pages: 252