15 Text

Contents

  1. Indentation: the 'text-indent' property
  2. Alignment: the 'alignment' property
  3. Decoration
    1. Underlining, over lining, striking, and blinking: the 'text-decoration' property
    2. Text shadows: the 'text-shadow' property
  4. Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties
  5. Case
    1. Capitalization: the 'text-transform' property
    2. Special first letter/first line
  6. White space: the 'white-space' property
  7. Generated text
  8. Automatic numbering
  9. Text in HTML
    1. Forcing a line break
The properties defined in the following sections affect the visual presentation of characters, spaces, words, and paragraphs.

15.1 Indentation: the 'text-indent' property

'text-indent'

Property name:'text-indent' 
Value:<length> | <percentage>
Initial:0
Applies to:block-level elements
Inherited:yes
Percentage values:refer to parent element's width

The property specifies the indentation of the first line of text relative to the horizontal edge of the element's content. The indentation forms a blank space between the edge of the content and the first character of the first line. The property does not apply directly to text in a child element, however it will apply through inheritance if the property is not explicitly declared for the child.

The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted when a line of text is broken by a child element (such as the BR element in HTML).

The following example causes a 3em text indent.

  P { text-indent: 3em }

15.2 Alignment: the 'alignment' property

'alignment'

Property name:'alignment' 
Value:left | right | center | justify
Initial:depends on user agent
Applies to:block-level elements
Inherited:yes
Percentage values:N/A

This property describes how text is aligned within the element. The actual justification algorithm used is UA and human-language dependent.

In this example, note that since 'alignment' inherits, all block-level elements inside the DIV element with 'class=center' will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.

  DIV.center { alignment: center }

UAs may treat 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.

15.3 Decoration

15.3.1 Underlining, over lining, striking, and blinking: the 'text-decoration' property

'text-decoration'

Property name:'text-decoration' 
Value:none | [ underline || overline || line-through || blink ]
Initial:none
Applies to:all elements
Inherited:no (see clarification below)
Percentage values:N/A

This property describes decorations that are added to the text of an element. If the element has no text (e.g., the IMG element in HTML) or is an empty element (e.g., EM in HTML), this property has no effect. A value of 'blink' causes the text to blink.

The color(s) required for the text decoration should be derived from the 'color' property value.

This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.

In the following example, all links are underlined (i.e., all 'A' elements with a 'HREF' attribute).

  A:link, A:visited, A:active { text-decoration: underline }

The value 'blink' causes the text to blink on output devices that can support blinking.

15.3.2 Text shadows: the 'text-shadow' property

'text-shadow'

Property name:'text-shadow' 
Value:none | <color> [, <color> ]*
Initial:none
Applies to:all
Inherited:No, but see clarification below
Percentage values:Indicate transparency

CSS2 allows authors to create text shadow effects with this property.

So, for example, the following rule:

  P { text-shadow: black }

creates a black text shadow down and to the right of the text.

Text shadows increase the size of an element's box.

[Editor's note: The remaining sections of the text shadow proposal were not clear enough to be translated. More explanation is required.]

15.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties

'letter-spacing'

Property name:'letter-spacing' 
Value:normal | <length> | auto
Initial:normal
Applies to:all elements
Inherited:yes
Percentage values:N/A

The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).

In this example, the letter-spacing between each character in BLOCKQUOTE elements is increased by '0.1em'.

  BLOCKQUOTE { letter-spacing: 0.1em }

With a value of 'normal', the UAs may change the space between letters to justify text. This will not happen if 'letter-spacing' is explicitly set to a <length> value, as in:

  BLOCKQUOTE { letter-spacing: 0 }
  BLOCKQUOTE { letter-spacing: 0cm }

When the resultant space between two letters is not the same as the default space, UAs should not use ligatures.

A value of 'auto' tells the user agent to adjust the spacing between letters so that the entire text of an element fits on one line. This value should only be used with special elements (e.g., headlines). See also the 'font-size' property for related 'auto' behavior.

UAs may interpret any value of 'letter-spacing' as 'normal'. See the section on conformance for more information.

'word-spacing'

Property name:'word-spacing' 
Value:normal | <length>
Initial:normal
Applies to:all elements
Inherited:yes
Percentage values:N/A

The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'align' property).

In this example, the word-spacing between each word in H1 elements is increased by '1em'.

  H1 { word-spacing: 1em }

UAs may interpret any value of 'word-spacing' as 'normal'. See the section on conformance for more information.

15.5 Case

15.5.1 Capitalization: the 'text-transform' property

'text-transform'

Property name:'text-transform' 
Value:capitalize | uppercase | lowercase | none
Initial:none
Applies to:all elements
Inherited:yes
Percentage values:N/A

The values of this property have the following meanings:

'capitalize'
uppercases the first character of each word
'uppercase'
uppercases all letters of the element
'lowercase'
lowercases all letters of the element
'none'
neutralizes inherited value.

The actual transformation in each case is human language dependent. See [RFC2070] for ways to find the language of an element.

UAs may ignore 'text-transform' (i.e., treat it as 'none') for characters that are not from the Latin-1 repertoire and for elements in languages for which the transformation is different from that specified by the case-conversion tables of [UNICODE].

In this example, all text in an H1 element is transformed to uppercase text.

  H1 { text-transform: uppercase }

15.5.2 Special first letter/first line

Please consult the sections on first line and first letter for information on specially formatting the first letter or line of a paragraph.

15.6 White space: the 'white-space' property

'white-space'

Property name:'white-space' 
Value:normal | pre | nowrap
Initial:normal
Applies to:block-level elements
Inherited:yes
Percentage values:N/A

This property declares how whitespace inside the element is handled: the 'normal' way (where whitespace is collapsed), as 'pre' (which behaves like the PRE element in HTML) or as 'nowrap' (where wrapping is done only through elements that force line breaks such as the BR element in HTML):

The following examples show what whitespace behavior is expected from the PRE and P elements in HTML.

  PRE { white-space: pre }
  P   { white-space: normal }

The initial value of 'white-space' is 'normal', but a UA will typically have default values for each element.

UAs may ignore the 'white-space' property in author's and reader's style sheets, and use the UA's default values instead. See the section on conformance for more information.

15.7 Generated text

This is a placeholder.

15.8 Automatic numbering

This is a placeholder.

15.9 Text in HTML

15.9.1 Forcing a line break

The current CSS2 properties and values cannot describe the behavior of the BR element; the BR element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS2-based formatters must treat BR specially.