Text properties

Text Properties

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).

H1 { word-spacing: 0.4em }

Here, the word-spacing between each word in 'H1' elements would be increased by '1em'.

Note : Internet Explorer 4.0 does not support the word-spacing style sheet property.

letter-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 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).

BLOCKQUOTE { letter-spacing: 0.1em }

Here, the letter-spacing between each character in <BLOCKQUOTE> elements would be increased by '0.1em'.

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

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.

text-decoration
Value: none | [ underline || overline || line-through || blink ]
Initial: none
Applies to: all elements
Inherited: no, but 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></EM>'), 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.

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

The example above would underline the text of all links (i.e., all <A> elements with a HREF attribute), using various pseudo-classes.

Browsers must recognize the keyword 'blink', but are not required to support the blink effect.

The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:

baseline: align the baseline of the element (or the bottom, if the element doesn't have a baseline) with the baseline of the parent
middle: align the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent
sub: subscript the element
super: superscript the element
text-top: align the top of the element with the top of the parent element's font
text-bottom: align the bottom of the element with the bottom of the parent element's font

Another set of properties are relative to the formatted line that the element is a part of:

top: align the top of the element with the tallest element on the line
bottom: align the bottom of the element with the lowest element on the line

Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.

Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. E.g., a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.

It is expected that a future version of CSS will allow <length> as a value on this property.

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

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.

H1 { text-transform: uppercase }

The example above would put <H1> elements in uppercase text.

text-align
Value: left | right | center | justify
Initial: UA specific
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.

Example:

DIV.center { text-align: center }

Since 'text-align' 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.

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 that appears before the first formatted line. The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).

Example:

P { text-indent: 3em }

line-height
Value: normal | <number> | <length> | <percentage>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: relative to the font size of the element itself

The property sets the distance between two adjacent lines' baselines.

When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).

Negative values are not allowed.

The three rules in the example below have the same resultant line height:

DIV { line-height: 1.2; font-size: 10pt } /* number */ DIV { line-height: 1.2em; font-size: 10pt } /* length */ DIV { line-height: 120%; font-size: 10pt } /* percentage */

A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.