CSS text-decoration family (not just for underlining links)

When you want to study the formerly simple CSS properties, you may be surprised by its sturdiness (and for some, too much of complexity). That’s what happened to me with the feature text-decoration.

But let’s take it pragmatically, as a manual for this group of features. I will issue the latest CSS specifications for text decoration.

The list of properties

Yes, the text-decoration family of properties is all about underlining the links, but the family as such can be used for a lot of other letter decorations - it is useful for authors of various text editors, revisers, authors of technical or chemical texts and so on.

First, let’s take a look at these properties:

• text-decoration
• text-decoration-line
• text-decoration-style
• text-decoration-color
• text-decoration-skip-ink
• text-underline-position
• text-underline-offset
• text-decoration-width & text-decoration-thickness
• text-emphasis

Not always do these features have full support in web browsers. The outdated Internet Explorer is practically always out of the picture, but some of the features are not supported even by the modern web browsers. You’ll see.

text-decoration – the main shortcut (and the main issue)

The attribute that is the shortcut for the 3 features below, according to the latest specifications.

text-decoration:

<'text-decoration-line'> ||
<'text-decoration-style'> ||
<'text-decoration-color'>

For example:

/* Underlined text: */
text-decoration: underline;

/* Dotted underline text: */
text-decoration: dotted underline;

/* Nothing, because we didn't define text-decoration-line: */
text-decoration: dotted;

At this point, it is suitable to mention that the specification has one finished level (the well known CSS2) and at the same time two updates in progress - CSS Text Decoration Module Level 3 and CSS Text Decoration Module Level 4.

And there is a difference in the record style of text-decoration when it comes to CSS2 and new modules. Originally it was a common feature, now it’s a shortcut of more features.

This difference translates to the implementation by different web browsers. While Firefox, Chrome and its sub browsers accept text-decoration “in a new way” as a shortcut, Safari and Explorer understand it “in the old way” as an individual feature.

So, if we want to do a green dotted underlined link differently than the usual way (but not the correct one) with the feature border, this is not how it’s gonna work:

.shorthand a {
  text-decoration: dotted green underline;
}

In Explorer, we can do nothing with it (which is not that big of an issue with the decreasing support), but in Safari we can save the situation by mentioning the individual features:

.individuals a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: green;
}

CodePen: cdpn.io/e/abzPKNB

The main issue can be solved then. So let’s take a look at the individual features designed for text decoration.

Figure: Matrix of properties for text decoration and possible values according to CSS Text Decoration Level 3.

text-decoration-line – types of decorative underlines

It tells us what type of underline will be used.

Possible values:

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

In the central Europe you probably want to often use the underline option. The blinking value blink is considered old-fashioned and the modern web browsers do not support it. Thank God.

The notation with blocky brackets and logical operator marks or (||), which I took from the specification, says that it is possible to use multiple values, for example <code>text-decoration-line: underline overline<em>.</em></code> The value line-through is set in HTML values in default styles of web browsers <s>, <strike> or <del>.

This feature has full support when we leave out the value blink.

text-decoration-style – underline style

It sets the text decoration style - for example, one line, double line, dotted line or wavy line:

text-decoration-style: 
  solid | double | dotted | dashed | wavy

It is used only at the time and only if some of them are defined text-decoration-line.</em>

The value wavy is cool, for example for highlighting the mistakes in words.

This feature has full support in modern web browsers.

text-decoration-color – the color of decoration

The color that we use for decoration. It could be the current color or any color of your choice.

text-decoration-color: <color>

<color> could be current color or any color of your choice.

This is something that all modern web browsers can do.

Let’s look at the features in the latest CSS specification for text decoration.

Figure: The latest CSS Text Decoration Level 4 features that won’t work everywhere.

text-decoration-skip-ink – to prevent line crossing

The feature that specifies if the decoration line will be in punctuated, so there wouldn’t be any crossings with the text curves.

text-decoration-skip-ink: auto | none

In the default styles of modern web browsers there is a setting text-decoration-skip-ink:auto, so usually we don’t have to deal with this. Just in case that we would like to turn it off. But I have no clue why would we do this in common situations.

Originally it used to work in the specification as text-decoration-skip, but now the feature has been deleted - it will be divided into more sub-features.

This feature has full support in modern web browsers.

text-underline-position – the position of decorative line

Where the decorative line appears:

text-underline-position: auto |
  [ under || [ left | right ] ]

The values left and right are meant for Asian languages, that are noted down vertically (Chinese, Japanese, Korean,…)

For us, the value under is interesting, it will issue the underline under the letter outline (the part of a letter that goes down under the usual line such as p, y or j).

It is recommended to use this in mathematical or chemical texts so that the decorative line wouldn’t interrupt the numbers in lower indexes.

This feature is not supported by Safari.

text-underline-offset – the offset of decoration

It defines the shift of decoration line from its original position:

text-underline-offset: auto | <width>

It acts differently according to text-underline-position. When it comes to underline the movement goes down, but with overline the movement goes up.

The value width is recommended to use in em unit, so it would adapt to the size of the text.

This feature is supported by Safari and Firefox, but not Chrome.

text-decoration-width & text-decoration-thickness – the width of decoration line

To set the width of decoration line, we have two properties:

text-decoration-width: auto | <width>;
text-decoration-thickness: auto | <width>;

While:

• text-decoration-width is standard according to CSS Text Decoration Module Level 4, but no browser can actually do it.
• text-decoration-thickness is not that standard. However, it is supported by Safari and Firefox, but not by Chrome. If you would like to try this, <width> is recommended again in em to adapt to the size of the text.

text-emphasis – the position of emphasis (not interesting for Western countries)

This shortcut of features is helpful only for east-asian and other exotic languages again, that is why I will not explain it any further. It draws the accent dot above, under or next to the text.

These features belong here: text-emphasis-style, text-emphasis-color, text-emphasis-position and text-emphasis.

The order of rendering

Since we got more CSS features that decorate the text, it’s good to know the order of their depiction. We’ll look at them in order from those that render from the bottom, shades, upward.

• shades (property text-shadow)
• underline (feature text-decoration-line)
• overlines (feature text-decoration-line)
• text itself
• emphasis marks (feature text-emphasis)
• line-through (feature text-decoration-line)

According to this list, the browser will solve the conflicts in the depiction of text curves and its decorations.

Example with all of the features

In the final CodePen we will sum up all the features and their support in web browsers in an overview table:

CodePen: cdpn.io/e/zYxMKJB

As you can see, in the current version of CSS even the usual text decorations can be quite a challenge.