“父框的基线”的定义是什么？ [英] What is the definition of "the baseline of parent box"?

问题描述

我无法理解以下摘录自 10个视觉格式化模型的详细信息
– W3C 。

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

摘录：

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

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"?

推荐答案

请在此答案的底部查找该版本的交互式版本答案，这将帮助您自行验证此答案中的陈述。该答案基于Vincent De Oliveira在他的博客。

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.

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

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

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

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:

内容区域=（Win Ascent + Win Descent）/ Em大小*字体大小

请参见以下示例：

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


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

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

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

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

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:

为此，请使用t

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

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.

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



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



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

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.

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

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父基线是父支撑的基线，它是零宽度字符，具有已定义的基线，有助于对齐内联元素。

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.

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

这篇关于“父框的基线”的定义是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！