Summary and pros and cons of adding underscores in Web pages

This article focuses on almost all methods for adding underline styles, and compares the pros and cons of each approach. did not expect to have not noticed before the underline there are so many mystery!

This article is translated by Nzbin, Ailing Wind School draft. without permission, no reprint!

English Source: css-tricks.com

Posted Address: http://web.jobbole.com/89425/

There are many ways to add an underscore style. Maybe you remember the crafting link underlines on Medium this article. Medium didn't try a special method, just wanted to create a nice looking normal underline.

A slender black underline and a gap with the following letter-the crafting link underlines on Medium quoted from Marcin Wichary

This is the basic underline style, but is moderately sized and avoids the downward letter. The default effect is better than most browsers. It turns out that Medium is having a lot of trouble getting this style. Two years later, adding a nice-looking underline style is still difficult.

Goal

What's the problem with adding underscores using text-decoration:underline ? If we discuss an ideal scenario, the underscore should meet the following characteristics:

• is below the text baseline
• Avoid the downward letter
• Can change color, thickness and style
• Applies to text wrapping
• Suitable for any background

I think these requirements are very reasonable, but as far as I know, there is no simple way to implement all of the above requirements in CSS.

Method

So what are the ways to add an underscore to a Web page?

Here are the methods I can think of:

• text-decoration
• border-bottom
• box-shadow
• background-image
• SVG Filters
• Underline.js (Canvas)
• text-decoration-*

Let's analyze the pros and cons of these methods individually.

Text-decoration

Text-decoration is the most straightforward way to add text underlines. You just have to apply a single attribute to get it all done. If the font size is small, the underline looks good, but after you add the font size, the same underline is hard to see.

See the Pen underlines 1:text-decoration by John D. Jameson (@johndjameson) on Codepen.

The biggest problem with Text-decoration is the lack of customization. It inherits the color and font size of the text and cannot change styles across browsers. Do a detailed introduction later.

Advantages

• Easy to use
• is below the text baseline
• The default is to avoid the following letters on Safari and IOS
• You can wrap a line
• Suitable for any background

Disadvantages

• You cannot avoid the following letters in other browsers
• Cannot change color, thickness, or style

Border-bottom

Border-bottom is between fast and customizable. This method uses the true CSS border, which means you can change its color, thickness and style.

The following is the effect that Border-bottom adds to the inline element.

See the Pen underlines 2:border-bottom by John D. Jameson (@johndjameson) on Codepen.

The biggest problem is the distance from the underline to the text--it's completely below the downward letter. You can solve this problem by setting the element to Inline-block and reducing line-height , but the text wrapping will not work. This method is only suitable for single-line text and not for multiline text.

See the Pen underlines 3:border-bottom (Inline-block) by John D. Jameson (@johndjameson) on Codepen.

In addition, you can use Text-shadow to overwrite the underscore near the downward letter, but you must use the same color as the background color. This means that only valid on a solid color background, but not on gradients or images.

See the Pen underlines 4:border-bottom (Text-shadow) by John D. Jameson (@johndjameson) on Codepen.

Now, you need four properties to define a single underline. It's a lot more work than text-decoration .

Advantages

• You can use Text-shadow to avoid the downward letter
• Can change color, thickness and style
• Transition and animate properties can be added for color and thickness
• You can wrap a line as long as you don't use inline-block
• As long as the Text-shadow is not used, it can be applied to any background

Disadvantages

• The underline is far from the text and difficult to locate
• Requires many properties that you do not want to close to display correctly
• Selecting text after using Text-shadow looks rough

Box-shadow

Box-shadow Draws an underscore using two inner shadows: one for creating rectangles and the other for covering them. This means that the property must be used on a solid color background.

See the Pen underlines 5:box-shadow by John D. Jameson (@johndjameson) on Codepen.

Also use the Text-shadow method to forge the gap between the underscore and the downward letter. But if the underline is not the same color as the text, or too thin, it will not be as uncoordinated as text-decoration .

Advantages

• Can be located below the text baseline
• Use the Text-shadow property to avoid the downward letter
• can change color and thickness
• You can wrap a line

Disadvantages

• Cannot change style
• cannot be applied to any background

Background-image

Background-image is the easiest property to meet our requirements and has fewer problems. The idea is linear-gradient to pass and background-position create images that are copied horizontally along the text.

This method also needs to be set display:inline

See the Pen underlines 6:background-image by John D. Jameson (@johndjameson) on Codepen.

