Text Decoration with CSS

Text decoration refers to the various treatments given to text to decorate it, such as underlining, giving the line style and colors, giving text shadows, and adding emphasis mark to characters. The properties used for these treatments are discussed here.

1. text-decoration

The text-decoration property is a non-inherited shorthand property used to specify the text fonnatting or the decoration to apply to a text. It allows you to specify lines, how to use them, the style and the color, all at once, in any order. Its effects always extend to all child elements of the element to which it is applied. For example, if it is applied to a element that contains a element, the element is also affected and the effects cannot be disabled. The longhand properties are text— decoration-line, text-decoration-style, and text-decoration-color. Table 14.9 lists the values supported by the text-decoration-line and Table 14.10 lists those supported by the text-decoration-style. Color value is specified for text-decoration-color in the same ways as described earlier in Chapter 9.

Figure 14.27 shows various ways the property is used and Figure 14.28 shows the result. The p.under{} rule specifies only type of line. The p.through{} rule specifies the line type, style, and color. Notice that the p.over{} rule specifies the same things, but in a different order. Notice also in p.overander{} that more than one type of line can be specified at once, along with style and color. As of time of writing, most browsers support only underline. Firefox supports all values except blink.

2. text-decoration-skip

The text-decoration-skip property is inherited and used to specify which parts of an element’s content the text decoration line affecting it must skip. It affects both the text decoration lines drawn by the element to which it is applied and those by the parents. So, for example, if text-decoration-line is applied to a element that contains a element to which text-decoration-line is also applied, then, if text-decoration- skip is applied to the element, both lines are affected. However, as of time of writing, most browsers do not yet support the property, so its effect cannot be demonstrated here, only illustrated. Table 14.11 lists the values supported, Figure 14.29 shows how the property is used, and Figure 14.30 illustrates the expected result. In the example, the rule says to underline the content of the element and text- decoration-skip says that the decoration line must skip all descenders. See Figure 13.1 in Chapter 13 for the meaning of a descender.

3. text-underline-position

The text-underline-position property is used to specify the position of an underline specified on the same element using the text-decoration property. It does not affect the underline specified by parent elements. It is inherited and takes the values in Table 14.12. As of time of writing, it is still unsupported by most browsers. Figure 14.31 shows how it is used and Figure 14.32 shows an illustration (not actual output) of what the property is intended to do.

4. text-emphasis

The text-emphasis property is a shorthand property that allows you to specify emphasis mark for each character of an element’s text content, except separators and control characters. The size of the mark is about 50 □ of the font-size of the text and may affect line spacing, depending on whether or not the current line spacing is enough for it. The property is especially useful when the text is in languages that use accent marks, such as Eastern Asian languages. The longhand properties are text- emphasis-style and text-emphasis-color. The text-emphasis property can be used to specify both. If one is missing, the initial value is used for it, which is no style for text-emphasis-style and current color for text-emphasis-color. All the properties are inherited. The value supported by text-emphasis-color is color, which can be specified in name, rgb(), rgba(), hsl(), hsla(), or hex codes, all of which were discussed in Chapter 9. The values supported by text-emphasis-style are listed in Table 14.13.

The third longhand property used in relation to emphasis marks is the text— emphasis-position, which cannot be specified with the shorthand text-emphasis property. It is inherited and used to specify where to draw emphasis marks. The values supported are over (which positions the mark over text), under (which- positions it under text), right (which positions it to the right of text in vertical writing mode), and left (which positions it to the left). As of time of writing, only Chrome, Opera, and Safari support the text-emphasis properties with -webkit-. Figures 14.33 and 14.34 show how the properties are used and the result in the Chrome browser.

In the example, the element is used to isolate the Chinese text so that necessary language infonnation can be provided about it. The element is used to isolate two of the Chinese glyphs for emphasis styling. The em:lang(zh){} rule applies to the content of the element that has a lang attribute of “zh” that affects it. These are the two Chinese glyphs. The rule says to make their font style normal (this removes any style applied by the element, which is typically italic), use a red dot for emphasis, and place it above each of them. Note that instead of using the dot keyword, the mark can also be specified using a backward slash and its Unicode as the <string> value, thus: ‘\2022’, so that the declaration becomes: -webkit-text- emphasis: ‘\2022’ red;. How to use Unicode codes to display characters with HTML can be found in Chapter 3. Note that the Chinese text was generated using Google Translate, and then copied and pasted into the code.

5. text-shadow

The text-shadow property is inherited and used to add shadows to the text. It takes comma-separated sets of values, each of which specifies the settings for a shadow. A set comprises four values: the first two specify the x and y coordinates of the shadow offset, the third the radius of the blur effect (which is optional and 0 by default), and the fourth the color of the shadow, which also supports transparency (RGBA). Positive x-y coordinates values move the shadow right and downward. Figure 14.35 shows how the property is used and Figure 14.36 the effect.

In the example, the p{} rule makes the paragraphs 24px to make them more legible. The ,shadow{} rule specifies two sets of values. The first one says to position the shadow at lpx down and lpx right from the top-left comer of the box of the element of class=“shadow”, make the radius of the blur effect 2px, and the color gray.

You should notice from the challenge that shadows tend to compromise legibility. For this reason, adding shadows to the text should be avoided for a lot of text content. On the other hand, adding shadows to a very short text, such as to the label of a button or icon, can help produce interesting visual effects, such as embossed effect, that would otherwise require lengthy processes to produce with graphics tools, which also produce larger image files that can compromise page download and rendering speed. Figure 14.37 shows an example of how the text-shadow property is used in creating button effects and Figure 14.38 shows the result. Notice that various other properties that have already been introduced in this chapter and previous ones are also used to give the text and its box character.