Some tips for using high line-height properties in CSS

First, review the basics of Line-height:

Syntax: Line-height:normal | < real numbers > | < length > | <% > | Inherit

Description: Sets the height of the row in the element.

Value: Normal: Default row height, typically 1 to 1.2; Real number: Real value, scaling factor; Length: A valid length value, which can be negative; Percent: The percentage value is based on the element's font size.

Initial value: Normal

Inheritance: Inheritance

Apply to: all elements

Media: Visual

Calculated values: Length and percent values are absolute; others are the same as specified values.

The Line-height property in the CSS controls how much white space is between two lines of text, usually set to a flat value (such as a line-height:1.4), indicating its proportions to the Font-size attribute. Line-height in typesetting is a very important attribute, too low, the lines of text and lines will be embarrassed to squeeze together, too high they will be embarrassed to split too open, either of which is bad for reading. But you probably already know that.

In this article we will focus on some techniques that you can do more interestingly if you know (or can figure out) the exact value of line-height.

Specify a different color for each line of text

Unfortunately, we did not:: Nth-line this selector. We cannot expect to be relied on, and countless reasons may cause the text to be disconnected somewhere.

There is a way, although not standard, is to use the background of the elements to act as the background of the text.

Css

There is also another trick, you can use Linear-gradient () plus color points to control the color will not each other gradient, so that one color after the end of a sudden start another color. We assume that the value of Line-height is 22px, so we can let the gradient break every 22px.

Sass

CSS code copy content to clipboard

. text {

Background-image:linear-gradient (

To Bottombottom,

#9588DD,

#9588DD 22px,

#DD88C8 22px,

#DD88C8 44px,

#D3DD88 44px,

#D3DD88 66px,

#88B0DD 66px,

#88B0DD)

}

After two techniques are combined:

If your browser does not support text background-clip, such as Firefox, you will see the color strip behind the text, you may find it cool or even like it, but perhaps you'd rather go back to the old fashioned text color. If the latter, you can use @support to set: If the browser support, CSS will not take effect.

In addition, since you are repeatedly using the value of line-height, it might be better to turn him into a variable. I use scss here, but it's really great to use a real CSS variable someday, so that you can continue to modify the page after rendering it and watch it take effect.

Sass

CSS code copy content to clipboard

$LH: 1.4em;

Body {

Font-size:1em;

Line-height: $LH;

}

@supports (-webkit-background-clip:text) {

p {

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

Background-image:linear-gradient (

To Bottombottom,

#9588DD,

#9588DD $LH,

#DD88C8 $LH,

#DD88C8 $lh *2,

#D3DD88 $lh *2,

#D3DD88 $lh *3,

#88B0DD $lh *3,

#88B0DD);

}

}

The easiest way to do this is to apply these attributes to the top-level elements, here's a sample, and its first few lines are the focus.

Sass

CSS code copy content to clipboard

. text {

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

Background-image:linear-gradient (

To Bottombottom,

RGBA (white, 0.8),

RGBA (white, 0.8) $LH,

RGBA (white, 0.6) $LH,

RGBA (white, 0.6) $lh *2,

RGBA (white, 0.4) $lh *2,

RGBA (white, 0.4) $lh *3,

RGBA (white, 0.2) $lh *3,

RGBA (white, 0.2));

}

It will be more difficult if we are to manipulate to the last arbitrary line. In that case, we need the Ribbon to start all the way down to the bottom line, and luckily we can do it with Calc ().

Sass

CSS code copy content to clipboard

. text {

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

Background-image:linear-gradient (

To Bottombottom,

RGBA (white, 0.8),

RGBA (white, 0.8) Calc (100%-66px),

RGBA (white, 0.6) Calc (100%-66px),

RGBA (white, 0.6) Calc (100%-44px),

RGBA (white, 0.4) Calc (100%-44px),

RGBA (white, 0.4) Calc (100%-22px),

RGBA (white, 0.2) Calc (100%-22px),

RGBA (white, 0.2));

Background-position:bottombottom Center;

}

There are other ways to achieve this effect, such as stacking a layer of pseudo element gradients and setting Pointer-events:none to avoid interference.

Lines between text

We described above how to control the gradient color points, and if we use a similar approach, we can create a gradient in 1px and repeat until we reach line-height. The easiest way to do this is to use

Repeating-linear-gradient to achieve, but also to ensure that other elements are in place (such as padding is also based on line-height).

Sass

CSS code copy content to clipboard

. Parent {

padding: $lh *2;

Background: #082838;

Background-image:repeating-linear-gradient (

To Bottombottom,

RGBA (white, 0) 0,

RGBA (white, 0) $lh/1em*16px-1,

RGBA (white, 0.1) $lh/1em*16px-1,

RGBA (white, 0.1) $lh/1em*16px

);

}

To create a 1px line, we need to know line-height in pixels and then minus 1. Minus 1 is to allow the gradient to be accurately repeated with known Line-height and leave the last 1px as a line. Since we let the body's font-size be 1em, that is, 16px, so the unit of Line-height is set to EM, you can remove the unit by removing 1em, then multiply 16px and subtract to get the value we need.

Position Images One-per-line

And one thing you know line-height you can do is to get bakcground-size to match, at least vertically. Then you can repeat the background vertically, and the end result is a line of pictures.

Sass

CSS code copy content to clipboard

. text

Background-image:url (image.svg);

Background-size: $lh $lh;

Background-repeat:repeat-y;

Padding-left: $lh *2;

}