Wavy CSS line. Styles underscore on the Internet

From the author: Stylization of the underscores of links is a rather complicated occupation, and I constantly forget what method is suitable in one or another situation. Fortunately, John Jameson will help us quickly understand this in his article.

There are many ways to stylize underscores. You may remember the article "Create an underscore reference to Medium." Medium did not try to do something out of the outgoing frames, they wanted to just create an attractive underscore in the text.

Thin, black underscores with spaces around letters with lower notes - the work of Marsin Vitchery from the article Create an underscore reference to Medium.

A good standard underlining, which is also a good size and skips the lower remote parts of the letters. Much better than in most default browsers. As it turned out, Medium collided with many problems on their way. And even two years later, still a good stylization of the emphasis causes a lot of problems.

Goal

Why not use text-decoration: underline? If we are talking about the perfect scenario, underlining should:

position below the baseline;

skip the lower remote parts of the letters;

change color, thickness and styles;

go to a new string;

work with any backgrounds.

I believe that we may well require all this from underlines, however, as far as I know, there is no intuitive way to solve all these tasks in CSS.

Approaches

So what methods do we have at our disposal to underline the text? I remembered the following:

text-Decoration;

background-image;

SVG filters;

Underline.js (Canvas);

text-Decoration- *

Let's go throughout the list and consider all the pros and cons of each approach.

TEXT-Decoration property

The Text Decoration property is the easiest way to underscore. You need to apply only one property. On the small text, such a line will look normally, but it is worth increasing the font size and it is already clumsy.

The biggest problem with the Text-Decoration property is the lack of customization. The line uses the color and size of the font of the text to which it is used, and there is no cross-browser method of changing styles. A little later, let's talk in more detail on this property.

pros

just use;

located below the baseline;

skips the lower remote parts of the default letters in Safari and iOS;

jumps over to a new string;

works with any backgrounds.

Minuses

does not miss the extension of the lower parts of the letters in other browsers;

it is impossible to change the color, thickness and styles.

Border Bottom Property

The Border-Bottom property is a good balance of speed and customization. This approach Uses proven CSS FramesSo you can easily change the color, thickness and styles. This looks like a Border Bottom property on the inline elements:

The biggest minus is how far the underscore is located from the text. The underscore is located below the lower remote parts of the letters. This problem It is solved if you make an element inline-block and reduce line-height, but then the ability to jump into new lines is lost. Well suited for single lines, but no more.

In addition, using Text-Shadow, you can hide parts of the line around the lower nozzle. In this case, you will have to mimic the background color, which means that the method works only on homogeneous backgrounds. Gradients and images will not suit.

On the this moment There are 4 properties for stylizing underlining. Much better than just Text-Decoration.

pros

you can use the TRANSITION property and animate color and thickness;

jumps over to new strings by default if the element is not inline-block;

Minuses

the line is very far away and it is difficult to move it;

too many unnecessary properties need to be used to underline well looked;

poor text selection when using Text-Shadow.

Box-Shadow Property

The Box-Shadow property draws an underscore with two internal shadows: one creates a rectangle, and the second hides it. This means that for proper operation of the method, a homogeneous background is needed.

The same trick with Text-Shadow can be used to simulate the pass around the lower ending of the letters. If the line color differs from the text, or it is quite thin, then there should be no problems as it happens with text-decoration.

pros

can be placed under the baseline;

you can skip callouts using Text-Shadow;

can be changed color and thickness;

jumps over to new lines.

Minuses

it is impossible to change styles;

does not work with all the backgrounds.

BackGround-image property

The background-image property is best solved by our tasks, and it has very few minuses. The idea is that you create an image using Linear-Gradient and Background-Position, which is repeated along the horizontal axis along the text strings. The element must be display: inline;.

The demo below does not use Linear-gradient. To create a steep effect, you can use your image.

pros

can be located below the baseline;

you can skip the lower callouts using Text-Shadow;

it is possible to change the color, thickness (even on the polpixel) and styles;

works with user images;

jumps over new lines;

works with any background, if not using text-shadow.

Minuses

the size of the image can vary in different ways to different permissions, browsers and increase levels.

SVG filters

I played with this method. You can create an Inlaain SVG Filter element that will draw a line, and expand the text to disguise those parts of the line that must be transparent. You can assign the filter ID and refer to it in CSS using Filter: URL ('# SVG-Underline').

