Style Sheets Properties Guide
=Text Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

word-spacing | letter-spacing | text-decoration | vertical-align
text-transform | text-align | text-indent | line-height
Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Style Sheet text properties control the appearance and layout of a section of text. Many of the Physical Character Formatting tags have been absorbed into this functionality.


word-spacing [ IE | N ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: Yes
Default Value: normal
What Is It?
This property controls the space between words in a given section. The justify value to the align property may influence the effects of this property.
Example
Ext/Doc: h5.xwide { word-spacing: 0.4em }
In-Line:  <h5 STYLE="word-spacing: 0.4em">this is a test</h5>
Allowed
Values
 Value
Type
 Browser
Support
 Description
normal explicit IE | N This value specifies that the browser default word spacing will be used.
[length] calculated IE | N The length value is an amount in addition to the browser default space between words. Any of the standard Length Units may be used. Negative values are allowed, but browsers may have limits to behavior in such situations.


letter-spacing [ IE4B1 | N ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: Yes
Default Value: normal
What Is It?
This property controls the space between letters in a given section. The justify value to the align property may influence the effects of this property.
Example
Ext/Doc: h5.close { letter-spacing: 0.1cm }
In-Line:  <h5 STYLE="letter-spacing: 0.1cm">This is a test</h5>
Allowed
Values
 Value
Type
 Browser
Support
 Description
normal explicit IE4B1 | N This value specifies that the browser default letter spacing will be used.
[length] calculated IE4B1 | N The length value is an amount in addition to the browser default space between letters. Any of the standard Length Units may be used. Negative values are allowed, but browsers may have limits to behavior in such situations.


text-decoration [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <u> | <s> | <strike> | <blink>
Inherit From Parent: No, but Child elements should match the Parent.
Default Value: none
What Is It?
This property describes the appearance characteristics of text that are not specified with the 'font-style' and 'font-weight' properties. If the specified element/section contains no text (like the IMG tag) or is empty, this property has no effect. Browsers may treat unknown values as underline.
Example
Ext/Doc: strong { text-decoration: overline }
In-Line:  <strong STYLE="text-decoration: overline">this is a test</strong>
Browser Notes
- Netscape 4 Beta 2 This version has a default 'text-decoration' value of 'underline' - which makes the values of 'none' and 'overline' into underlined passages. The correct behavior occurs in subsequent releases.
Allowed
Values
 Value
Type
 Browser
Support
 Description
none explicit IE3B1 | N4B3 This adds no decoration to the section.
underline explicit IE3B1 | N4B2 The text in the section will be underlined.
overline explicit IE4B1 | N The text in the section should have a line at the top of the text.
line-through explicit IE3B1 | N4B2 The text in the section will have a line through the middle (strikethrough text.)
blink explicit IE | N4B2 The text in the section blinks.


vertical-align [ IE4B1 | N ]
Applicable Elements: In-line and replaced elements
HTML Equivalent: ALIGN attribute for IMG, APPLET, etc.
Inherit From Parent: No
Default Value: baseline
What Is It?
This property controls the vertical positioning of the element. The values for this property can be divided into two classes: values relative to the formatted line the element is a part of (top and bottom), and values relative to the parent element (baseline, middle, sub, super, text-top and text-bottom.)
Example
Ext/Doc: img.left { vertical-align: top }
In-Line:  <img STYLE="vertical align: top" SRC="image.gif" ALT="This is a stylish image">
Allowed
Values
 Value
Type
 Browser
Support
 Description
top | middle | bottom | baseline calculated IE4B1 | N top - Aligns the top of the element with the tallest element on the line.
middle - Aligns the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent.
bottom - Aligns the bottom of the element with the lowest element on the line.
baseline - Aligns the baseline of the element with the baseline of the parent.
text-top | text-bottom calculated IE4B1 | N text-top - Aligns the top of the element with the top of the parent element's font.
text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
sub | super calculated IE | N sub - Subscripts the element.
super - Superscripts the element.


text-transform [ IE4B1 | N4B2 ]
Applicable Elements: All
HTML Equivalent: NA
Inherit From Parent: Yes
Default Value: none
What Is It?
This property sets the casing style for a section of text.
Example
Ext/Doc: div { text-transform: capitalize }
In-Line:  <div STYLE="text-transform: capitalize">This is a capitalization test.</div>
Allowed
Values
 Value
Type
 Browser
Support
 Description
capitalize explicit IE4B1 | N4B2 Uppercases the first letter of every word.
uppercase explicit IE4B1 | N4B2 All text in the section is forced to upper case.
lowercase explicit IE4B1 | N4B2 All text in the section is forced to lower case.
none explicit IE4B1 | N4B2 No transforming is done. This neutralizes the inherited value.


text-align [ IE3B1 | N4B2 ]
Applicable Elements: Block Level Elements
HTML Equivalent: <center> | <p|hX|div ALIGN="value">
Inherit From Parent: Yes
Default Value: Browser dependent
What Is It?
This property details how text will be horizontally aligned within the Block Section.
Example
Ext/Doc: blockquote { text-align: justify }
In-Line:  <blockquote STYLE="text-align: justify">this blockquote text is justified</blockquote>
Allowed
Values
 Value
Type
 Browser
Support
 Description
left explicit IE3B1 | N4B2 Left aligns all text in the Block Section
right explicit IE3B1 | N4B2 Right aligns all text in the Block Section
center explicit IE3B1 | N4B2 Center aligns all text in the Block Section
justify explicit IE4B2 | N4B2 Applies text justification to all text in the Block Section. If the browser does not support this capability, left is typically used.


text-indent [ IE3B1 | N4B2 ]
Applicable Elements: Block Elements
HTML Equivalent: NA
Inherit From Parent: Yes
Default Value: 0
What Is It?
This property specifies the horizontal indent from the left side of the current parent Block Element for the first line in the current Block. The indent is only applied at the beginning of the block and not after any intervening line-breaking tags (like BR.)
Example
Ext/Doc: p { text-indent: 0.5in }
In-Line:  <p STYLE="text-indent: 0.5in">text</p>
Browser Notes
- Netscape 4 Beta 3 Nested elements each with text-indents reset the indentation level to '0' (flush left to the browser window in the cases I tried.)
Allowed
Values
 Value
Type
 Browser
Support
 Description
[length] calculated IE3B1 | N4B2 This is an absolute value to determine text indenting. Negative values are allowed, but browsers may have limits to behavior in such situations. Consult the Units Page for acceptable length unit systems.
[percentage] calculated IE3B1 | N4B3 This number is a multiplier used to determine the text-indent relative to the parent element's width.


line-height [ IE3 | N4B2 ]
Applicable Elements: All
HTML Equivalent: NA
Inherit From Parent: Yes
Default Value: normal
What Is It?
This property sets the distance between the baselines for two adjacent lines and only applies to Block-Level elements. Negative values are not allowed.
[NOTE: The 9-11-96 CSS1 spec changed the meta-category of 'line-height' from FONT to TEXT. I list it now under the TEXT umbrella, but the 'font' property still uses 'line-height' in its syntax as a shorthand, so the Property Index still lists it under FONT. -ed]
Example
Ext/Doc: div.test { line-height: 160%; font-size: 10pt }
In-Line:  <div STYLE="line-height: 160%; font-size: 10pt">text</div>
Browser Notes
- Netscape 4 Beta 2 & 3 This property does affect line-height, but extra space is inserted or taken from the top of the element, not equally from BOTH the top and bottom as it should be. Beta 2 tests suggest that it may have supported [number], [length], and [percentage], but due to bugs in Beta 2's unit measurements and a lack of support for modifying line-height relative to the current element, this was hard to verify. Beta 3 solves many of these unit measure problems, but not the distribution of space problems.
- Internet Explorer 3.x & 4 Beta 1 The spacing distribution problem mentioned for Netscape above also occurs in these versions. IE 4.0 Beta 2 fixes this and distributes line-height values equally on both top and bottom.
Allowed
Values
 Value
Type
 Browser
Support
 Description
normal explicit IE4B1 | N4B3 Sets the line height to a reasonable value relative to the element's font face. Browser dependent results.
[number] calculated IE3 | N4B3 This number is a multiplier to determine the line height as a factor of the current element font-size. To determine the line height from the [number], multiply the current element height by the [number]. Children elements will inherit the multiplying factor.
(ex: DIV { line-height: 1.2; font-size: 10pt} gives a line height of 10pt * 1.2 = 12pt.)
[length] calculated IE3 | N4B3 This value is also relative to the current font-size property, but is an absolute measurement instead of a scaling factor. Consult the Units Page for acceptable length unit systems.
[percentage] calculated IE3 | N4B3 This number is also a multiplier (like [number]) used to determine the line height as a factor of the current element font-size. To determine the line height from the [percentage], multiply the current element height by the [percentage]. Children elements will inherit the resultant value.


Boring Copyright Stuff....