Underlining Text – Now With Different Colors and More Effects

Typography is becoming increasingly more important in web design - especially since the introduction of web fonts. Underlining text, however, has always been a somewhat monotonous endeavor. Changing the color and style of the underlining was a complicated process. The expanded CSS3 attribute "text-decoration" now gives you additional wiggle room for the design of texts.

"text-decoration" With Additional Features

Until now, the attribute "text-decoration" only allowed you to define how a text should be underlined, or crossed out. The possible values were "underline", "overline", and "line-through". This matches the typical formatting as we know it from word processing. The fact that web designers have been looking for workarounds to underline text in different colors for a while now shows that these options are insufficient for web design. Often, a frame ("border-bottom") has been assigned to a text, instead of underlining it via "text-decoration". This allowed the user to influence color and stroke width. However, this approach does have downsides. Underlining via "border-bottom" is always a bit further away from the text than real underlining. [caption id="attachment_86636" align="alignnone" width="1024"] Text Underlined in a Different Color[/caption] Now, several features have been added to the CSS attribute "text-decoration," allowing users to define the underline color regardless of the text color. For that, there's the new attribute "text-decoration-color." All common CSS colors are allowed, as well as entries via "rgb()" and "rgba()".

Defining White Space for Underlinings

There's another new attribute: "text-decoration-skip." It lets you define when underlining should be interrupted. The value "ink" determines that descenders, like the lower case "g" and "j," are left out of the underline. This option should make a lot of web designers happy. The brutal crossing out of descenders by underlines is not a pleasant view, especially not for typographically passionate web designers and developers. [caption id="attachment_86638" align="alignnone" width="1024"] Underlined Text, With Left Out Descenders[/caption] The value "spaces" makes sure that punctuation marks and blanks are not underlined. This allows you to only apply the underline to words during enumerations. Inline-block-elements, like images within a text, are not underlined if the attribute has the value "objects." Additionally, the value "edges" defines the distance between the underlinings of two adjacent text elements.

Changing the Position of the Underlining

You also get to define the position of underlining - via "text-underline-position." Normally, it is on the level of the descenders. The value "under," however, makes sure that the line is displayed below the descenders. [caption id="attachment_86637" align="alignnone" width="1024"] Underlined Text With the Underline Below the Descenders[/caption] This placement makes sense when displaying mathematic formulas, for instance. This prevents subscript numbers from being covered by the underline, as it would render them unreadable.

Different Underline Styles

If a simple line is not enough for you, you can use "text-decoration-style" and choose from different styles for the display of the lines. While the value "solid" draws the usual regular line, "double" gives you the option to go for a double underline. [caption id="attachment_86639" align="alignnone" width="1024"] Underlining With a Wavy Line[/caption] For curved lines, set the attribute value to "wavy," and set it to "dotted" for dotted lines.

Tagging Underlines Via Shortcuts

As you already know it from many other attributes, there is also a short version for the new attributes, which are marked up via the old attribute "text-decoration." The previous use of "text-decoration," which only allowed for the underlining and crossing out, has been handed to the attribute "text-decoration-line," but it still works as a short form. Thus, the markup "text-decoration: underline" is the short form of "text-decoration-line: underline". You can also combine the values for "text-decoration-line", "text-decoration-style", and "text-decoration-color" in a short version: "text-decoration: underline wavy red". In this example, a curved line is used as the underlining.

Browser Support

The attribute "text-decoration-skip" is supported by Chrome and Safari, although Chrome only knows the values "ink" and "objects." "text-decoration-color" and "text-decoration-style" are also supported by Firefox. Currently, the attribute "text-decoration-position" is only supported by Chrome. Other browsers will surely follow suit soon. After all, typographic CSS attributes, as well as the trimming of texts, or their orientation towards other elements, have become integral parts of modern web design. Featured Image by Jack Moreh on Stockvault