23 July 2009

Text-decoration for CSS

CSS Text-decoration is not often used in content. My, myself and I do not use it much. At most I'll underline links and such. Never use blink, nuf said.

Zendweaves CSS text-decoration

Here's the spec:

'text-decoration'
    Value:    none | [ underline || overline || line-through || blink ] | 

inherit
    Initial:    none
    Applies to:   all elements
    Inherited:   no (see prose)
    Percentages:   N/A
    Media:    visual
    Computed value:   as specified

This property describes decorations that are added to the text of an element using the 

element's color. When specified on an inline element, it affects all the boxes generated 

by that element; for all other elements, the decorations are propagated to an anonymous 

inline box that wraps all the in-flow inline children of the element, and to any block-

level in-flow descendants. It is not, however, further propagated to floating and 

absolutely positioned descendants, nor to the contents of 'inline-table' and 'inline-

block' descendants.

Underlines, overlines, and line-throughs are applied only to text (including white space, 

letter spacing, and word spacing): margins, borders, and padding are skipped. If an 

element contains no text, user agents must refrain from rendering these text decorations 

on the element. For example, images will not be underlined.

The 'text-decoration' property on descendant elements cannot have any effect on the 

decoration of the ancestor. In determining the position of and thickness of text 

decoration lines, user agents may consider the font sizes of and dominant baselines of 

descendants, but must use the same baseline and thickness on each line. Relatively 

positioning a descendant moves all text decorations affecting it along with the 

descendant's text; it does not affect calculation of the decoration's initial position on 

that line.

Values have the following meanings:

none
    Produces no text decoration.
underline
    Each line of text is underlined.
overline
    Each line of text has a line above it.
line-through
    Each line of text has a line through the middle.
blink
    Text blinks (alternates between visible and invisible)

There's not much more to say. All I can think of is to use line-through instead of the 'del' tag.

Take care
Tjorriemorrie

No comments:

Post a Comment