Implementation code for using CSS text-emphasis to emphasize text

1. Introduction

In the past, if you wanted to emphasize a certain part of the text, you usually did it by making it bold or using a bright color. Now there is a new option, which is to use text-emphasis attribute for emphasis decoration.

There are 4 CSS properties in text-emphasis family, namely:

• text-emphasis
• text-emphasis-color
• text-emphasis-style
• text-emphasis-position

Among them, text-emphasis is the abbreviation of the two CSS properties text-emphasis-color and text-emphasis-style Note that it does not include text-emphasis-position text-emphasis-position property, which is independent.

2. Details

1. text-emphasis-color

text-emphasis-color , and the initial value is the color of the current text.

2. text-emphasis-style

There are three main types of text-emphasis-style syntax:

text-emphasis-style: none
text-emphasis-style: [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ]
text-emphasis-style: <string>

in:

text-emphasis-style:none is the default declaration, meaning no emphasis decoration.

text-emphasis-style:<string> means using any single character as an emphasis decorator. For example, using the heart character:

Baby, <span class="emphasis">love you</span>, <span class="emphasis">heart</span>!

.emphasis {
    -webkit-text-emphasis-style: '❤';
    text-emphasis-style: '❤';
}

The effect is shown in the figure below. You can see that a heart character appears above the corresponding text (because the Emoji font is applied, the Emoji character is displayed).

Here are a few details to share with you:

The font size of the emphasis decorator displayed is half the font size of the main text content. For example, if the text is 16px in size, the size of the emphasis character above is 8px . Therefore, if the font size is not very large, try not to use characters with complex shapes and small character areas, such as asterisks "*" and pound signs "#", because they will be shrunk into a ball on ordinary display devices and users will not be able to tell what characters they are. If the line height is not very high, the emphasis decorator will automatically increase the height occupied by the current line. The distance between the emphasis decorator and the main text cannot be adjusted by setting properties such as line height. The size of the distance is mainly determined by the font.

If multiple characters are specified, only the first character will be used as the emphasis modifier. For example:

text-emphasis-style: 'CSS New World';

is equivalent to:

text-emphasis-style: 'C';

Finally, let’s take a look at the built-in decorative character effects of text-emphasis-style , they are dot , circle , double-circle , triangle , and sesame .

Each decorator has two types of characters: filled and hollow, which are determined by the two keywords filled and open .

For example:

/* Solid dot */
text-emphasis: filled dot;
/*Hollow dot*/
text-emphasis: open dot;

Since built-in characters are solid by default, text-emphasis:filled dot has the same effect as text-emphasis:dot .

If text-emphasis-style attribute value is only filled or open , dot will be used as the emphasis decorator. For example:

/* Equivalent to text-emphasis: filled dot */
text-emphasis: filled;
/* Equivalent to text-emphasis: open dot */
text-emphasis: open;

As for the specific effects of each decorative symbol, I (Zhang Xinxu) specially made a table for your convenience. See the table below for details.

The font size of each emphasis decorator is greatly affected by the font. You can choose to use the appropriate emphasis decorator according to the actual scenario.

3. Text-emphasis-position

text-emphasis-position property is used to specify the position of the emphasis decorator. The default position is above the main text. We can specify that the emphasis decorator is below the main text, or we can specify whether the emphasis decorator is on the left or right side when the text is arranged vertically.

The syntax is as follows:

text-emphasis-position: [ over | under ] && [ right | left ]

Usage instructions:

text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

The initial value of text-emphasis-position is over right . right positioning appears when the text is arranged vertically, for example, when writing-mode:vertical-rl is set, you can see the emphasis decorator on the right side, as shown in the figure below.

text-emphasis-position property is still very commonly used in Chinese scenarios, because Chinese people tend to set characters that indicate emphasis at the bottom, which is different from East Asian languages ​​such as Japanese and Korean.

Therefore, to emphasize Chinese content, in addition to setting the emphasis decorator, you also need to set the position of the emphasis decorator to the bottom, for example:

.chinese-emphasis {
    -webkit-text-emphasis: dot;
    text-emphasis: dot;
    -webkit-text-emphasis-position: under right;
    text-emphasis-position: under right;
}

Here is a small detail. In Chrome browser, text-emphasis-position attribute can only set the vertical position value, without setting the horizontal position value. For example, the following syntax can also be recognized by Chrome browser:

-webkit-text-emphasis-position: under;

However, please note that this approach of the Chrome browser is actually wrong and does not conform to the specification description. The specification requires that text-emphasis-position attribute value must include both horizontal and vertical positions. Therefore, it is recommended that you set both values ​​at the same time.

-webkit-text-emphasis-position: under right;

4. Text-emphasis

text-emphasis is the abbreviation of the two CSS properties text-emphasis-color and text-emphasis-style . Here is a usage guide:

text-emphasis: circle deepskyblue;

In terms of syntax and semantics, text-emphasis property is relatively simple and does not hide any details.

The only thing worth mentioning is that text-emphasis is an inherited attribute, that is, if the ancestor element sets the emphasis effect, the child elements will also apply it. This is completely different from text-decoration text-decoration , which is not inherited.

Another small difference is that text-emphasis property affects the height that text takes up, while text-decoration property does not.

3. Summary

I reviewed the projects I have experienced and found places where text-emphasis attribute was used, such as some text that needs to be emphasized in JS APIs or technical documents, as well as external help documents for company products. However, there seems to be no such demand for ordinary content display.

In short, the CSS text-emphasis property gives us a new option for emphasizing text content.

Finally, let’s show the browser compatibility of text-emphasis attribute, as shown below:

Summarize

This is the end of this article about using CSS text-emphasis to emphasize text. For more relevant CSS text-emphasis text decoration content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!