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

text-decoration: underlineWhat's the problem with adding underscores? 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-decorationIs 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.

text-decorationThe biggest problem 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-bottomBetween Fast and Customizable. This method uses the true CSS border, which means you can change its color, thickness and style.

Here are border-bottom the effects that are added to inline the Element.

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 as inline-block well as reducing the line-height text wrapping. This method is only suitable for single-line text and not for multiline Text.

In addition, you can use an text-shadow underscore that overrides 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.

now, you need four properties to define a single underline. Compared to text-decoration the amount of work to be larger.

Advantages

• Can be used to text-shadow avoid the downward letter
• Can change color, thickness and style
• Transition and animate properties can be added for color and thickness
• inline-blockYou can wrap a line as long as you don't use it
• As long as not used text-shadow , 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
• text-shadowSelect text to appear rough after use

Box-shadow

box-shadowUse two inner shadows to draw an underscore: one for creating rectangles and the other for covering Them. This means that the property must be used on a solid color background.

text-shadowthe same method is used 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 text-shadow attributes 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-imageis the easiest property to meet our requirements and less problematic. 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;

The following methods do not have linear-gradient to be used, you can use your own pictures to make cool effects.

Advantages

• Can be located below the text baseline
• Use text-shadow attributes 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 not used text-shadow , 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 need to be text-shadow added with 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. filterthe properties that can be used @supports , but can only detect if the reference is available, but 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 <canvas> underlined by Elements. 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>You can create beautiful, interactive underscores, but you'll need to write some JavaScript to work properly.

text-decoration-* Properties

Do you remember the phrase "do details later"? Now It's Here.

text-decorationYou can perform better, but you 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-colorallows 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-skipSets 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-styleProvides the border-style same line 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 available on Firefox, here are the following:

Does it look familiar?

What's missing?

text-decoration-*Properties are more convenient than other CSS attributes that are Underlined. 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 small text sizes, I recommend using text-decoration them and using them optimistically text-decoration-skip . 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 is not the same as the color of the text, you can omit the text-shadow Attribute.

For single-line text, use border-bottom and other properties that you want to use 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 browsers are more supportive, the answer must be text-decoration-* attributes.

Summary and pros and cons of adding underscores in Web pages