What is the plus - the filter adds transparency without relying on the text-shadow. That is, you can skip the lower balls of the letters on any background, including gradients and images! The example below works with only one string of text, so be careful.

And so it looks like in Chrome and Firefox:

In IE, EDGE and Safari with support, problems arise. CSS is difficult to test the support for SVG filters. You can use the @Supports rule on Filter, but so you only check the work of the reference itself, and not the filter applied or not. My way is quite rudely working with browsers, so be doubly careful.

pros

located below the baseline;

skips the lower callouts;

can be changed color, thickness and styles;

works on any background.

Minuses

does not jump over new lines;

it does not work in IE, EDGE and Safari, but you can specify text-decoration as a folback. The underscore in Safari themselves look great.

Underline.js (Canvas)

Underline.js is an amazing library. I am impressive that Wenting Zhang could do with JS and attention to detail. If you have not yet seen the technical demo underline.js, stop for a minute and see. The network has a wonderful nine-minute performance on the principles of work, I will quickly spend it now. Underlowing are drawn using Canvas. A completely new approach, which is surprisingly working well.

Despite the attractive name, it is just a technical demo. That is, you will not be able to immediately place the library into the project without a whole heap of change.

This library should be mentioned only as proof of the concept. Canvas has a potential for creating beautiful, interactive underscores, but for the right job you will have to write an additional JS code.

Text-Decoration- * properties

Remember, I said that a little later we will analyze something in more detail? Now this will go. Text-Decoration property works well in itself, but we can add a couple of experimental properties for more better view:

text-Decoration-Color

text-Decoration-Skip

text-Decoration-Style

Do not rejoice ahead of time, you know about support in browsers.

Text-Decoration-Color property

The Text-Decoration-Color property allows you to change the text of the underscore separately from the color of the text. The properties even have a good support in browsers. It works in Firefox and with the prefix in Safari. There is your minus - if you do not clean the line around the callouts, in Safari it lies on top of the text. Firefox:

Property Text-Decoration-Skip

The Text-Decoration-Skip property is responsible for skipping the bottom callouts in the underlined text.

The property is non-standard and at the moment works only in Safari. To work in other browsers you need to use the prefix -WebKit-. In Safari, this property is enabled by default, which is why the underscore skip the lower noisings even on the sites where this property is not specified.

If you use Normalize, you need to know that latest versions Disconnect property for normal operation in all browsers. If you want to return these almost magic underscores, you need to enable this property.

Text-Decoration-Style property

The Text-Decoration-Style property offers the same underscore as the Border-Style property, but also adds the new kind - Wavy. Possible values:

Right now, the Text-Decoration-Style property works only in Firefox, the screenshot is shown below:

A set of monochromatic emphasis looks like?

What's wrong?

The properties of the text-decoration- * are more intuitive compared to other properties for styling underlines. However, if a different look at the requirements that we have presented earlier, it can be noted that with the help of these properties it is impossible to change the thickness and position. After a small study, I found these two properties:

text-Underline-Width

tEXT-Underline-Position

It seems that these properties were thrown out of the early version of CSS due to the lack of interest in them. They did not apply. Hey, I'm not to blame for this.

conclusions

So how best to emphasize the text? It all depends on different factors.

For a small text, I recommend using text-decoration and an experimental Text-Decoration-Skip property, hoping that it will work. In most browsers it looks so-so, but it was always that people did not pay attention to it. If you are patient enough, there is a chance that in a short time all your underscores will look good, and you will not have to change anything.

For the main text, use the background-image. The method works, it looks beautiful, and for it there is SASS mixins. If the underscore is subtle, or color differs from the text, most likely you can skip the TEXT-Shadow method. For text on one line, use Border Bottom and any other properties.

And to skip the letters of letters on gradient backgrounds or images, try using the SVG filter. Or simply do not mix such backgrounds with underscores. In the future, when support in browsers improves, you can use the Text-Decoration- * properties.

Description

Adds text design in the form of its underscore, crossing, lines over text and blinking. At the same time, you can apply more than one style, lifying the values \u200b\u200bthrough the space.

Syntax

text-Decoration: [blink || Line-Through || Overline || Underline] | none | inherit.

Values