The following method does not need to use linear-gradient , you can use your own pictures to make cool effects.

See the Pen underlines 7:background-image (External) by John D. Jameson (@johndjameson) on Codepen.

Advantages

• Can be located below the text baseline
• Use the Text-shadow property to avoid the downward letter
• Can change color, thickness (allow half a pixel) and style
• Applies to Custom pictures
• You can wrap a line
• As long as the Text-shadow is not used, it can be applied to any background

Disadvantages

• Images may vary in size at different resolutions, browsers, and zoom levels

SVG Filters

I've been thinking about how to use the SVG filter. You can create an inline SVG filter element to draw a line that obscures the underscore near the downward letter by extending the text boundary. Then give the filter an ID by filter: url(‘#svg-underline’) referencing it in the CSS.

The advantages of the filter do not require the use of Text-shadow to add a transparent gap. This means that you can avoid the downward letter on any background, including gradients and picture backgrounds. This approach applies only to single-line text, which you need to be aware of.

Here's how it works in Chrome and Firefox:

There is a problem with browser support on IE, Edge, and Safari. It is difficult to test the support of SVG filters in CSS. You can use the @support property of the filter, but you can only detect if the reference is available, not the filter itself. My final approach is to use some browser sniffing detection, so be aware of this as well.

Advantages

• is below the text baseline
• You can avoid the downward letter
• Allows changing colors, weights and styles
• Suitable for any background

Disadvantages

• Line wrapping is not allowed
• Not valid in IE, Edge and Safari, but you can use text-decoration . The underscore in Safari looks great.

Underline.js (Canvas)

Underline.js is very charming. I feel most impressed by the wenting Zhang's use of JAVASCRIPT implementations and attention to detail. If you haven't seen Underline.js's tech demo, be sure to stop and take a look. There's a 9-minute video about how it works, but I can say it briefly: it's underlined by the <canvas> element. This is a new method that works very well.

Although Underline.js has a compelling name, it's just a technical demonstration. This means that it cannot be used in any project until it is modified.

It is necessary to put forward this method as proof of concept. <canvas> can create beautiful, interactive underscores, but you need to write some JavaScript to work properly.

text-decoration-* Properties

Do you remember the phrase "Do details later"? Now it's here.

Text-decoration itself can perform better, but must add some experimental properties to customize its appearance:

• text-decoration-color
• text-decoration-skip
• text-decoration-style

Don't be happy too early, because there are browser-compatible issues.

Text-decoration-color

Text-decoration-color allows you to change the color of the underline. This property is better than expected browser support-it can work in Firefox and Safari (prefixed). Note that if you do not clear the downward letter, the underscore in Safari is above the text.

Firefox:

Safari:

Text-decoration-skip

Text-decoration-skip Sets whether the text underline avoids the downward letter.

This is a non-standard property and works only in Safari, so -webkit- prefix it. Safari uses this property by default, so even if it is not set, the underscore will avoid the downward letter.

If you are using NORMALIZE.CSS, you need to know that the current version is disabled for consistency between browsers. If you want this excellent underline style, you need to set it yourself.

Text-decoration-style

Text-decoration-style provides the same line style as the Border-style , but also adds a wavy wavy line style.

Here are the different property values you can use:

• dashed
• dotted
• double
• solid
• wavy

Now, Text-decoration-style only works on Firefox, the following are:

Does it look familiar?

What's missing?

The text-decoration-* property is more convenient than other underlined CSS properties. But if we look back at previous requirements, this property does not change the thickness and position of the underline.

After a bit of research, I found the following two properties:

• text-underline-width
• text-underline-position

These attributes appear to have been raised in the early drafts of the CSS, but are not implemented because of lack of interest. Hey, don't blame me!

Summarize

So what's the best way to add an underscore?

subject to availability.

For text with small font sizes, I recommend using text-decoration and using text-decoration-skip optimistically. This style looks a bit tedious in most browsers, but because the underline style has always been so, users don't mind. If you are patient enough, all the underscores will look great in the future, and you don't need to change anything.

For the body part, you can use the background-image method. This method looks great, and there are corresponding Sass mixins. If the underscore is fine or different from the color of the text, you can omit the Text-shadow property.

For single-line text, use border-bottom and other properties that you want to work with.

If you want to avoid the downward letter on a gradient or picture background, try using an SVG filter. or avoid using underscores.

In the future, when the browser is more supportive, the answer must be the text-decoration-* attribute.

Summary and pros and cons of adding underscores in Web pages