Are you having problems with vertical centering? I can’t argue with 🤦🏻♂️

preface

The vertical center that we normally implement is not really vertical center, right? How can you say that! There are a lot of times when the UI/UX still says you have a problem with the vertical center, and then you take a closer look and it looks like there are some visual errors, but when you take a closer look at your vertical center code, there is no problem at all. Today we look at the origin of this interesting problem, the solution and the future of typography.

Making 👈

Found the problem

There are many ways to center vertically, so here we use display:flex on the parent element; The align-items:center property centers child elements vertically, as shown below:

It seems like this vertical center is perfect, but you’re getting feedback and skepticism from the UI/UX

The UI/UX: yi? There is something wrong with your vertical center ~🥴

Development: where is the problem, the code is completely ok ah ~

UI/UX: Believe it or not, the top half of the text is 1px more than the bottom half

Development: That’s… 😑 after all, it can not escape the eyes of design ah ~

And what we really want is something like this

To solve the problem

If you’re careful, you’ll notice that the culprit is the text’s line-height property. So we now use

with three different font-family to get the following effect. For the same font-family text elements will have different heights.

The root cause of vertical center is line-height! In a standard text box, there is actually always extra space above and below the text, and the extra space reserved by default line height causes the text to not always be centered in the text box. Therefore, the vertical center we have implemented will not meet the expectations, and the bigger the line-height, the more obvious the problem will be. Also, the default line-height is different for different fonts, so changing the font will also result in text alignment without changing the font size, line height, and text box position.

🤯 is that the end of the question? No, we don’t know yet why line-height is like this or why it should be like this. 🤷 🏻 came ️

Their roots

Some 140 years ago, typography still used a single lead box to manually set fonts. When printing, to make the text more readable, the typesetter inserts leading into the blank lines. So the height of the printed text plus the height of the lead is the total line height.

Graphic design software from the early 1980s kept the same tradition, allowing people to add bottom-leading directly to control the spacing between baselines, while also causing line height to increase. Others allow people to adjust row heights directly. For example, in the first version of Photoshop, released in 1990, a user could define a value for leading and then add it to the font size. Many tools also start with the distance between two baselines called line-height.

When Bert Bos and HakonWium Lie drew up their first proposals for CSS in 1989, at first they were still following the “old” ways of the print world. Soon, however, they will decide to make a logical and radical change, splitting leading in two and placing it above and below each row, calling it “half-leading”. Why do you do that? The purpose is to make the text box look even www.w3.org/TR/CSS1/#th… .

“Half-leading” neatly avoids the uneven top and bottom borders, but it also brings some problems. Each font size in the font family comes with a default line height. To accommodate certain characters and accents, the default line height is often set higher than the text it contains. Adding two “half-leading” after increasing the default line height makes the textbox bigger. Such a meal down, is that we now face text can not be vertical center of the most fundamental reason.

For many years, Web design tools have not supported semi-leading technologies, so many teams have discussed why the layout difference between screen design and browser is so great. On top of that, not everyone knows this kind of intricate technical detail, which often leads to squabbles between designers and developers 🤦🏻♂️

The solution

Manually adjust related CSS properties

Manually adjust the relevant CSS properties, but this will result in a series of magic margin or padding values that are random and specific to the font, browser, and operating system. Obviously this is not a very good solution.

Cutting tools

EightShapes Text Crop Tool

Select a font from the tool or load a custom font, then use the slider to measure the desired top and bottom clipping. The tool computes properties and formulas by simply copying and pasting the generated SCSS, LESS, or Stylus mixin into the source code.

Why only use one font instead of all?

The utility principle is to define negative margins with before and after pseudo-elements, which removes white space at the top and bottom of a multi-line text block while preserving line height between lines.

// Top crop:
$ top-crop +（$ desired-line-height- $line-height-crop) * ($font-size-with-crop / 2)), 0) / $font-size-with-crop;
//Bottom crop:
$ bottom-crop +（$ desired-line-height- $line-height-crop) * ($font-size-with-crop / 2)), 0) / $font-size-with-crop;
Copy the code

The end result is a hybrid font that works regardless of font size and requires only ununitless line heights to perform calculations. But mixins don’t work well when applied to other fonts.

The tool implements clipping Em Square to the baseline and Cap height of the font, but each font has a different Em Square Definition. Therefore, “Magic numbers” that work for one font may not work for others.

New CSS draft

We are not the first people to have encountered similar problems and reported them to the W3C for a long time.

Leading-trim is part of the CSS inline layout draft to fix CSS text layout issues

h1 { 
 text-edge: cap alphabetic;
 leading-trim: both;
}
Copy the code

With leading-Trim, you can finally solve all the mysterious alignment problems you see on websites. Fonts can be changed without breaking the design intent.

The following is the leading-trim attribute related draft (not yet specification)

Ref

Leading-Trim: The Future of Digital Typesetting

The 4px baseline grid — The present

Getting to the bottom of line height in Figma

The Thing With Leading in CSS

Intro to Font Metrics

Deep dive CSS: font metrics, line-height and vertical-align

CSS Inline Layout Module Level 3

Cropping Away Negative Impacts of Line Height

css-inline Leading control at start/end of block #3240

More quality content, Buddhists concerned public account: [front-end iron egg]