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.
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.
This property specifies color of text decoration set on an element. Acceptable value is any valid ‘color’ value.
This property specifies the style of the line which is drawn. Valid values are: solid, double, dotted, dashed and wavy.
This is a shorthand to setting text-decoration-line, text-decoration-color and text-decoration-style.
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”.
This property specifies the position of the underline on the element. Valid values are “auto”, “under”, “left”, and “right”.
This property specifies the emphasis marks on the element’s text. Valid values are ‘none’, ‘filled’, ‘open’, ‘dot’, ‘circle’, ‘double-circle’, ‘triangle’, and ‘sesame’.
This property specifies the color of the emphasis marks on the element’s text. All valid colors are acceptable values.
This property specifies the position of the emphasis marks on the element’s text. The valid values are ‘over’, ‘under’, ‘right’, and ‘left’.
The property is used to specify shadow effect to be applied to the text of the element.
Example of text decoration
text-emphasis-style: filled dot;
<p>We expect a dot above every single character of " sample".</p>
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 email@example.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508