Blink sets flashing text. This text is periodically, about once per second disappears, then again appears in the same place. This value is currently not supported by browsers and condemned in CSS3, it is recommended to use animation in return. Line-Through creates a crossed text (example). Overline Line passes over the text (example). Underline Sets the underlined text (example). None cancels all effects, including underlining the reference, which is default. Inherit value is inherited from the parent.

HTML5 CSS2.1 IE CR OP SA FX

Strategic attack

Object model

document.getelementByid ("Elementid") .style.textDecorage

document.getelementByid ("Elementid") .style.textDecorageBlink

document.getelementByid ("Elementid") .Style.TextDecorationLineThrough

document.getelementByid ("Elementid") .Style.TextDecorationNone

document.getelementByid ("Elementid") .style.textDecorageOrsenceOne

document.getelementByid ("Elementid") .style.textDecorageunderline

Browsers

Internet Explorer before version 7.0 does not support the INHERIT value. The line obtained using the Line-Through value in IE7 is located higher than in other browsers; In IE8, this error is fixed.

Allows you to make a different underscore in HTML lower (underline), top (overline), crossed out text (Line-Through), etc. Compatible this chip with the previous one and will work:

In the second line it is shown how everything is recorded in one row with text-decoration.

text-Decoration-Style - text underscore

The option sets the appearance of the decorative line for / reference. In the new CSS recommendations, Wavy and Double values \u200b\u200bwere added, now they are only 5:

• solid - solid line;
• double - double (from the first example above);
• dotted - consists of a sequence of points;
• dashed - allows you to make a dotted underline CSS;
• wavy - spectacular wavy line.

text-Underline-Position - Positioning CSS underscore

With the help of this property, you can control the position of the line relative to the glyph font.
Total 4 options are available:

• aUTO - is located as close as possible text of the text;
• under - under the lowest border of the font;
• left and Right - left / right for entries displayed vertically.

Here is the visual difference between the lower underscore text using Under and Auto:

The difference, I think, is quite obvious.

text-Decoration-Skip - we remove the underscore for items

Using the option, you can cancel (skip) decoring some elements in HTML string. To better understand the valid values \u200b\u200bof Spaces, Objects, Box-Decoration, Edges, Ink I will duplicate the picture from the last note:

That is, for example, with the help of Ink, you can make the lower underscore in CSS, which would not be crossed with the characters. The Objects value allows you to skip the inline elements (inline-block) - insert SPAN, and the solid line will be interrupted in the appropriate place:

The parameters of the Box-Decoration, Spaces, Edges are much worse supported by browsers, so their result is sometimes different from the expected. Here is a compatibility / support state of text-decoration at the time of writing the article:

Additional chips to underscore

Beginners users often ask some typical questions on the topic, so we also decided to consider them. The overall example is at the very bottom after the explanation.

How to remove underscore reference

a: Hover (Text-Decoration: Underline;)

Both examples below allow you to understand the logic of work when you hover: or you initially indicate in CSS underscore Links, and then remove it to Hover, or vice versa.

If there are some other questions on the topic, ask them in the comments. We will try to consider later or suggest in the answers. The main thing in this matter is the practice - try adding different properties for the Text-Decoration option directly in the examples or create your own test file. We hope on the subject of text underscore and links in CSS / HTML it has become clear.

The emphasising is different, respectively, the methods of its creation differ. Listed below are several popular.

Using Text Decoration

The Text-Decoration property with the Underline value adds an emphasis to the text; This kind of emphasis can be observed for default references. The line created in this way is equal to the width of the text and will be the same color as the headline itself. You can change the color line through the Text-Decoration-Color property. Example 1 shows the use of text-decoration to the element

.

Example 1. Using Text Decoration

The result of this example is shown in Fig. one.

Fig. 1. Type of line created through text-decoration

IE and EDGE browsers do not support the Text-Decoration-Color property.

Using Border Bottom

Property border Bottom. Adds to the element below the line of a given thickness, color and style. Such a line takes the entire available width, despite the length of the header text (Fig. 2).

Fig. 2. View of the line created by Border Bottom

Distance from line to text can be adjusted using the property. padding-Bottom As shown in Example 2.

Example 2. Using Border Bottom

Cultural speech act in the XXI century

Indeed, the myth-fupping text device illustrates discourse, and it gives him his sound, its own character.

