＆＃34;父盒的基线＆＃34;的定义是什么？

Question

我无法理解10 Visual formatting model details – W3C中的以下摘录。

摘录：

  

基线：   将框的基线与父框的基线对齐。如果框没有基线，请将下边距边缘与父基线对齐。

＆＃34;父框的基线＆＃34;意味着在这种背景下？ 是＆＃34;父盒＆＃34;是指父元素建立的行框还是框？如何计算父框的＆＃34;基线＆＃34;？

Answer 1

请在此答案的底部查看该答案的交互式版本，这将帮助您自行验证该答案中的陈述。该答案基于Vincent De Oliveira在his blog上的帖子。这是一本必读的书。

什么是基线？

下面的图像以及许多其他图像都指定了基准线，但是它到底是什么？

内联文本元素的高度不同...

要测量嵌入式文本元素的高度，我将使用术语内容区域。 Windows中这些元素的内容区域计算如下：

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

请参见以下示例：

  
• Merriweather Sans的内容区域为25px，因为（2014 + 560）/ 2048 *20≈25px
  
• Noto Sans的内容区域为27px，因为（2189 + 600）/ 2048 *20≈27px

例如，可以使用FontForge查找这些值，如以下屏幕截图所示：

Merriweather Sans（右），Noto Sans（左）

在这种情况下，对于每种字体，我们都有[content-area] = [line-box]，这是一种特殊情况，您可以使用dev-tools测量元素的内容区域：

如何对齐文本元素以使文本可读？

为此，您使用基线。

在下面的示例中，您可以看到增加行高不会增加内容框（彩色区域），但是会增加橙色内联元素的行框。此外，请注意，两个元素均沿其基线相互对齐。基线由每种字体分别定义。但是，当两种不同的字体沿其基线对齐时，结果文本将易于阅读。

这是一幅基线显示为绿线的图像：

在下面的示例中，橙色元素相对于父级内容区域的顶部对齐。但是，番茄色元素相对于父级 strut 的基线对齐。支撑杆是零宽度的字符，用于启动父级的行框。

似乎番茄色元素已经向上移动，但事实并非如此。相对于撑杆的位置没有改变。

结论

基线是字体创作者用来设计其字体并使不同字体“相互兼容”的行。选择基线是为了使由不同字体组成的文本（它们都有各自的内容区域）可以沿基线​​对齐并保持易于阅读的状态。

父级基线是父级支撑的基线，它是零宽度字符，具有已定义的基线，有助于对齐内联元素。

---

此答案的互动版本

@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

规范告诉你父框只能引用上面几段：

  

以下值仅对父内联元素或父块容器元素的strut有意义。

因此父框指的是父元素生成的框，您可以像计算任何其他元素一样计算父框的基线。

Answer 3

我也没有找到具体的定义，并且根据规范：

  

以下值仅对父内联元素或父块容器元素的strut有意义

您可以推断，如果父框中有文本节点作为子节点，则子文本节点的基线是父框的基线。

例如：

.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>

无论是否有子文本节点，父框的基线都在同一位置，该位置等于子文本节点的基线。

Answer 4

查看this picture，了解baseline究竟是什么。

现在，让我们展示一下医生想要说的话：

当您定义vertical-align: baseline时，元素将与父元素基线的基线对齐，如上图所示。