What is the definition of “the baseline of parent box”?

Question

I have trouble understanding the following excerpt from 10 Visual formatting model details – W3C.

The excerpt:

baseline: Align

Answer 1

Check the bottom of this answer for an interactive version of this answer which will help you to verify statements from this answer on your own. This answer has been based on the post by Vincent De Oliveira on his blog. It's a must-read.

What is baseline?

The image below, and many other images alike specify a basline, but what is it exactly?

Inline text elements are not the same height...

To measure the height of an inline text element I will use the term content-area. Content-area of these elements for Windows is calculated as follows:

Content-area=(Win Ascent + Win Descent)/Em Size * Font Size

See a few examples below:

• Merriweather Sans has a content-area of 25px because (2014+560)/2048*20≈25px
• Noto Sans has a content-area of 27px because (2189+600)/2048*20≈27px

You can find these values, for example, using FontForge, as shown on the screenshots below:

Merriweather Sans (right), Noto Sans (left)

In this case for each font we have [content-area]=[line-box] and this is a special case in which you can measure the content-area of the element with dev-tools:

How to align text elements to make text readable?

To do this you use the baseline.

In the example below you can see that increasing the line-height doesn't increase the content-box (the colored area), but it does increase the line-box of the orange inline element. Furthermore, notice that both elements are mutually aligned along their baseline. The baseline is defined by each font separately. However, when two different fonts align along their baseline, the resulting text is easily readable.

This is an image with the baseline showed as a green line:

In the example below, the orange element is aligned in respect to the top of the parent's content area. However, the tomato colored element is aligned in respect to the baseline of the strut of the parent. A strut is a zero-width character which starts the line-box of the parent.

It might seem that the tomato colored element has moved up, but it is not the case. Its position relative to the strut has not changed.

Conclusion

A baseline is a line which typeface authors use to design their fonts and make different fonts "mutually compatible". The baseline is chosen so that a text composed out of different fonts, which all have their own content-area, can be aligned along the baseline and remain easily readable.

A parent baseline is a baseline of the parent's strut, which is a zero-width character with a defined baseline which helps to align inline elements.

---

Interactive version of this answer

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

span {
  margin: 0;
}

p.pr {
  background-color: blue;
}

span.mw {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: 20px;
  line-height: 40px;
  background-color: orange;
}

span.ar {
  font-family: 'Noto Sans', sans-serif;
  font-size: 20px;
  background-color: tomato;
}

<h1>What is baseline?</h1>
The image below, and many other images alike specify a basline, but what is it exactly?
<img src="https://i.imgur.com/SJrxQHj.png">
<br><br>
<h1>Inline text elements are not the same height...</h1>
To measure the height of an inline text element I will use the term <b>content-area</b>. Content-area of these elements for windows is calculated as follows:
<p>Content-area=(Win Ascent + Win Descent)/Em Size * Font Size</p>
<p>See a few examples below:</p>
<ul>
  <li>Merriweather Sans has a content-area of 25px because (2014+560)/2048*20≈25px <span class="mw">Abg</span></li>
  <li>Noto Sans has a content-area of 27px because (2189+600)/2048*20≈27px <span class="ar">Abg</span></li>
</ul>
<p>You can find this values using for example FontForge, as shown on the screenshots below:</p>
<table>
  <tr>
    <td><img src="https://i.imgur.com/h0th3Rv.png"></td>
    <td><img src="https://i.imgur.com/aRymbaf.png"></td>
  </tr>
</table>
In this case for each font we have [content-area]=[line-box] and this is a special case in which you can measure the content-area of the element with dev-tools:
<img src="https://i.imgur.com/4kuFCIf.png">
<h1>How to align text elements to make text readable?</h1>
<p>To do this you use the baseline.</p>
In the example below you can see that increasing the line-height doesn't increase the content-box (the colored area), but it does increase the line-box of the orange inline element. Furthermore, notice that <b>both elements are mutually aligned along their baseline which is defined by the font itself.</b> The baseline is defined by each font separately. However, when two different fonts align along their baseline, the resulting text is easily readable.
<p class="pr">
  <span class="mw">Abg (line-height=40px)</span><span class="ar">Abg</span>
</p>
This is an image with the baseline showed as a green line: <img src="https://i.imgur.com/OlHqb3J.png">
<br><br>
In the example below, the orange element is aligned in respect to the top of the parent's content area. However, the tomato colored element is aligned in respect to the baseline of the <b>strut</b> of the parent. A strut is a zero-width character which starts the line-box of the parent.
<br><br>
It might seem that the tomato colored element has moved up, but it is not the case. Its position relative to the strut has not changed.
<p class="pr">
  <span class="mw" style="vertical-align:top;">Abg</span><span class="ar">Abg</span>
</p>
<h1>Conclusion</h1>
<p>A baseline is a line which typeface authors use to design their fonts. The baseline is chosen so that a text composed out of different fonts, which all have their own content-area, can be aligned along the baseline and remain easily readable.</p>
<p>A parent baseline is a baseline of the parent's strut, which is a zero-width character with a defined baseline which helps to align inline elements.</p>

Answer 2

Look at this picture to see what exactly is the baseline.

Now, let's demonstrate what the doc want to say:

When you define the vertical-align: baseline then the element is aligned to the baseline of the parent element's baseline as in the above picture.

Answer 3

Neither did I find a specific definition,and according to the specification:

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element

You can infer that ,if there is a text node as child in the parent box ,the baseline of the child text node is the baseline of the parent box.

For example:

.parent {
  display: inline;
  background:pink;
  font-size:40px;
  font-family:Microsoft Yahei;
  line-height:2;
  vertical-align:baseline;
}
.element-child {
  font-size:25px;
}

<div class="parent">
   textNode child of parent 
  <span class="element-child">
    element-child with another font-size
  </span>
</div>

Whatever with or without child text node,the baseline of parent box is in the same position which is equal to the baseline of the child text node.

Answer 4

The spec tells you what the parent box refers to just a couple of paragraphs above:

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

So the parent box refers to the box generated by the parent element, and you calculate the baseline of the parent box just like you would any other element.