CSS3: Working with text-decoration properties

By Ryan Boudreaux

Takeaway: Ryan Boudreaux shows some examples of the CSS3 text-decoration properties and different ways of styling text.

This segment of the CSS3 series will review several of the text-decoration styling properties. The text-decoration specification is included within the CSS Text Level 3 specification, and includes properties for lines, color, style, shorthand, line continuity, underline position, and emphasis. This segment will cover several but not all of the text-decoration styles available for use in most modern browsers today, and some that are only available in Mozilla Firefox.

Text-decoration

The W3C specifications on text-decoration provide several means of applying styles to text, including the following:

• Line Decoration: Underline, Overline, and Strike-Through
• Color
• Style
• Shorthand property
• Line Continuity
• Underline Position
• Emphasis Mark Style, Color, Shorthand, Position, and Skip
• Text Shadow Properties

Mozilla Firefox is the only browser offering support for the new CSS3 text-decoration properties when using the -moz- prefix before any styling declarations.

Line decoration

Line decorations specify what line styles if any are added to the element and the syntax is expressed in the form along with the following value options as described in the specification and presented below:

Syntax example:

p {text-decoration-line: underline;}

Available values and their descriptions:

Value	Description
None (default value)	Neither produces nor inhibits text decoration.
Underline	Each line of text is underlined.
No-underline	Inhibits propagated underlines.
Replace-underline	Inhibits propagated underlines and produces an underline.
Overline	Each line of text has a line above it (i.e. on the opposite side from an underline).
No-overline	Inhibits propagated overlines.
Replace-overline	Inhibits propagated overlines and produces an overline.
Line-through	Each line of text has a line through the middle.
No-line-through	Inhibits propagated line-throughs.
Replace-line-through	Inhibits propagated line-throughs and produces a line-through.
Remove-all	Inhibits all propagated text decorations.

According to the line decoration specification the underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing), while margins, borders, and padding are skipped. Elements containing no text, such as images, are likewise not decorated. And when specified on or propagated to an inline box, such decoration affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline element. When specified on or propagated to a block container that establishes an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements, the decorations are propagated to any in-flow children.

The example below demonstrates the use of text-decoration with the following styles:

p {

      font-size: 16px;

      font-family: Arial, Helvetica, sans-serif;

      font-style: normal;

      margin-left: 100px;

      width: 500px;

      border: solid #666666;

      padding: 5px;

}

article {

      text-decoration: underline; color: #0066FF;

}

em {

      display:block;

}

span.green_text {

      color:#336600;

}

And this HTML document snippet:

 <article>

      <p>

      <span>

        The article element is propagated to an anonymous inline element that surrounds the span element causing the text to be blue along with the blue underlining from the anonymous inline underneath it.<br /><br />

            <em>The color is being taken from the article element. The em block is also underlined as it is in an in-flow block to which the underline is propagated. The final line of text is green, but the underline underneath it is still the blue underline from the anonymous inline element.</em><br /><br />

            <span class="green_text">The text color is green!</span>

      </p>

 </article>

Figure A shows the result of the text-decoration underline example as displayed in both Chrome 14.0 and Firefox 7.01:

Figure A

The specification goes on to state that 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. The 'visibility' property, filters, and other graphical transformations likewise affect text decorations as part of the text they're drawn on, even if the decorations were specified on an ancestor element.

Here's an example of the text-decoration-line property styling with the overline value and using the moz prefix:

.text_decoration_overline {

      -moz-text-decoration-line: overline;

}

Figure B shows the result as displayed in Firefox 7.01:

Figure B

Text-decoration-color

According to the specification, the text-decoration-color property specifies the color of text decoration (underlines, overlines, and line-throughs) set on the element with text-decoration-line, and any computed color value is applied. An example of the text-decoration-color property in use is displayed below.

Text-decoration-style

The text-decoration style property specifies the style of the line(s) drawn for text decoration specified on the element. Values have the same meaning as for the border-style properties. The values available for the text-decoration-style are: solid, double, dotted, dashed, and wavy.

The following CSS3 declaration:

.snazzy {

    -moz-text-decoration-line: underline;

    -moz-text-decoration-style: double;

    -moz-text-decoration-color: green;

}

Figure C shows the result as displayed in Firefox 7.01:

Figure C