Friday, March 29, 2024

A Peek Inside the CSS Text Decoration Specification

Text decoration is defined as decorating the glyphs of the text once typeset according to font and typographic rules.

CSS3 provides support for text decoration. This support comes in the form of underlines, text shadows and emphasis marks.

Earlier versions of the CSS specification for text decoration provides only very basic line decorations which were appropriate to Western typographical traditions.

When the line decorations are specified on a inline box, that box becomes a decorating box which would apply the decoration to all its fragments.

 

Let us now look at the various CSS3 properties to support text decoration.

 

text-decoration-line

This property specifies what line decorations are needed to an element. Valid values are:

none – Does not produce or stop text decoration

underline – all text is underlined

overline – the text has a line over it.

line-through – Each line of text has a line through the middle

blink – the text will blink.

 

text-decoration-color

This property specifies color of text decoration set on an element. Acceptable value is any valid  ‘color’ value.

 

text-decoration-style

This property specifies the style of the line which is drawn. Valid values are: solid, double, dotted, dashed and wavy.

 

text-decoration

This is a shorthand to setting text-decoration-line, text-decoration-color and text-decoration-style.

 

text-decoration-skip

This property specifies the part of the element that the text decoration effect will not apply to. Valid values are:

  • none – This means no part of the element is skipped.
  • objects –  This value will cause it to skip the element if it is an image or inline-block
  • spaces – This value will cause it to skip all spacing
  • ink – This value will cause it to skip over glyphs.

Other values are “edges”  and “box-decoration”.

 

text-underline-position

This property specifies the position of the underline on the element. Valid values are “auto”, “under”, “left”, and “right”.

 

text-emphasis-style

This property specifies the emphasis marks on the element’s text. Valid values are ‘none’, ‘filled’, ‘open’, ‘dot’, ‘circle’, ‘double-circle’, ‘triangle’, and ‘sesame’.

 

text-emphasis-color

This property specifies the color of the emphasis marks on the element’s text. All valid colors are acceptable values.

 

text-emphasis-position

This property specifies the position of the emphasis marks on the element’s text. The valid values are ‘over’, ‘under’, ‘right’, and ‘left’.

 

text-shadow

The property is used to specify shadow effect to be applied to the text of the element.

 

Example of text decoration

<!DOCTYPE html>

<html><head>

<meta charset=”utf-8″>

<style>

span{

     text-emphasis-style: filled dot;

}

</style>

</head>

<body>

<p>We expect a dot above every single character of ” sample”.</p>

<div><span>sample</span></div>

</body></html>

 

Summary

In this article, we learned about CSS3 text decoration module. I hope you found this information useful.

 

About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508

 

References

http://www.w3.org/TR/css-text-decor-3/

 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured