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 'text-align' property).
H1 { word-spacing: 1em }
Here, the word-spacing between each word in 'H1' elements would be
increased by '1em'.
CSS1 core: UAs may interpret any value of 'word-spacing' as
'normal
5.4.2 '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 UAs 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.
CSS1 core: UAs may interpret any value of 'letter-spacing' as
'normal'.
'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).
UAs must recognize the keyword 'blink', but are not required to support the
blink effect.
'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage> Initial: baseline Applies
to: inline elements Inherited: no Percentage values:
refer to the 'line-height' of the element itself
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.
CSS1 core: 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
'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.
CSS1 core: 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.
'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).
'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
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.
|
