Baseline is one of the most basic CSS attributes used by many front-end people. At first glance, it seems simple, but when you really dig deep, it is one of the deepest CSS attributes. If you don’t believe me, keep reading.

directory

  • The font size

    • The font size is the same, but the height is different
    • How are typefaces made

  • The location of the Baseline

    • The position of the Baseline with different display values
    • Learn what the value of the sibling attribute of Baseline means from the value of vertical-align.

First, font size

(1) The font size is the same, but the height is different

Let’s start with a simple example:

<p>
    <span style="font-family:Catamaran; font-size:100px;"Word-wrap: break-word! Important; "> <span style=" max-width: 100%; clear: both"font-family:Catamaran-special; font-size:100px;">MO</span> //Catamaran has changed the size of the original font (only changed the layout, not the font design style, you can consider it a new font), the article will explain. </p>Copy the code

The only difference between the two spans in this code is the difference between the font-family:

Here, if you select the text, you will see that the font size is set to the same size.

Vertical-align = top,text-top,middle,baseline,text-bottom,bottom,baseline

First of all, it’s important to understand why font sizes are all 100 different: the first span is 164 in height and the second 100 in height. To understand this, you have to understand how fonts are created. Since font design is not our main job today, we will use fonts designed by others directly into the font design tool. This is the Catamaran font we are using now. You can find the font in the Google font library https://github.com/qrpike/Web-Font-Load).

(2) How are fonts made

Next, take a look at how fonts are created. You’ll want to learn about Fontforge, a tool you’re interested in researching, and see Resources (1) for a quick start. Let’s open the M font in this font tool (O is the same).

Font design, unsurprisingly, is usually done within the range of 1000units(font size) or more. Let’s put the MO back into Fontforge and test it out there.

After reading this picture, you will understand the real meaning of font size. But by now, you’re probably wondering why 100px is 164 pixels high in a Catamaran font. To this, some people might want to research the fontforge, so this way also posted on the detailed instructions on the use of the fontforge reference: designwithfontforge.com/zh-CN/index…

@font-face {
       		 font-family: 'hhabnormal';
       		 src: url('./fontfamily/Catamaran.ttf') format('truetype');
   		 }Copy the code

Let’s stick with 100px and 164 pixels. Let’s compare the native Catamaran font to the font in FontForge (you can use the following code to try out your own fonts on a web page)

Comparing the two images, you will see that 164px is more than 100px. In fact, there are two more question marks above and below the font-size. So what do these two question marks mean? Comparing the above parameter diagram, you will see a region like HHead/Win Ascent. These two parameters are also defined at font design time. You can’t change it with CSS. Here, we’ll also use images for comparison, because you can see them at a glance. Let’s take a look at what was done to the native Catamaran font to make such a big difference in height.


It may be difficult to understand the real meaning of the parameters alone, so we will combine the analysis with examples. We label these parameters one by one in the font.

If you look at the image above and compare it to the parameter image, it quickly becomes clear why the same font size appears at different heights. The higher part is actually:

? (top center) =Win/HHead Ascent – Type Ascent.

? (bottom of figure) =Win/HHead Descent – Type Descent.

An explanation is necessary: Win Ascent is used on Windows. HHead Ascent is used for Mac systems. Basically, designers design with the same value for both. There are two, because there are two mainstream systems, and they don’t follow the same standard, for compatibility.

Font-size :100px; One height is 164px and one height is 100px.

164px=Win/HHead Ascent(11px) +Win/HHead Descent(54px);

100px=Win/HHead Ascent(77px) +Win/HHead Descent(23px);

2. The position of Baseline

(1) Position of Baseline of different display values

Font size: all display elements have a Baseline. If an element like inline-block has several lines of text, should it be baseline of the first line or baseline of the second line? For example, the following picture:

A div box model like this has two lines of text. What should be its baseline? Why do we need to figure this out? Because the display: inline; display:inline-block; The elements are aligned to baseline. You don’t know where your baseline is, so you don’t know where your next baseline is going to be. Take a look at a picture to get the idea.

You’ll notice, however, that without one alignment standard, the placement of items will be extremely confusing. So this time, understand the display: inline: display: inline – block; display:block; The location of the baseline is particularly important. Consider the following situations:

Display: Inline baseline

The baseline for an inline element (span,label, I, etc.) is the baseline for the font of that element. The baseline is the same as in section 1. Several different inline elements are placed on the same line to align the baseline, just as the “MO” in the same font is aligned to the baseline.

Display :inline-block baseline

Let’s use an example:

<div style="display:inline-block; width:100px; height:100px; word-wrap:break-word; background-color: hsl(2, 86%, 58%); color:#fff;">
    <span>
        MOMOMOMOMOMOMOOMOM
    </span>
</div>
<span style="color:#fff">MOMO</span>Copy the code

Let’s take a look at the results:

As you can see from the figure, the baseline of the DIV element takes the last line of the inline element it contains as its own baseline. The next element in the same line will align the baseline with the div baseline. So all display:inline-block; Is that always the case? What about img with no inline elements? Let’s look at one more example.

<img src="http://chuantu.biz/t6/62/1506246890x3752257483.png" alt="" style="background-color:hsl(2, 86%, 58%); height:100px; width:100px;">
<span style="color:#fff">MOMO</span>Copy the code

Take a look at the results:

You can see that IMG baseline is at its bottom. Display :inline-block; Element baseline. If there is an inline element, press the baseline inline, if there is no inline element, press the lowest edge. Is that the right summary? I’ll tell you what: it’s basically right. Let’s take a look at the W3C’s definition of an inline-block baseline:

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

(3) Display: baseline of block

Because the block element is occupying a line by itself, it doesn’t need a baseline at all, since it doesn’t need to be aligned with any element before or after it.

(2) Understand the meaning of the sibling attribute value of the Baseline from the value of vertical-align.

The parameter diagram above is enough to say that it covers almost everything except the less commonly used attributes such as sub and super. Each value corresponds to one of the parameters in the diagram above, so I won’t say much more about that.

References:

1.FontForge Tutorial: www.youtube.com/watch?v=ljR…

2.Deep dive CSS: font metrics, line-height and vertical-align iamvdo.me/en/blog/ CSS…