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 the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

What does "the baseline of the parent box" mean in this context? Does "parent box" refer to the line-box or the box established by the parent element? How do I calculate the "baseline of the parent box"?

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>