To the line be on the width of the text, it is enough to turn the header into a strait-block element by adding a property to the selector H2 display with an inline-block value.

Usage :: Afterter and Content

You can also make an artificial line through a combination of properties. content and pseudo-element :: after. . They only will withdraw an empty pseudo-element after the title, and the appearance of this pseudo-element is determined by other properties. In fig. 3 shows a similar line.

Fig. 3. Line created by :: After

The position of such a line relative to the text is set through the property. bottom With a negative value, line color through property background. . In fact, it turns out not a line, but a rectangular block, so we use the background fill (Example 3).

Example 3. Usage :: After

Cultural speech act in the XXI century

Indeed, the myth-fupping text device illustrates discourse, and it gives him his sound, its own character.

There is a bunch in different ways underscore. You may remember the article Marsina Vicari "Crafting Link Underlines" on Medium. Medium developers are not trying to do something crazy, they just want to create a beautiful line under the text.

This is the easiest underscore, but it has the right size and it does not overlap the remote elements of the letters. And it is definitely better than the default underscore in most browsers. Medium had to face the difficulties to achieve his style on the web. Two years later, we are still difficult to make a beautiful underscore.

Goal

What is wrong with the usual text-decoration: underline? If we are talking about the perfect scenario, the underscore should do the following:

• positioned below the baseline;
• skip remote elements;
• change color, thickness and style line;
• work with multi-line text;
• work on any background.

I believe that these are all reasonable requirements, but as far as I know, there is no intuitive way to achieve this with the help of CSS.

Approaches

So this is for various methodswhich we can implement underscore on the web?

Here are the ones I consider:

• text-Decoration;
• border-Bottom;
• box-Shadow;
• background-image;
• sVG filters;
• Underline.js (Canvas);
• text-Decoration- *.

We will analyze these methods one by one and talk about the pros and cons of each of them.

text-Decoration.

text-Decoration is the most obvious way to underscore. You apply one property and this is enough. On small font sizes, it may look quite well, but increase the font size and such an underscore begins to look awkward.

The biggest problem with the text-decoration is the lack of settings. You are limited to the color and font size of the text and you do not have a cross-browser way to change it. We will still talk about it in more detail.

• easy to use;
• positioned below the baseline;
• by default, the lower removal elements in Safari and iOS;
• emphasizes the multi-line text;
• works on any background.

• does not miss the lower remote elements in all other browsers;
• does not allow you to change the color, thickness or style line.

border Bottom.

border-Bottom offers a good balance between simplicity and customizability. This approach uses the old good property CSS for the border, it means that you can easily change the color, thickness and style.

This is how Border Bottom looks like lowercase elements.

The main drawback is the distance of the underscore from the text, it is entirely lower than the remove elements. You can fix it by setting the inline-block property items and reducing Line-Height, but then you will lose the ability to wrap text. Good for individual lines, but more is not suitable anywhere.

Additionally, we can use text-shadow to overlap part of the line next to the substitution elements, imitating it with the same color as the background. That is, this technique works only on a simple monochrome background, without gradients, patterns or images.

At the moment we already use the whole four properties for designing one line. It is much more work than just add text-decoration.

• can skip remote elements using text-shadow;
• can change color, fatness and style line;
• allows you to use transitions and animations of colors and fatness;
• works with multi-line text, if the inline-block value is not applied;
• works on any background, if you do not use text-shadow.

• positioned too low and moves in a complex method;
• many additional properties are used for proper operation;
• when using Text-Shadow, the selection of text looks ugly.

box-Shadow

box-Shadow draws a substitcher due to two internal shadows: one creates a rectangle, and the second hides it part. This means that you need monophonic background In order for it to work.

You can use the same trick with Text-Shadow to fill the passes between the underscore and remote elements. But if the color of the underscore differs from the color of the text - or it is simply quite thin, the line will not face remote elements as when using text-decoration.

• allows you to change the color and thickness of the line;
• works with multi-line text.

• does not allow to change the underscore style;
• it works not on any background.

background-image.

The method with the background-image is closest to our desire and has a minimum deficiencies. The idea is to use Linear-Gradient and Background-Position to create an image that repeats under the text line.

To work this approach, it is necessary that the text be in standard mode display: inline; .

The following option is done without Linear-gradient, for effects you can add your background image.

