What is the use of unpopular text-emphasis?

Generally speaking, the pages we make are not for literary users, so it is unlikely that they will come into contact with the symbol "emphasis". If you are familiar with word, you should know that there is a text setting in word, which is to set the "emphasis number".

There is no word in the computer, so I searched for one from Baidu. Anyway, this is probably the effect.

Then the CSS property to be mentioned in this article is the attribute of this "emphasis number". We can set the text "emphasis number" style text-emphasis This is text-emphasis-color and text-emphasis-style , that is to say, we can set the character style and color of "emphasis" at the same time text-emphasis

p {
    -webkit-text-emphasis: dot red;
    text-emphasis: dot red;
}

Then you can see this effect.

As for whether or not this effect is seen in Word, I don't know this. Anyway, in the web page, we can not only modify the character style and color, but also modify the size and position of the highlighted symbol.

• text-emphasis-style has several attribute values, and can also enter any character ;
• text-emphasis-color can use the color value used in the regular web, rgba() , rgb() can be used;

And if you want to adjust the position, then you need to add an additional attribute text-emphasis-position . Although this attribute is very similar to style and color text-emphasis abbreviations of 060de732f02511. So for text-emphasis-position under normal circumstances, the positions we can control are on and under , that is:

• text-emphasis-position: over;
• text-emphasis-position: under;

If you want to know more, you can read the specific introduction in MDN, and I won't repeat it here. So according to the above, we modify the CSS part, like this:

p {
    -webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
}

Then the result is:

text-decoration: underline; it look like the underline 060de732f02702 of the text? Let's add one more attribute to see the effect.

p {
    -webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
    text-decoration: underline;
}

These two are different attributes, and there must be differences. The details are not detailed, and the main differences can also be seen through the document. What needs to be mentioned here is that text-decoration attribute value is set to the underline style in the parent, then the child is set to overline , and two line styles will exist, even if the value text-decoration-style

When we changed the attribute value of text-emphasis At the same time, if we color of the "emphasis" will inherit the element's own text color . Because you can set the color values, so we also can use transparent directly element is transparent .

When it comes to inheritance, there is one point to note here "emphasis" is about half of the normal text .

Recall the points mentioned earlier:

• You can enter any character;
• If the color is not set, the color value of the element itself will be inherited, and it can also be set to transparent;
• The size of "emphasis" is about half of normal text;

Combining these points, we can play like this.

There are some places where there is no "emphasis", some are blank or special characters, some are random input, and some are deliberate. I mainly want to see the display of "emphasis" in the case of some special characters.

• will only display one character , regardless of whether the character is a full-width or half-width character, or even an emoji special character;
• "emphasis" on visible text characters;

Then the code for this effect is:

<p>文本内容，<span>一个 span 元素</span><em>是　em&nbsp;&yen;&#67;元素哦</em>，啊啊啊……</p>

p {
    width: 320px;
    font-size: 32px;
    -webkit-text-emphasis: '啊' rgba(255, 0, 0, .2);
}
p em {
    font-size: 64px;
    -webkit-text-emphasis-color: blue;
}
p span {
    color: green;
    -webkit-text-emphasis: '🔥';
    -webkit-text-emphasis-position: under;
}

So that's the end of this content? No, there is one more thing I want to say. As you can see from the above renderings, the "emphasis number" is below or above the text, so for a normal text, the line height ( line-height ) is believed to be familiar to everyone. So what will be the effect after line-height the part with "emphasis number"?

line-height: 20px; added to p , no change is seen; and if you change 20px to 60px , there will be a change, and the height will be opened for a while; then it will be enlarged again, and the “emphasis number” will follow The text separates the upper and lower content.

On a whim, when line-height is relatively small, no effect is seen. Normally, text-emphasis , the relatively small line-height will cause multiple lines of content to overlap, like this:

But now with text-emphasis , there is no overlap. It seems to directly affect the line-height . It is necessary to ensure that the height value between multiple rows is at a certain value. It seems to be 1em in order to Yu can put a "emphasis number" that is half smaller than the normal text font-size , and must be kept a certain distance from the text content.

Back to the topic of "What's the use of the text-emphasis Yes, what's the use? Except that it normally indicates that a certain part of the text content is marked with emphasis, it seems that there is no use anymore. Unless we re-use this "emphasis number" feature to play, especially line-height will be opened to ensure that at least there 1em between multiple rows. So if we use a transparent color "emphasis", does it mean that this part of the text will never be superimposed?

Then combined with emoji or a combination of up and down disorder, will it play a different sky?

Thinking about it back, a good "emphasis number", let it do its own thing, use it to mark the text to emphasize the explanation, or not to play.