Shulou(Shulou.com)06/01 Report--

This article is about how css solves the problem of overlapping text and text-decoration:underline underscores. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. The problem of text-decoration:underline underlining

CSS text-decoration:underline can underline inline text, but if you have high requirements for detail, you will find that the underline is often mixed up with the bottom edge of Chinese text, and even traverses directly through English, making it look thinner and thinner.

Several of the lower edges of the picture above are just horizontal lines. As a result, we can see that it is basically impossible to tell who is who together, and it seems to have intensified when replaced with Microsoft yahaki font (see picture below):

Is there any way to make the underline not so close, or the text can be displayed completely and clearly?

Yes, there are many methods. One by one below, you can choose the appropriate technology according to your actual project needs.

Method 1: text-decoration-skip specifies the overlay relationship

In theory, use the following CSS:

A {text-decoration-skip: ink;}

The opportunity has an effect similar to the following:

Text-decoration-skip is a new property of CSS3 related to text-decoration, as well as many other new CSS3 text-decoration attributes, you can specify the type of underscore, and so on, as described in my previous article, "understanding the new features and features of CSS3 text-decoration."

It looks good, but unfortunately, even as 2017 approaches, browser support for this property is not optimistic, including big head Chrome browsers that are not currently supported.

Safari 8 + supports-webkit-text-decoration-skip with values none and skip (other values behave like none or skip)

Currently, Safari 8 + browsers support the text-decoration-skip attribute with a private prefix of-webkit-, and only support skip (default) and none. In other words, Safari 8 + browsers default to non-traversal but avoidance of text. This further eliminates the need for the text-decoration-skip attribute to appear in the CSS code. Therefore, although this method is the most original, but the time is not enough.

Method 2: use border-bottom attribute to simulate

Although inline elements do not support vertical margin attributes, they support vertical padding attributes and border attributes, and have no effect on the original layout positioning. Therefore, with padding, we can effectively adjust the distance between the bottom border and the bottom edge of the text to achieve the effect we want most, similar to the following CSS code:

A {text-decoration: none; border-bottom: 1px solid;}

The effect is similar to the following figure:

If you think the underscore of the border-bottom simulation is still too close to the text, we can use padding-bottom to spread the distance a little further, for example:

A {text-decoration: none; border-bottom: 1px solid; padding-bottom: 5px;}

The effect is similar to the following screenshot:

Seeing is believing, you can click here: border-bottom simulates underlined text without overlapping demo

Note that when using border-bottom to simulate underlining, border-color is the best default, so that the color color of the text will be used as the border color, so that when you hover the mouse, the underline will automatically change color with the text, similar to the effect shown below:

Another benefit of using border-bottom simulation is that we can also use dotted underscores:

A {text-decoration: none; border-bottom: 1px dashed;}

This strategy can be used for screenshots similar to the following actual project requirements:

Method 3: use box-shadow attribute to simulate

We can also use the CSS3 box-shadow attribute to simulate the underscore, as follows:

A {text-decoration: none; box-shadow: 0 1px;}

Similarly, it is recommended that the color value defaults and use the color value of the color property.

The effect is basically the same as that of border-bottom. The screenshot is as follows:

Seeing is believing, you can click here: box-shadow simulates the underlining effect demo.

The advantage of box-shadow over the border-bottom attribute is that even if we set the inline element to display:inline-block, the resulting underline will not affect the vertical alignment or layout, but if it is border-bottom, it will increase the size of the element, which may affect the arrangement of the element.

However, box-shadow also has some shortcomings: first, compatibility is supported by IE9+, and second, it can only be solid lines, not dashed lines.

Method 4: use background-image attribute to simulate

Is to use CSS3 gradients to draw solid or dashed background images.

The screenshot of the effect is as follows:

The relevant CSS code is as follows:

.solid {padding-bottom: 2px; background-image: linear-gradient (to top, currentColor, currentColor 1px, transparent 1px);} .dashed {padding-bottom: 2px; background: linear-gradient (to right, currentColor, currentColor 4px, transparent 4px) repeat-x 0 bottom/7px 1px;}

Because the background image is displayed in the original area, which is different from that outside the border-bottom or box-shadow area, the underscore is actually very close to the text, especially the letters below the baseline such as yqp. There are generally two processing methods, one is to add a white stroke to the text, similar to the following CSS:

A {text-shadow: 0 1px # fff, 0-1px # fff, 1px 0 # fff,-1px 0 # fff;}

The effect is similar to the following:

The second is to use padding-bottom to increase the visual height of inline elements. Therefore, both the upper solid line and the dashed line have the setting of padding-bottom:2px.

Seeing is believing, you can click here: background-image simulates the underlining effect demo.

By the way, I suddenly remember that the underline in demo uses the currentColor variable, but in Chrome browsers and IE browsers, when currentColor is used as the background image color value, when: hover changes the element's color color value, the background image color does not change, and the Firefox browser's performance is in line with expectations, so, if you use this method, you need to: hover, the background image is redrawn.

The advantage of using background-image drawing is that we have more flexible control over the style, for example, we can put lines behind the text, we can underline up and down, we control the looseness of dots, we can also use dots to represent dashes, we can even use radial gradients to draw wavy underlines, or even tilt the lines, and so on. The disadvantage is that IE10+ browsers only support it.

Method 5: use SVG filter to deal with

The HTML code related to the SVG filter is as follows:

The relevant CSS code is as follows:

A {- webkit-filter: url ('# svg-underline'); filter: url ('# svg-underline'); text-decoration: none;}

Then, the effect is similar to the following screenshot (taken from the Chrome browser):

It looks troublesome and verbose, hover discoloration needs additional processing, SVG filter compatibility is not optimistic, and IE does not support it now, so what's the point of this approach?

The significance lies in that you can achieve the real text-decoration-skip effect, that is, the position where the underline and the text overlap automatically passes under the text, and the vicinity is completely transparent. If you take a closer look at the screenshot above, you can see that where the text touches the underline, there seems to be a 1-pixel contact point that is transparent.

Native Safari plus Chrome/Firefox under the SVG filter, that is, most browsers can achieve the effect of underlining and automatic text contact point hollowing out.

Seeing is believing, you can click here: use SVG filter to simulate underlined demo

Method 6: use canvas to implement (famous Underline.js)

Underline.js project address: https://github.com/wentin/underlineJS

The author is this girl (the picture is from the Internet):

Zhangwenting, currently works at Adobe Typekit.

Underline.js also implements the automatic avoidance effect of underlining and text overlap, similar to the following figure:

You can click here: underline.js of canvas principle solves underline overlap demo.

Basically, the traversing effect of underlined text is good only in English. If I go through Chinese, the underline is basically gone, especially for Chinese characters like "Jinyu Quanwang":

Therefore, for Chinese, the best effect is to avoid, that is, to leave some distance between the direct line and the text, which is the best. For English-based content, the text-decoration-skip effect is indeed quite valuable.

According to my own use of underline.js, I found that the limitations are not small, inline elements had better be inline- blockization, the vertical position of the canvas generated by pure inline is not very accurate, and then, do not support automatic text wrapping and underline display, after all, the canvas element is an independent replacement element, just like a picture, it is impossible to break half of the top and the other half below the line break.

Basically, it is suitable to be used on some local large slogans, headlines, slogon, etc., or on official websites or event pages that pursue vision.

Thank you for reading! This is the end of the article on "how css solves the problem of overlapping text and text-decoration:underline underlines". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.