• may be positioned below the baseline;
• can skip the remote elements at the expense of text-shadow;
• works with custom images;
• wraps a few lines of text;
• works on any background, if you do not apply Text-Shadow.

• the size of the image may vary depending on the screen resolution, browser and zoom.

Filters SVG.

I played a lot with this way. You can create a svg lowercase filter, which draws a line and then expands the text to mask part of the line, which we want to make transparent. You can then set the ID filter and refer to it in CSS approximately so Filter: URL ('# SVG-Underline').

The advantage of this approach is that transparency is achieved without applying text-shadow, that is, we skip the remote elements on any background, including gradients and background images! It works only on a separate line of text, consider it.

This is how it looks like in Chrome and Firefox:

Support in IE, EDGE and Safari is problematic. It is difficult to test the support of the SVG filter in CSS. You can use the @Supports directive with Filter, but it will only check the operation of the filter link, but not the work of the filter itself. My attempts ended with the mutual definition of the possibilities of the browser, this is a tangible lack of a method.

• may be positioned below the baseline;
• can miss remote elements;
• allows a change in color, thickness and style line;
• works on any background.

• does not work with multi-line text;
• it does not work in IE, Edge and Safari, but you can use text-decoration as a backup option, in Safari it looks worthy.

Underline.js (Canvas)

Underline.js fascinates. I consider it an impressive what Venten Geng did from owning JavaScript and attention to detail. If you have not seen a technical demo underline.js, throw read and get a minute of time. There is also her nine-minute report on how it works, but I will describe a brief: underscore draws with the help of elements . This is a new approach that works surprisingly well.

Despite the challenge name, Underline.js is just a technical demo. This means that you cannot simply take and connect it to your project without changing the code.

I decided to mention this in the proof of the concept that It has the potential to create excellent interactive underlines, but that this makes it, you need to write your JavaScript.

New properties Text-Decoration

You remember that I promised to talk about Text-Decoration. The time has come.

In itself, this property works great, but you can add multiple experimental properties to customize external view underscore.

• text-Decoration-Color
• text-Decoration-Skip
• text-Decoration-Style

But do not rejoice too much ... Support in browsers - as always. So it goes.

text-Decoration-Color

The Text-Decoration-Color property allows you to change the level of underscore separately from the color of the text. Support for this property is better than you could expect - it works in Firefox and with the prefix in Safari. That's what snag: if you have remote elements, Safari will put the underscore over the text.

text-Decoration-Skip

The Text-Decoration-Skip property includes a passage of remote elements in the underlined text.

This property is non-standard and works now only in Safari, with the prefix -WebKit. Safari by default activates this property, so the remote elements are always crossed.

If you are using Normalize, then note that the last versions disable this property for the sake of consecutive behavior of browsers. And if you want underscore to not affect the remote elements, you need to manually activate it.

text-Decoration-Style

The Text-Decoration-style property offers the same design opportunities as the Border-Style property, adding the Wavy style except.

Here is the list of available values:

• dashed.
• dotted.
• double.
• solid

Now the text-decoration-style property works only in Firefox, here is a screenshot of it:

What is missing

A series of properties of the Text-Decoration- * is much more intuitive to use than the other CSS properties for underscore. But if you look more carefully, it is not enough to satisfy our requests to set the thickness or position of the line.

After a small study, I found a couple more properties:

• text-Underline-Width
• tEXT-Underline-Position

Apparently, they relate to the early CSS drafts, but they were never implemented in browsers due to lack of interest.

conclusions

So what is the method of underlining the best?

For a small text, I recommend using the text-decoration with an optimistic addition of text-decoration-skip. It looks a bit tasteless in most browsers, but the underscore in browsers was such always and people simply will not pay attention. Plus there is always a chance that if you have patience, this underscore will ever look good without the need for you to change something, as it will be done in browsers.

For basic text it makes sense to use background-image. This approach works, looks great and there is SAS mixers for him. You, in principle, you can skip Text-Shadow if the underscore is thin or characterized by color from text.

For separate string Text Use Border Bottom along with any additional properties.

And if you need skipping remote elements against the gradient or image background, try using SVG filters. Or simply avoid using an underscore.

In the future, when support in browsers is better, the only answer will be a set of properties of the Text-Decoration- *.

I also recommend paying attention to the article Benjamin Woodroff CSS Underlines Suck, in which the same questions are considered.