CSS 内联布局模块 第3级

1. 简介

本模块定义了 内联布局，即 CSS 模型，用于布局包含文本和 内联级框的混合流，并定义了该内容在每一行内的 块轴对齐和尺寸控制。此外，它还添加了一个用于首字母下沉等特殊样式的布局模式。

注意：行内级内容的换行、对齐等方面在CSS 文本模块中处理。

这里的许多布局方面依赖于字体度量。虽然相关的度量在拉丁/西里尔/希腊文和 CJK 的 OpenType 中存在，但对许多其他书写系统则缺失。例如，希伯来语的视觉顶部度量在 OpenType 表中没有相应的度量。为了使本模块能适用于全世界，我们需要字体为所有书写系统提供相关的度量，这意味着 OpenType 需要允许这些度量，并且字体设计师需要提供准确的数字。参见 issue 和 联络声明。

1.1. 模块交互

本模块替换并扩展了 [CSS2] 第10.8节中定义的 CSS 内联布局模型及功能。

1.2. 值定义

本规范遵循来自 CSS 属性定义约定，采用 [CSS2] 的值定义语法，并使用 [CSS-VALUES-3] 的规范。未在本规范中定义的值类型由 CSS 值和单位模块 [CSS-VALUES-3] 定义。与其他 CSS 模块的结合可能会扩展这些值类型的定义。

除在各自定义中列出的特定属性值外，本规范中定义的所有属性还接受 CSS 全局关键词 作为其属性值。为了可读性，这些值没有被重复列出。

2. 内联布局模型

在 内联布局中，文本和 内联级框的混合递归流，形成 内联格式化上下文，并在 块容器内通过分割它们为一组 行框来布局。在每个行框内，内联级框沿着 块轴相互对齐，通常通过其文本的基线进行对齐。

任何直接包含 内联级内容的块容器——如内联框、原子内联框和文本序列——会建立一个内联格式化上下文，以使用内联布局来布局其内容。块容器的内容边缘为其参与内联格式化上下文的每个内联级框形成了包含块。

块容器还会生成一个根内联框，它是一个匿名 内联框，用于容纳其所有的内联级内容。（因此，内联格式化上下文中的所有文本都是直接包含在一个内联框中的，无论是根内联框还是它的某个子元素。）根内联框从其父级块容器继承样式，但本身无法应用样式。

在内联格式化上下文中，内容沿着内联轴进行布局，按照 Unicode 双向算法及其控制 [CSS-WRITING-MODES-3] 排序，并根据 [CSS-TEXT-3] 中的排版控制进行分布。内联轴的 外边距、边框和内边距在内联级框之间均被尊重（且它们的外边距不会折叠）。形成一行内联级内容的框所包含的结果矩形区域称为行框。

注意：行框、内联框和内联级框是不同的概念！参见 [CSS-DISPLAY-3] 以深入讨论框类型和相关术语。

2.1. 行框的布局

行框会根据需要创建，以容纳内联级内容，位于内联格式化上下文中。当内联框超出行框的逻辑宽度，或包含强制换行时，会将其拆分为多个片段 [CSS-BREAK-3]，并分布在多个行框中。与 列框在多列布局 [CSS-MULTICOL-1]中一样，行框是由其分片容器生成的格式化上下文，并不是 CSS 框树的一部分。

注意：内联框也可以因双向文本处理而在同一个行框内拆分为多个片段。参见 [CSS-WRITING-MODES-3]。

行盒作为块容器盒的直接内容，在其块流动方向上堆叠，并根据 align-content [CSS-ALIGN-3] 在此容器内对齐。因此，一个行内格式化上下文由一叠行盒组成。行盒之间没有间隔地堆叠（除非另有规定，例如浮动清除），并且它们从不重叠。

通常，行盒的行左边缘接触其包含块的行左边缘，而行右边缘接触其包含块的行右边缘，因此行盒的逻辑宽度等于其包含块的内部逻辑宽度（即块容器的内容框）。然而，浮动盒或首字母盒可以位于包含块边缘和行盒边缘之间，从而减少任何受影响的行盒的可用空间，进而减少其逻辑宽度。（参见 层叠样式表级别 2 修订版 1 (CSS 2.1) 规范 § visuren#inline-formatting/层叠样式表级别 2 修订版 1 (CSS 2.1) 规范 § visuren#floats 和 § 7 首字母。）

行框的逻辑高度在其内容块轴对齐后进行调整。该调整受 line-height 和 line-fit-edge 控制。块容器中的首行/末行行框还可以通过 text-box-trim 进行修剪。

2.2. 行框内的布局

如上文所述，用户代理会将内联级框流入一组 行框中。在每个 行框内进行布局，独立计算每个框片段和 行框的尺寸和位置，具体如下：

1. 基线对齐：所有 流内的 内联级框在 行框中根据 块轴由 dominant-baseline 和 vertical-align 对齐，这称为基线对齐。对于 行相对值的 baseline-shift，假设其对齐方式为最小化行框高度。

2. 内容尺寸贡献计算：计算每个 内联级框在 行框中的 布局边界（即尺寸贡献）：

   • 对于 原子内联框，如 替换元素 和 内联块：其布局边界为其外边距框。
   • 对于 根内联框和带有 line-fit-edge: leading 的 内联框：其布局边界来自于其使用的 line-height，忽略任何 外边距 / 边框 / 内边距；参见 § 5.3 计算内联框的逻辑高度贡献（“布局边界”）。
   • 对于其他 内联框：其布局边界来自于其 line-fit-edge 的度量值，并包含任何 外边距 / 边框 / 内边距；参见 § 5.3 计算内联框的逻辑高度贡献（“布局边界”）。

3. 行框尺寸调整：行框的逻辑高度调整为完全包含其所有布局边界的 内联级框。

4. 内容定位：根内联框的对齐子树和用于 baseline-shift 的行相对值在 行框内定位。

   需要定义对于顶部/底部/居中对齐的框高度大于其他内容时应如何处理。

注意：空的 内联框仍然有 外边距、内边距、边框和 line-height，因此与有内容的框一样会影响这些计算。

2.3. 幽灵行盒

行盒，如果不包含文本、没有保留的空白字符、没有行内轴外边距、内边距或边框非零的行内框，也没有其他流内内容（例如原子行内元素或ruby 注解），并且不是以强制换行符结尾，则被称为幽灵行盒。在确定任何后代内容（例如绝对定位的框）的位置时，此类框必须被视为空高度的行盒，并且行盒及其流内内容在任何其他布局或渲染目的中都必须被视为不存在。

Firefox 允许幽灵行盒内的行内框接受轮廓，这使其能够显示焦点环。与其他浏览器一样，所有其他可能使元素可见的属性（例如 box-shadow）似乎都被忽略了。

2.4. 绘制顺序

除非对定位框另有规定（参见 [CSS-POSITION-3]），内联级框按文档顺序进行绘制；z-index属性通常不适用。

3. 基线和对齐度量

3.1. 基线简介

基线是沿着行框的内联轴的一条线，用于对齐文本中的各个字形。基线指导字形在字体中的设计（例如，大多数字母字形的底部通常与字母基线对齐），并在排版时指导来自不同字体或不同字体大小的字形对齐。

不同的书写系统偏好不同的基线。

一个构造良好的字体包含一个基线表，它指示字体设计坐标空间中的一个或多个基线的位置。（设计坐标空间会随字体大小进行缩放。）

基线表是字体的一个属性，多个基线的位置适用于字体中的所有字形。

对于横排文本和竖排文本，可以提供不同的基线表。用户代理应在垂直排版模式中使用垂直基线表，其他情况下使用水平基线表。

注意：字体在每个轴上可以有多个基线表；用户代理应根据font-language-override属性和内容语言选择合适的基线表。

3.2. 基线和度量

CSS 使用以下基于文本的度量作为基线，用于对齐、盒子尺寸和首字母布局等内联布局功能。

CSS 工作组希望了解每个使用这些基线的属性（如 dominant-baseline、alignment-baseline、text-box-edge、line-fit-edge、initial-letter-align）所需的基线值，如果有任何可以删除或需要添加的，请参考 Issue 859。

字母基线

用于书写拉丁文、西里尔文、希腊文及许多其他文字， 对应于大多数（但不是全部）字符的底部，例如“m”、“Ш”、“Δ”。 通常在字体设计坐标系统中表示为零； 在 OpenType 中指定为 romn， 在 TrueType AAT 中指定为 bsln 值零。

大写高度

对应于大写字母的顶部（如 “T”、“Б”、“Σ”）在拉丁文、西里尔文、希腊文等。 使用 OpenType 中的 sCapHeight 计算。

x-高度

对应于短小写字母的顶部（如 “m”、“л”、“α”）在拉丁文、西里尔文、希腊文等。 使用 OpenType 中的 sxHeight 计算。

x-中间

对应于 字母基线 和 x-高度基线 之间的中点。

表意上方

对应于 CJK（汉字/韩文/假名）文本的 line-over 设计边缘。 在 OpenType 中指定为 idtp。

表意下方

对应于 CJK（汉字/韩文/假名）文本的 line-under 设计边缘。 在 OpenType 中指定为 ideo。

中央基线

对应于表意中央基线，位于 表意下方基线 和 表意上方基线 之间的中点。 在 TrueType AAT 中指定为 bsln 值 1。

表意墨迹上方

对应于 CJK（汉字/韩文/假名）文本的 line-over 墨迹边缘。 在 OpenType 中指定为 icft。

表意墨迹下方

对应于 CJK（汉字/韩文/假名）文本的 line-under 墨迹边缘。 在 OpenType 中指定为 icfb。

悬挂基线

对应于从中悬挂藏文和类似独立音节文字的悬挂基线，这些文字有明显但不绝对的顶部边缘。 在 OpenType 中指定为 hang，在 TrueType AAT 中指定为 bsln 值 3。

数学基线

对应于围绕数学字符设计的中心基线。 在 OpenType 中指定为 math，在 TrueType AAT 中指定为 bsln 值 4。

文本上方

对应于用作行内框的内容框的线上方边缘的度量标准，根据[CSS2]。

文本下方

对应于用作行内框的内容框的线下方边缘的度量标准，根据[CSS2]。

em-上方

对应于概念上的 上升度量，经标准化确保 em-上方 和 em-下方 之间为 1em。 参见 A.1: 计算 Em-上方和 Em-下方。

em-下方

对应于概念上的 下降度量，经标准化确保 em-上方 和 em-下方 之间为 1em。 参见 A.1: 计算 Em-上方和 Em-下方。

注意：这些度量是光学设计度量，因此不一定与实际字形轮廓完全对应。

通常，这些度量从适当的字体中获得，但如果缺少或者需要从盒子而不是文本中派生出来，它们必须进行合成，参见第 3.3 节 字形和盒子的基线和附录A：对齐度量的合成。

3.2.1. 上升和下降度量

CSS 假设每个字体都有字体度量，指定了基线之上的特征高度——称为上升度量——以及基线下方的特征深度——称为下降度量——CSS 使用这些度量在内联格式化上下文中布局文本和盒子。请注意，这些是整个字体的度量，不一定与任何单个字形的升部和降部相对应。

注意：建议使用 OpenType 或 TrueType 字体的实现使用字体 OS/2 表中的 sTypoAscender 和 sTypoDescender 度量（按当前元素的字体大小进行缩放）来查找 CSS 布局的 上升度量和下降度量。如果没有这些度量，应使用 HHEA 表中的 "Ascent" 和 "Descent" 度量。

3.2.2. 行间距度量

字体格式允许为字体推荐“行间距”或“外部前导”度量。此度量称为行间距度量，当line-height为normal时，可能会纳入行盒子的逻辑高度计算，如第 5.3 节 计算内联盒子的逻辑高度贡献（“布局边界”）中所述。

注意：在 OpenType 中，行间距度量可以在 sTypoLineGap 或 hhea.lineGap 中找到。

用户代理必须将行间距度量的最小值设置为零。

3.3. 字形和盒子的基线

假设每个字体、字形和内联级别盒子都有各自的基线坐标，用于表示各个基线类型在其块轴上的位置。这组基线称为其基线集合。从该集合中用于对齐盒子或字形的基线称为其对齐基线；用于在内部对齐其内容的基线称为其主导基线。

对于单个字形，基线集合源自字体的基线表。对于内联盒子，它源自其第一个可用字体，无论盒子是否实际包含该字体的任何字形。如果字体缺少必要的度量，用户代理必须对其进行合成，参见A.2：合成基线（及其他字体度量）。

对于其他框，其基线集名义上是根据baseline-source及其参与的格式化上下文的规则从其内容派生的。对于在行内格式化上下文的行内轴中没有基线集的原子行内框，其对齐基线是从其外边距框合成的，请参见附录 A.3：为原子行内元素合成基线。

4. 基线对齐

尽管大多数 CSS 格式化上下文通过相对于容器的边缘对齐盒子来定位内容，内联布局在块轴方向上通过彼此对齐来定位盒子，使用它们的基线。

更具体地说，（除非使用与行相关的偏移值）每个字形或内联级别盒子在块轴方向上通过定位其对齐基线来与其父元素的对应基线对齐（即其对齐上下文），然后可能根据其后对齐偏移进行偏移。

注意： 基线对齐总是匹配对应的基线：字母基线对字母基线，悬挂基线对悬挂基线，数学基线对数学基线等。

当对齐一个盒子时，对齐基线根据其alignment-baseline和baseline-source值来选择（参见速记属性vertical-align），默认情况下匹配父元素的dominant-baseline。对于字形，对齐基线总是由父元素的主导基线确定。

给出以下示例标记：

<p><span class="outer">Ap <span class="inner">ਜੀ</span></span></p>

以及以下样式规则：

.inner { font-size: 75%; }

父元素（.outer）和子元素（.inner）的基线集合由于字体大小的差异不会匹配。子盒子通过匹配它们的字母基线与其父元素对齐。

此处使用了字母基线，因为默认情况下，盒子的对齐基线与其父元素的主导基线匹配，而在水平排版模式中，主导基线本身默认为字母基线。

如果我们在上面的示例中为.inner元素添加vertical-align: super，则使用相同的规则将.inner子元素对齐到其父元素；但除了基线对齐外，子元素还被移到上标位置。

4.1. 主导基线：dominant-baseline属性

此属性指定了主导基线，这是用于在盒子内对齐内容的默认基线类型。

对于内联盒子，主导基线用于对齐盒子的文本（除非另有指定，使用vertical-align）及其任何内联级别的子盒子，通过将每个字形/盒子的对应基线与盒子本身的主导基线对齐来实现。对于其他盒子，它指示了在盒子的对齐上下文中参与基线对齐的任何盒子的默认对齐基线；参见（alignment-baseline: baseline 和 [CSS-ALIGN-3]）。

值具有以下含义：

auto

等价于在水平书写模式和在垂直书写模式下text-orientation为sideways时等同于alphabetic。在 垂直书写模式中，当text-orientation为mixed或upright时等同于central。

然而，在 SVG 文本中，字形的原点（用于基于坐标的字形定位）始终按照 central 处理，在 垂直书写模式中。

text-bottom

使用文本下方基线。

alphabetic

使用字母基线。

ideographic

使用表意文字下方基线。

middle

使用x 中间基线；除非在 text-orientation: upright 下（其中 字母基线和x 高度基线基本无意义），则使用中心基线。

central

使用中心基线。

mathematical

使用数学基线。

hanging

使用悬挂基线。

text-top

使用文本上方基线。

参见 [CSS-WRITING-MODES-3] 了解主导基线的介绍。

为混合的垂直方向定义行为，当指定的基线不是中心时不要显得无意义。

4.2. 横向盒子对齐：vertical-align 属性

这个简写属性通过指定其对齐基线类型（alignment-baseline）、基线对齐偏好（baseline-source）和对齐后偏移（baseline-shift）来指定如何在行内对齐一个内联级别盒子。

如果指定了first或last，它会设置baseline-source（否则重置为auto）。其他值与对应的长属性一致，见下文。

作者应使用这个简写（vertical-align），除非特定情况下需要独立级联其长属性或（在 SVG 元素上）支持遗留 SVG 实现。

注意：vertical-align 也可以影响表格单元格的对齐，当 align-content 为 normal 时，尤其如此。具体来说，top（baseline-shift: top）将其映射为 start，bottom（baseline-shift: bottom）映射为 end，否则middle（alignment-baseline: middle）映射为 center。参见 CSS Box Alignment 3 § 5.1.1 块容器（包括表格单元格）。

4.2.1. 对齐基线来源：baseline-source 长属性

当一个内联级别盒子有多个可能的基线信息来源时（例如多行内联块或内联弹性容器），此属性指定是优先使用首个基线集还是最后一个基线集进行对齐，表示盒子的基线对齐偏好。值有以下含义：

auto

为最后基线对齐的内联块，其他内容使用首个基线对齐。

first

指定为首个基线对齐。

last

指定为最后基线对齐。

有关如何查找除内联盒子以外的盒子的基线信息，请参见 CSS Box Alignment 3 § 9.1 确定盒子的基线。

4.2.2. 对齐基线类型：alignment-baseline 长属性

此属性指定盒子的对齐基线：在应用其对齐后偏移（如适用）之前用于对齐盒子的基线。

值定义如下：

baseline

使用父元素的主导基线选择。

text-bottom

使用文本底部基线。

alphabetic

使用字母基线。

ideographic

使用表意字符基线。

middle

通常使用x-中间基线；但在text-orientation: upright的情况下（字母基线和x-高度基线基本上没有意义），改用中央基线。

central

使用中央基线。

mathematical

使用数学基线。

text-top

使用文本顶部基线。

在执行基线对齐时，这些值指定盒子的哪个基线与其对齐上下文的相应基线对齐。（在内联格式化上下文中，内联级别的盒子片段和字形共享一个由其父级内联盒子片段沿其内联轴建立的对齐上下文。）对于其他格式化上下文，请参见 CSS Box Alignment 3 § 9.2 基线对齐分组。在 SVG 文本布局中，这些值指定与 SVG 当前文本位置对齐的基线。

4.2.2.1. SVG 的遗留值

SVG 实现可以支持以下别名，以支持旧版内容：

• text-before-edge 是 text-top 的别名

• text-after-edge 是 text-bottom 的别名

4.2.3. 对齐后偏移：baseline-shift 长属性

此属性指定盒子的对齐后偏移。基线相对偏移值baseline-relative shift values <length-percentage>，sub，super 相对于基线对齐位置偏移盒子，而线相对偏移值 line-relative shift values top，center，和 bottom 则相对于内联盒子及其内容相对于其行盒边界的偏移。

作者应使用自 CSS1 以来已存在的vertical-align速记属性，而不是此 baseline-shift 长属性（除非是在 SVG 内容中，相反，baseline-shift 在旧的用户代理中更广泛地支持）。

值的含义如下：

<length>

根据指定长度提升（正值）或降低（负值）。

<percentage>

根据line-height的指定百分比提升（正值）或降低（负值）。

sub

适当降低父盒子下标的偏移量。UA 可以使用父元素的字体度量找到这个偏移量，否则默认为下降父元素使用的font-size的五分之一。

super

适当提升父盒子的上标偏移量。UA 可以使用父元素的字体度量找到这个偏移量，否则默认为提升父元素使用的font-size的三分之一。

top

将行顶部边缘与对齐子树对齐到行盒的行顶部边缘。

center

将对齐子树的中心与行盒的中心对齐。

bottom

将行底部边缘与对齐子树对齐到行盒的行底部边缘。

对齐子树 指的是一个 内联框 的 布局边界 及其所有子 内联框 的 对齐子树， 这些子框的计算后的 alignment-baseline 值不是 行相对移位值。 对齐子树 的 line-over 边是子树中 布局边界 的最高 over 边， 而 line-under 边则是最低的。

行相对移位值 并不完全适合 alignment-baseline 和 baseline-shift 之间的二分法。 对两者各自都有 不错的 论据。 目前它们被草拟在此，但如果有强有力的理由将它们移动，请提交一个问题以供考虑。

4.2.3.1. SVG 的遗留值

用户代理可以另外支持关键字baseline，其计算结果为 0，以便支持遗留的 SVG 内容。此值不允许在vertical-align速记属性中使用。

我们希望移除baseline值，并正在寻求 SVG 用户代理的反馈，了解它是否必要。

5. 逻辑高度和行间距

块轴方向的行盒的尺寸取决于其对齐方式及其内联级内容的大小。此尺寸由line-height和line-fit-edge属性控制。

5.1. 行距：line-height属性

此属性指定盒子的首选行高，用于计算其“布局边界”，即其对其逻辑高度的贡献（参见§ 5.3 计算内联框的逻辑高度贡献（“布局边界”））。

注意：当在根内联框上指定时，它适用于块容器，line-height有效地建立了块的行盒的最小高度。

此属性的值具有以下含义：

normal

基于字体度量自动确定首选行高。

<length [0,∞]>

指定的长度用作首选行高。负值是非法的。

<number [0,∞]>

首选行高是此数字乘以元素的计算字号。负值是非法的。 计算值与指定值相同。

<percentage [0,∞]>

属性的首选行高和计算值是元素计算字号的此百分比。负值是非法的。

注意：除了首选可用字体外，其他字体的度量仅影响具有line-height: normal的内联盒子的布局边界。

div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

百分比计算为长度这一事实令人烦恼。另请参见Issue 3118和Issue 2165。

注意：当line-fit-edge为leading时，内联盒子的边距、边框和填充不会影响行盒的高度计算。然而，它们仍然会围绕这些盒子渲染。这意味着，如果line-height指定的大小小于盒子的大小，背景和边框可能会“渗入”相邻的行盒，可能遮挡先前的内容。

5.2. 文本边缘度量：line-fit-edge属性

这是一个提案的早期草案，可能会随着设计批评和用例的注册以及与其他属性的各种细节和交互被解决后发生重大变化。请勿立即实现。

内联框，其主要目的是包含文本，其在块轴上的尺寸基于其字体度量。line-fit-edge属性控制使用哪些度量。这些选择的度量用作内联框（如果它不是根内联框）的布局边界的基础；默认情况下，也用于text-box-trim。

<text-edge>值，标识特定的字体度量，展开为

<text-edge> = [ text | ideographic | ideographic-ink ]
              | [ text | ideographic | ideographic-ink | cap | ex ]
                [ text | ideographic | ideographic-ink | alphabetic ]

第一个值指定文本的上缘边缘；第二个值指定文本的下缘边缘。如果只指定一个值，则两个边缘都会分配相同的关键字（如果可能）；否则假定缺失值为text。

我们是否需要长手属性，或者这个简写就足够了？[Issue #5236]

值的含义如下：

leading

使用上升/下降加上任何正的半行距。边距/填充/边框在用于调整行盒大小时会被忽略。

text

使用文本上缘基线/文本下缘基线作为上缘/下缘边缘。

cap

使用大写字母高度基线作为上缘边缘。

ex

使用x-高度基线作为上缘边缘。

ideographic

使用表意上缘基线/表意下缘基线作为上缘/下缘边缘。

ideographic-ink

使用表意墨上缘基线/表意墨下缘基线作为上缘/下缘边缘。

alphabetic

使用字母基线作为下缘边缘。

text作为上升/下降度量的名称是否合理，还是可以想到更好的？同样适用于leading作为关键字。[Issue #8067]

除非line-fit-edge为leading，否则盒子的边距、填充和边框也会对布局边界做出贡献。

注意：leading和text值依赖字体的上升和下降，确保文本合适。其他值更可能导致由于超出指定度量的上升（例如带变音符号）而导致的重叠或溢出，因此使用这些值的作者需要谨慎提供足够的文本间距，尤其是在多语言环境中。

注意：虽然只有leading适用正的半行距，为了允许文本紧密设置，所有值都适用负的半行距，参见§ 5.3 计算内联框的逻辑高度贡献（“布局边界”）。半行距等量应用于文本的两侧；为了更精确地控制重叠，作者可以使用line-fit-edge: text与受影响文本上的负边距。

5.3. 计算内联框的逻辑高度贡献（“布局边界”）

内联框的inline box对其逻辑高度的贡献，这里称为其布局边界，始终相对于其自身的文本度量进行计算，如下所述，并由line-fit-edge和line-height控制。子框的大小和位置不会影响其布局边界（也不会影响它自身的逻辑高度，参见inline-sizing）。

注意：布局边界不必对应于框的边缘。

要找到内联框的布局边界，UA必须首先将内联框中直接包含的所有字形按其主基线对齐。（参见§ 3.3 字形和框的基线。）如果内联框完全不包含任何字形，或仅包含来自回退字体的字形，则认为它包含一个“支柱”（一个零宽度的不可见字形），其度量使用框的第一个可用字体。

对于每个字形（包括“支柱”），A表示其在基线以上的上升；D表示其在基线以下的下降。除非line-fit-edge指定使用不同的度量，A指的是上升度量（对于给定字体及其给定大小），D指的是下降度量，每个度量都经过调整以考虑主基线相对于零的偏移量。如果line-height计算为normal，并且line-fit-edge为leading或者这是根内联框，则字体的行距度量也可能通过作为半行距的一半添加到每一侧的A和D中。

当其计算的line-height为normal时，内联框的布局边界包含了其所有字形，从最高的A到最深的D。（注意，单个框中的字形可能来自不同的字体，因此可能并不都具有相同的A和D。）

当其计算的line-height不是normal时，其布局边界仅从其第一个可用字体的度量中派生（忽略其他字体的字形），并使用行距调整有效的A和D以使其加起来等于使用的line-height。计算L为L = line-height - (A + D)。将半个半行距添加到第一个可用字体的A上方，另一半添加到第一个可用字体的D下方，得到有效的上升A′ = A + L/2，以及有效的下降D′ = D + L/2。然而，如果line-fit-edge不是leading且这不是根内联框，如果半行距为正，则将其视为零。布局边界恰好包含此有效的A′和D′。

注意：L可能是负数。

此外，当line-fit-edge不是leading时，布局边界被每侧的边距、边框和填充之和膨胀。为了允许负的边距值产生实际效果，负的边距也累积到参与相同内联格式化上下文的任何后代内联框的布局边界上。

在怪癖模式[QUIRKS]中，任何具有零边框和填充且不直接包含文本或保留的空白的[CSS-TEXT-3]的内联框的片段在调整行盒大小时被忽略。

6. 修剪文本上下的前导空白

为了确保运行文本的基本情况下的一致间距，CSS行布局在每行文本内容的上下引入前导空白，以确保其line-height。此外，字体的上升和下降度量本身通常在最典型字形的上下包含额外空间，以适应超出典型边界的偶尔字符和附加符号。这防止了相邻行文本相互重叠。然而，所有这些额外的间距干扰了视觉对齐和对有效（视觉上明显的）间距的控制。

text-box属性允许修剪块第一行和最后一行上下的额外空间，从而可以更精确地控制字形周围的间距。通过依赖于字体度量而不是硬编码的长度，此功能可以在调整大小、重新包装以及使用各种字体渲染内容时保持精确的间距。

一个常见的问题是垂直居中。将文本容器垂直居中对齐到一个图标很容易，但由于拉丁文本的视觉边界是大写高度和字母基线，而不是上升和下降，因此这通常无法产生预期的视觉效果。

要在视觉上居中文本，必须假设大写高度和字母基线分别为文本的顶部和底部边缘。

通过使用text-box-trim去除大写高度之上和字母基线之下的空白，居中框实际上就是居中文本；并且无论使用何种字体来渲染它，都能可靠地实现。

6.1. 文本框修剪的速记：text-box属性

此属性是为简写，用于在单个声明中设置text-box-trim和text-box-edge属性。

如果指定了单个关键字 normal，则它会将 text-box-trim 设置为 none，并将 text-box-edge 设置为 auto。否则，如果省略 text-box-trim 值，则会将其设置为 both（而不是初始值），而如果省略 text-box-edge 值，则会将其设置为 auto（初始值）。

添加示例。

6.2. 修剪文本上方/下方：text-box-trim属性

在行内框上，指定是否修剪内容框以匹配指定的 text-box-edge 度量标准。有关详细信息，请参见 § 5.3 计算行内框的逻辑高度贡献（“布局边界”）。

在块容器上，以及多列容器的每一列上，指定是否在框内容的开始/结束处修剪半行距，以使其内容边缘更好地匹配其文本内容。在这种情况下，修剪边缘由受影响的行框的包含块的开始/结束 text-box-edge 值指定。

值的含义如下：

none

当应用于块容器时，不对第一个/最后一个行框进行特殊处理。

当应用于行内框时，指定上/下内容边缘与text-over/text-under 基线重合，而不管 text-box-edge 如何。

trim-start

对于块容器和列框：将第一个格式化行的块起始侧修剪到其根行内框的指定度量标准。如果没有这样的行，或者如果存在非零的内边距或边框，则无效。

对于行内框：修剪框的块起始侧，以使其内容边缘匹配 text-box-edge 指定的度量标准。

trim-end

对于块容器和列框：将最后一个格式化行的块结束侧修剪到其根行内框的指定度量标准。如果没有这样的行，或者如果存在非零的内边距或边框，则无效。

对于行内框：修剪框的块结束侧，以使其内容边缘匹配 text-box-edge 指定的度量标准。

trim-both

同时指定 trim-start 和 trim-end 的行为。

注意：与 ::first-line 类似，此属性不适用于或不通过 flex、grid 或 table 格式化上下文传播。

注意：当 writing-mode 为 vertical-lr 时，块结束侧与线下侧不重合。

如果多个祖先在同一个行框上指定修剪，则使用的度量标准是请求在该行框侧进行修剪的最内层块容器的度量标准。

注意：由于 text-box-trim 的非初始值而导致内容和墨水溢出框的处理方式与内容以其他方式溢出框或行框的处理方式相同。

与 ::first-line 不同，当应用于多列容器的第一个（或最后一个）格式化行时，此属性适用于多列容器中每一列的第一个（或最后一个）格式化行。

如果列被跨栏符分割会发生什么？[问题 #11363]

当应用了 text-box-trim 的框被分片 [CSS-BREAK-3] 分割时，是按片段应用修剪还是仅对其第一个/最后一个片段的开始/结束边缘应用修剪，由 box-decoration-break 确定。

如果在打印时，修剪行框会导致其内容被剪裁，则 UA 可以在该行框的该边缘忽略 text-box-trim。

6.3. 文本修剪度量：text-box-edge属性

此属性指定用于 text-box-trim 效果的度量标准。值的含义与 line-fit-edge 相同；auto 关键字使用 line-fit-edge 的值，将 leading（初始值）解释为 text。

注意：此属性可以与 text-box-trim 一起在 text-box 简写属性中设置。与 line-fit-edge 不同，它不继承；但是它的初始值从 line-fit-edge 复制而来，而 line-fit-edge 是继承的。

6.4. 内联框绘制高度：inline-sizing属性

这个名称令人困惑。我们需要一个新的名称。或者，将其合并到 text-box-trim 中？[问题 #5189]

此属性指定如何根据行内框的内容来衡量其内容区域的逻辑高度。它对框内容、行盒或任何其他内容的大小或位置没有影响。

值的含义如下：

normal

行内框的内容区域的大小和位置应适合其第一个可用字体中的（可能是假设的）文本。如果 text-box-trim 指示修剪，则必须使用指定的度量标准。否则，本规范未指定如何操作。用户代理可以使用例如字体的最大升部和降部。（这将确保 em 框上方或下方的字形部分仍落在内容区域内，但会导致不同字体的框大小不同。）

注意：如果使用多种字体（当在不同字体中找到字形时会发生这种情况），则内容区域的逻辑高度不受后备字体中字形的影响，仅取决于第一个可用字体。但是，当 line-height 为 normal 时，这些后备字形仍会影响行盒大小；请参见§ 5.3 计算行内框的逻辑高度贡献（“布局边界”）。

stretch

在行盒已调整大小并且其内容已按 normal 定位后，行内框的框边缘会移动，使其上方/下方外边距边缘与相应的行盒边缘重合，从而拉伸行内框的内部逻辑高度，使其块轴外部大小填充行盒。（其流内内容的大小和位置不受影响。）

注意：height 属性不适用于行内框。

注意：line-height 对行内框的大小没有影响，它仅影响其对其行盒的逻辑高度的贡献。

7. 首字母

编辑们希望能得到使用非西方文字（特别是印度文字）中的首字下沉的示例。

7.1. 首字母简介

本节为非规范性内容。

自印刷术发明前，使用大而装饰性的字母来开始新段落的做法已存在。事实上，它们的使用甚至早于小写字母的出现。

7.1.1. 首字下沉

首字下沉（或称为“首字大写”）是段落开头比正常大得多的字母，其基线至少比段落的第一条基线低一个行距。首字下沉的大小通常通过其占据的行数来表示。两行和三行的首字下沉非常常见。

首字下沉的具体大小和位置取决于其字符的对齐方式。首字大写的参考点必须与正文中的参考点精确对齐。首字下沉的对齐约束取决于书写系统。

在西方书写系统中，顶部参考点是首字母的顶线和正文第一行的顶线。底部参考点是首字母的字母基线以及第 N 行的基线。下图显示了一个简单的两行首字下沉，其中标示了相关的参考线。

在汉字衍生的书写系统中，首字母从第一行字形的块起始边缘延伸到第 N 行字形的块结束边缘。

在某些印度文字中，顶部对齐点是悬挂基线，而底部对齐点是文本的边后缘。

7.1.2. 沉底首字母

某些首字下沉样式并不与第一行文本对齐。沉底首字母（或称为“沉底大写”）既低于第一条基线，同时又超出了第一行文本的高度。

7.1.3. 上升首字母

上升首字母（通常称为“上升大写”或“突出大写”）“沉降”至第一条文本基线。

注意：相较于简单地增加首字母的字体大小，真正的上升首字母有几个优点。段落其余部分的行距不会改变，但文本仍会避开较大的下降部分。而且如果上升首字母的大小定义为行的整数倍，可以保持隐式基线网格。

7.2. 选择首字母

本节为非规范性内容。

首字母通常是一个字母，尽管它们也可以包括标点符号或用户认为是单个排版单元的字符序列。::first-letter伪元素，定义于[SELECT]和[CSS-PSEUDO-4]，可以用来选择需要格式化为首字母的字符。

需要对首字母包含哪些字符进行更多控制的作者，或者希望对替换元素或多个单词应用首字母格式的作者，可以将initial-letter属性应用于块容器的第一个内联级子元素。

<p>此段落有一个下沉的“T”。
<p><img alt="H" src="illuminated-h.svg">此处我们有一个装饰性的“H”。
<p><span>短语也可以在段落开头</span>应用首字母样式。

::first-letter, /* 样式应用于第一个段落的 T */
img, /* 样式应用于装饰性的 H */
span /* 样式应用于 span 内的短语 */
{ initial-letter: 2; }

注意，由于::first-letter选择了第一个字母前后的标点符号，因此使用::first-letter时，这些字符也会包含在首字母中。

是否应该有办法退出这种行为？请参见GitHub Issue 310。

7.3. 创建首字母：initial-letter属性

此属性指定下沉、上升和沉底首字母的大小和下沉深度，以其跨越的行数来定义。

h2 + p::first-letter { initial-letter: 2; }

它取以下值：

normal

无特殊的初始字母效果。文本的行为正常。

<number [1,∞]>

第一个参数定义初始字母的 大小， 以其占据的行数为单位。 小于一的值无效。

<integer [1,∞]>

第二个可选参数 定义初始字母应 下沉 的行数。 值为 1 表示 提升的首字母； 大于 1 的值表示 下沉的首字母。 小于一的值无效。

raise

计算为 初始字母下沉 为 1。

drop

计算为 初始字母下沉 等于 初始字母大小 向下取整到最近的正整数。

如果省略了初始字母的下沉深度值，则假定为drop。

除 normal 之外的值会使受影响的框变为 初始字母框， 这是一个具有特殊布局行为的 流内 内联级框。

结合其他CSS属性，initial-letter可以用来创建“相邻首字母”，即首字母与文本相邻：

p::first-letter {
  initial-letter: 3;
  color: red;
  width: 5em;
  text-align: right;
  margin-left: -5em;
}

p {
  margin-left: 5em;
}

7.3.1. 适用性

为了让作者更好地控制哪些字符可以设置首字母样式，并允许多字符首字母（例如首词或首短语样式），initial-letter 属性不仅适用于 CSS 定义的 ::first-letter 伪元素，也适用于内部定位的 ::marker 伪元素以及放置在第一行开头的行内级盒子。具体来说，initial-letter 适用于任何行内级盒子——包括任何此类 ::first-letter 或 ::marker 盒子——该盒子是其父盒子的第一个子元素，并且其（如果有）作为其包含块后代的祖先元素都是第一个子行内盒子，且其计算的 initial-letter 值为 normal。

例如，以下示例中的<span>、<em>和<b>元素 是<p>的“最前的内联级子代”，但<strong>元素则不是：

<p><span><em><b>这是</b>一个短语</em>的样式化<strong>特别的样式化</strong>.</span> …

如果我们应用以下规则：

em { initial-letter: 2; }
b, strong { initial-letter: 3; }

initial-letter属性只会在<em>元素上生效。 <b>上的样式将被忽略，因为它具有已被样式化为首字母的祖先； 而<strong>上的样式也被忽略，因为它是第二个兄弟元素。

结果可能呈现为：

如果将 initial-letter 应用于由于 bidi 重新排序而未定位在行首的行内级盒子，或者其前面有其他行内级内容，则其使用值为 normal，并且不会将其格式化为首字母。

ruby 基础容器盒子的子元素和ruby 容器盒子上 initial-letter 属性的效果未定义。

注意：initial-letter 属性不能应用于任何 float 不为 none 或 position 不为 static 的元素，因为这些值会导致其 display 计算为 block。

7.4. 首字母对齐：initial-letter-align属性

如前所述，首字母的对齐取决于所使用的书写系统。 initial-letter-align属性可以用来指定正确的对齐方式。

此属性指定用于确定首字母大小和位置的对齐点。需要两组对齐点：首字母的上、下对齐点与根行内框的相应上、下点匹配。

值有以下含义：

alphabetic

使用周围文本的大写字母高度和字母基线对齐首字母。

ideographic

使用周围文本的表意上墨和表意下墨基线 对齐首字母。

hanging

使用周围文本的悬挂基线和 字母基线 对齐首字母。

leading

使用周围文本的上/下半字距边缘（即上升/下降 + 半字距） 对齐首字母。

注意： 这将基本上匹配 首字母的边缘与首/末受影响行 上方/下方中间的行间距，这在某些印度排版中有时使用这种效果 [ILREQ]。

border-box

使用首字母盒子的下方行和上方行的边框边缘 分别作为上方和下方对齐点。

span.initial {
  initial-letter: 2;
  initial-letter-align: ideographic;
}

除非指定了border-box， 否则首字母的对齐点会自动从其内容中确定：

1. 如果首字母是一个原子内联， 则使用其上方和下方内容框边缘。
2. 如果首字母包含任何具有汉字、朝鲜文、假名或彝文Unicode 脚本属性的字符， 使用表意上墨和表意下墨基线。
3. 如果首字母包含任何具有汉字、朝鲜文、假名或彝文Unicode 脚本属性的字符， 使用悬挂基线和字母基线。
4. 否则使用大写字母高度和字母基线。

目前由于OpenType缺乏相应的度量标准，在如希伯来文和泰文等脚本中无法正确对齐首字母 （Issue 5244）。

注意：该属性中关键字的顺序是固定的，以防border-box被扩展为[ border-box | alphabetic | ideographic | hanging ]，以显式指定 首字母的对齐点。

7.4.1. UA 默认样式表中的 initial-letter-align

为了提供更好的默认行为，UA 必须在其默认的 UA 样式表中包含以下规则：

[lang]:lang(zh, ja, ko, ii) {
  initial-letter-align: ideographic;
}
[lang]:lang(hi, mr, ne, pi, kok, brx, mai, sd, sa) {
  initial-letter-align: hanging;
}
/* 脚本标签覆盖语言标签 */
[lang]:lang('*-Latn', '*-Cyrl') {
  initial-letter-align: alphabetic;
}
[lang]:lang('*-Hani', '*-Hant', '*-Hans') {
  initial-letter-align: ideographic;
}

这里只涵盖了最常见的跨语言转写系统。 我们是否应该在 UA 样式表中包含其他/所有脚本标签？

7.5. 首字母布局

有两种类型的首字母盒子： 一种是来自非替换的内联盒子的， 另一种是来自原子内联元素的。

对于非原子的内联首字母， 该盒子及其内容参与它出现的行中的相同内联格式化上下文， 并且应用了许多特殊规则以提供预期的大小和对齐。

对于原子首字母， 其要么是替换元素，要么为其内容建立一个独立格式化上下文， 盒子的大小（除了其在自动尺寸的块轴上）以及盒子内 内容的布局遵循常规规则：主要是盒子的定位是特殊的。

7.5.1. 应用于首字母的属性

所有应用于内联盒子的属性也适用于内联首字母，但vertical-align及其子属性、font-size、line-height、line-fit-edge、 inline-sizing除外。 此外，所有尺寸属性和box-sizing也适用于首字母（见[css-sizing-3]）。

所有适用于原子内联元素的属性也适用于被样式化为首字母的原子内联元素，但vertical-align及其子属性除外。

7.5.2. 边距、边框和内边距

首字母可以像其他盒子一样使用边距、内边距和边框进行样式化。 除非initial-letter-align为border-box，否则其垂直对齐和字体大小不会受到影响。 然而，通常是首字母的边距盒的有效排除区域会受到影响（参见initial-letter-wrap）。

当内边距和边框为零时，首字母可能会发生字距调整； 见下文。

7.5.3. 首字母的字体大小调整

对于行内首字母，用于确定首字母内容大小的字号，是根据其指定的大小（参见 initial-letter）并由其指定的对齐点（参见 initial-letter-align）锚定来计算的。请注意，此计算中不需要布局：它仅基于计算值和字体度量。这些使用的字号计算不会影响计算的font-size，因此不会影响 em 长度值等的计算。

对于子元素的继承情况如何？[问题 #4988]

在这些计算中使用的行高 是包含块的line-height （或者在使用基线网格的情况下， 是基线网格所需的基线到基线的间距，参见[CSS-LINE-GRID-1]）。 被跨越的行的内容， 因此它们的高度和位置的任何变化， 都不被考虑在内。

对于在西方书写系统中的N行下沉首字母， 字母的上缘高度需要是(N – 1)倍的行高， 加上周围文本的上缘高度。 注意，这个高度不是下沉首字母的字体大小。

实际计算这个字体大小相当复杂。 对于N行下沉首字母， 我们发现下沉首字母的字体大小为：

更新这个计算以： a）适用于所有书写系统 / 对齐点，b）处理非整数大小。

对于原子首字母， 使用的字体大小和通常情况下的计算字体大小相同。

7.5.4. 字形选择与形状调整

当initial-letter不是normal时， 内联首字母会被隔离以进行字形形状调整； 但是其后的文本应当跨越 内联首字母盒子的边界进行形状调整， 假设其作为第一行文本内容的一部分出现。 （参见CSS Text 3 § 7.3 跨元素边界的形状调整。） 例如，如果“يحق”这个词的第一个字母被设置了initial-letter: 2 1， 第一个字母会以隔离形式“ي”显示为首字母， 后面的“ﺤﻖ”则以中间/最终形式显示， 假设它前面有首字母的内容作为正常文本。

7.5.5. 首字母框的尺寸调整

对于内联首字母， 如果首字母的首选宽度 / 首选高度是确定的， 则使用该值 （按最小尺寸 和最大尺寸属性要求进行限制， 并按要求处理box-sizing） 用于框的该维度。

否则，它在该维度上被视为具有自动大小，并且其内容框的大小适合以下两者：

• 指定的下沉深度（即上对齐点和下对齐点之间的空间）。
• 其包含的所有字形的字形轮廓——不包括任何悬挂的字形（参见 hanging-punctuation）——以及其包含的任何原子行内元素的外边距框。
  首字母的字形并不总是适合指定的下沉深度。 例如，如果首字母有降部，它可能会与文本的第 (n+1) 行冲突。 这是不可取的。

  

  因此，所有受首字母字形轮廓影响的行盒都需要被排除，而不仅仅是首字母下沉深度范围内的那些。

  

但是，如果其块起始内边距和边框均为零，则其块起始内容边缘将精确地与其上对齐点重合，并且任何溢出该点上方的内容在布局时都将被忽略。

注意：如果行内首字母的升部超出其上对齐点，并且作者没有在首字母本身或其包含块上提供足够的外边距，则这些升部可能会与前面的内容冲突。

注意：可以通过将这些上升部视为可以与包含块外边距折叠的外边距来自动提供必要的间距， 这样可以在不需要额外空间的情况下保证必要的间距， 但一旦确实需要，才添加空间。 根据实现的复杂性，未来可能会探索这个选项； 但在此之前，作者需要小心明确提供所需的间距。

悬挂标点是否应该包含在框中， （以便当通过边框/背景使标点可见时，框围绕标点绘制）， 但在定位框时排除 （这样首字母保持齐平，而悬挂标点正常悬挂）？ 参见讨论。

对于原子首字母， 大小调整遵循该原子内联类型的常规规则。 但是，如果框的自动块大小（auto）， 则其块大小的确定方式与具有边框盒对齐的内联首字母相同， 并且是确定的。

7.5.6. 首字母框内的内容对齐

默认情况下（即在自动尺寸调整下）， 内联首字母的内容框恰好适应其内容， 对齐属性如text-align或align-content不适用。 但是，如果框的尺寸不是自动调整：

• 如果内联尺寸是确定的， 则text-align 用于在框的内联轴内对齐首字母的内容（通常使用其内联轴的承载， 而不是其字形轮廓的边界框）。
• 如果块尺寸是确定的， 则align-content用于在块轴内对齐其内容 （使用其块轴的承载，必要时进行综合处理）。

7.6. 首字母的定位与间距

7.6.1. 块轴定位

在块轴中， 首字母根据其在行框中的起始位置进行定位， 以满足其对齐要求（initial-letter-align）和指定的下沉值（initial-letter）：

• 如果其大小大于或等于其下沉深度，则首字母的位置应满足其下方对齐，然后向包含块的块结束方向移动 (下沉深度 - 1) × 包含块的行高。

• 如果其大小小于其下沉值， 首字母会进行 上对齐。

注意：首字母本质上是这样定位的：如果假定其包含块仅包含首字母本身，其后是作为其根行内框直接内容的无限纯文本序列，则它将下沉 initial-letter 第二个参数指定的行数，并与必要的下方对齐点对齐。其位置不受受影响行框内容引入的行高不一致性的影响。

首字母不会增加其参与的行盒的逻辑高度：它可以突出到其上方或下方。它必须被定位，使其自身的块起始外边距边缘位于其包含块的块起始内容边缘下方，因此可以迫使其起始行盒（以及后续内容）进一步远离该边缘。

7.6.2. 内联字距调整

如果首字母是一个具有自动行内尺寸且内边距和边框为零的非原子行内元素，则其外边距框将根据其内容框的起始边缘到如果不是首字母则会放置在行盒起始边缘的内容点之间的距离进行字距调整（负向内缩）（即其字形边界框与其起始字怀之间的距离）。此内缩实际上是框上的一个额外的行内起始外边距。

7.7. 首字母环绕：initial-letter-wrap 属性

注意：initial-letter-wrap 处于风险中。

此属性指定受首字母影响的行是否缩短以适应 首字母框的矩形形状或其字形轮廓的形状。

none

不进行轮廓拟合： 每个受影响的行都与 行尾的 边距边缘 对齐于 首字母。

first

如果初始字母后的第一个 印刷字符单位 属于 Unicode General Category Zs，则行为与 none 相同。 否则在包含初始字母的块的第一行表现为 all，在其余部分表现为 none。

此示例显示了为什么第一行需要轮廓拟合， 以及当首字母后面有空格时为什么会取消它：

我们是否需要无条件的 first？ （即，我们是否应该将此值重命名为 auto 并添加一个 first 值 不检查空格？）参见 GitHub 问题 410

all

对于受 首字母影响的每行文本， 与 首字母相邻的 行框 从不与 首字母字形轮廓重叠的最左侧点开始。

如果 shape-outside 的值不是 none， 则使用 shape-outside 替代字形轮廓。

在这两种情况下，shape-margin 被应用于扩展轮廓， 并且由 首字母的 边距边缘进行裁剪。

注意：此值处于风险中。

grid

该值与 none 相同， 除了受影响的行的排除区域需要增加以使其结束边缘落在字符网格上， 即成为（1ic + letter-spacing） 的倍数，如在包含块上计算的。 然后可以使用 justify-self 属性来在排除区域内对齐首字母框。

注意：在此示例中，首字母的排除区域大于其字形， 以保持行内轴对齐。

注意：此值也处于风险中。

<length>

<percentage>

此值的行为与 first 相同， 只是对第一行的调整显式给出，而不是从字形形状中推断。

这真的需要字体相对长度相对于使用的大小。

注意：此值存在是因为它更易于实现。 鼓励作者使用 first 值并设置边距来控制间距， 并在必要时将其用作字形检测的后备。

在以下示例中，支持 first 的用户代理将使用字形轮廓加上指定的边距来放置第一行， 而仅支持 <length> 或 <percentage> 值的用户代理将把第一行拉入首字母宽度的 40% （然后添加边距到该点）。

h1 + p:first-letter {
  initial-letter: 3; /* 3行首字母下沉 */
  initial-letter-wrap: first;
  margin-right: 0.1em;
}
@supports (not (initial-letter-wrap: first)) {
  /* 为段落自动生成的类，以匹配首字母。 */
  p.A:first-letter {
    initial-letter-wrap: -40%; /* 假设使用正确字体，从字形轮廓开始。 */
  }
}

如果有人为 Blink 提交补丁以支持 first，则这些值和相关的烦恼可能是不必要的。

编辑图形以显示 auto 在不同上下文中的行为

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: none;
}

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: all;
}

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: first;
}

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: all;
}

7.8. 行布局

一个 首字母框 被视为在其 块格式化上下文 中的流内元素， 并且是它所起源的 行框的内容的一部分 （其起源行框）。 除了垂直轴 （参见 § 7.6.1 块轴定位）， 它与行中其他内容的交互 与 行内级内容 的交互相同， 除了一些特定的细节外…

7.8.1. 行内流布局：对齐、对齐和空白处理

一个 首字母框 的处理方式类似于任何其他参与其 起源行框的 行内级内容， 包括参与对齐、对齐和空白处理。

然而，为了确保所有受影响行的一致对齐，可折叠空白 在 下沉首字母 与其 起源行上的后续内容之间会被折叠掉， 并且通常由 下沉首字母 和行的后续内容的并置引入的任何 字母间距 或 对齐机会 被抑制。 （请注意，这不会影响 词间距 或由 词分隔符 引入的 对齐机会， 因为该空白仅由 排版字符单位 提供，而不是通过与相邻字符的并置提供的。）

7.8.2. 边缘效果：缩进和悬挂标点

text-indent 和 hanging-punctuation 像往常一样应用于 首字母的 起源行框， 并引起行内容开始位置的偏移，包括 首字母 本身。 被排除影响的后续行像往常一样缩短，具体程度可能因 首字母 的最终位置而有所不同。

initial-letter 与 hanging-punctuation 的交互正在 讨论中。

7.8.3. 祖先行内元素

如果 首字母框 被 行内框 祖先包含， 那些 行内框 的边界将绘制为排除 首字母框， 仿佛它位于它们的起始 边距边缘 之外。 这纯粹是几何操作： 它不影响例如属性继承或 首字母框 与后续内容之间的 字母间距 等实际效果。

7.8.4. 多行首字母

如果首字母太长而无法适应一行， 它会换行（根据通常的文本换行规则）， 每行都像是第一行一样填充和格式化， 而首字母太长而无法适应后续的正常文本。 在首字母后的任何正常文本都从它的最后一行开始， 其影响与该行是第一行时完全相同。

7.9. 清除首字母

7.9.1. 上升和下沉首字母

首字母的边距框会影响其包含元素的大小。 伸出文本第一行之上的首字母，称为“上升首字母”或“下沉首字母”，不会延伸到前一个元素中。 由于首字母的内容框包括所有字形的墨水， 这也意味着首字母帽高之上的重音符号或其他墨迹不会侵占前一个元素。

处理帽高之上字形墨水的问题。 建议：将其作为行框和边框的排除区域。将指定在首字母上的边距作为排除区域的一部分，以便控制间距。

在这里绘制一个框模型图。首字母的边距是否与其容器合并？

7.9.2. 带有首字母的短段落

带有首字母的段落可以包含比首字母占用的行数更少的文本行。 在这种情况下，首字母的顶部对齐仍被尊重， 其排除区域会继续延伸到后续的块元素中。 这迫使后续的行内级内容围绕首字母包围——就好像该块的文本是其自己包含块的一部分一样。 （这类似于浮动元素排除后续块框中的内容。）

如果后续块以首字母开头， 建立了独立格式化上下文， 或者在首字母的包含块的起始方向上指定了 clear， 则必须清除前一个块的首字母。

7.9.3. 与浮动元素的交互

首字母不是浮动元素： 它们是文档流内的内联级内容， 属于一个行框。 因此：

• clear 属性 与首字母无关： 它既不适用于首字母，也不会在应用于附近的浮动元素时将其清除。
• 与行框或浮动元素类似，首字母框不得与任何参与相同块格式化上下文的浮动元素的边距框重叠。 重叠的首字母框应向内或向下移动， 直到其能够不重叠地放置， 或者没有更多的浮动元素存在。
• 如果行框的起始边缘移动或向下移动以清除浮动元素， 则首字母在其所在行框中一起移动； 同样，如果首字母向内或向下移动以清除浮动元素， 其所在行框和后续行框也相应缩短和/或移动。
• 如果内联起始浮动元素 出现在与首字母相邻的第一行内容中， 则它会越过首字母朝向包含块边缘移动， 就像首字母是其他内联级内容一样。

  然而，如果这样的浮动元素出现在与（下沉的）首字母相邻的后续行内容中， 那么该浮动元素必须清除首字母。

有关浮动元素和相邻内容布局的更多信息，请参阅CSS2§9.5。 [CSS2]

仍在讨论中的是后续行中出现的内联结束浮动元素是否必须清除首字母（如同内联起始浮动元素一样）。 没有美学上的理由要求它这样做； 但尚不清楚底层布局模型如何区分这两种情况。 有关详细讨论，请参见链接。

7.9.4. 与碎片化（分页）的交互

由于单个字形不能跨页面（或列或其他 碎片容器）被 分割， 因此，首字母 被视为块轴 碎片化（跨页、列、区域等断裂）时的 单一对象 [CSS-BREAK-3]。 此外，与 首字母框 相邻的流内行之间尽量避免断裂， 就像受 widows 和 orphans 影响的行框之间尽量避免断裂一样。 但是，如果在 首字母框 旁边存在 强制断裂， 那么它将优先处理；但对 首字母框 本身没有影响。

与其他 整体 对象一样， 如果 首字母框 出现在 分片容器 的顶部，而该 分片容器 太短无法容纳它， 则可能被截断或分割。 然而，邻近内容必须根据其自身规则进行 分片， 而不是与 首字母 一起被截断或分割。

附录 A: 合成对齐度量

A.1: 计算 Em-over 和 Em-under

注意： em-over 和 em-under 基线并未被 CSS 使用。 它们的定义包含在本模块中， 以与 Canvas TextMetrics API 中使用的其他度量保持一致。

em-over 和 em-under 度量的计算方法如下：

• 如果字体定义了 中心、表意字符上 或 表意字符下 中的任意一个， 那么 em-over 位于中心基线上方 0.5em， em-under 位于其下方 0.5em， 如果缺失或未定义，中心 基线从其他基线中推导（见下文）。

• 否则，上升 和 下降 都会按比例增加或减少以总和达到 1em， 并且这些归一化的度量分别被用作 em-over 和 em-under 度量。

注意： 此计算确保 em-over 和 em-under 始终相距 1em， 同时尽量将字形轮廓的“重心”置于它们之间。

A.2: 为文本合成基线（及其他字体度量）

某些字体可能不包含正确对齐文本所需的度量信息， 用户代理可以在缺少所需度量时使用以下策略：

使用相关度量

某些度量通常是相关的， 可以利用这种关系至少通过启发式推导出缺失的度量。 如果字体格式本身未定义任何具体计算，则可以使用以下规则：

1. 中心基线 被定义为 位于 表意字符上 和 表意字符下 基线之间的一半， 因此任意两个可以确定第三个。
2. 表意字符上 和 表意字符下 基线通常相距 1em， 因此如果只提供了 表意字符上/表意字符下/中心 基线之一， 则可以利用此关系计算另外两个。
3. 在 CJK 字体中，上升 和 下降 通常与 表意字符上 和 表意字符下 基线匹配， 因此在两者都缺失时可以作为备用。

测量字体

度量可以从字形的形状中导出。 例如：

1. 可以将减号（U+2212）的中心作为数学基线。
2. 小写字母 “o” 在字母基线下方的部分可以从其最高点减去，以 测量 x 高度。

   

3. 大写字母 “O” 在字母基线下方的部分可以从其最高点减去，以测量大写高度。
4. 永 (U+6C38) 的边界框可以用来找到表意字符的边缘。
5. 希伯来字母 He (U+05D4 “ה”) 中心的顶部边缘可以作为希伯来悬挂基线。
6. 字母 Ka 中心的顶部边缘可以作为悬挂基线。使用哪个 Ka 取决于 内容语言：

   语言	脚本	字母
   	天城文	क U+0915 KA
   	孟加拉文	ক U+0995
   	果鲁穆奇文	ਕ U+0A15
   	藏文	ཀ U+0F40

   选择一个默认值。

   

7. 问题：是否需要在此添加更多注释？

请有人检查这些启发式规则的合理性。

使用备用值

建议使用以下备用值：

• x 高度：.5em；
• 大写高度：.66em；
• 悬挂基线：.6em；

A.3: 为原子内联合成基线

如果一个 原子内联（例如内联块、内联表格或 替换元素） 在其参与的 内联格式化上下文 中的 内联轴 上没有基于内容的 基线设置，则 UA 必须按照如下方式合成其 基线，以便对齐它。

这些 基线被认为位于 其 下方线的 边缘：

• 文本下基线
• 表意字符下基线
• 表意字符墨水下基线
• 字母基线

这些 基线被认为位于 其 下方线 和 上方线 之间的一半 边缘：

• 中心基线
• 数学基线
• x-中间基线

这些 基线被认为位于 其 上方线 的 边缘：

• 文本上基线
• 表意字符上基线
• 表意字符墨水上基线
• 大写高度基线
• 悬挂基线
• x 高度基线

注意： 作者可以使用（正或负的）边距来调整替换内容在行内的对齐方式。

img[src^="/text/"] {
  height: 1em; /* 与相邻文本大小一致 */
  margin-bottom: -0.2em; /* 基线位于底部上方 20% */
}
...
<p>这是一些包含用未编码脚本编写的单词的文本：
<img src="/text/ch3439.png" alt="...">
  <img src="/text/ch3440.png" alt="...">
  <img src="/text/ch3442.png" alt="...">

注意： CSS 的未来版本可能会包含为替换元素指定完整 基线表 的方式。 （这可能类似于接受 [<baseline-keyword> <percentage>]+ 的 baseline-table 属性。）

变更记录

自 2024 年 8 月 12 日工作草案以来的变更：

• 将 <text-edge> 的两个值都设为必需。 (问题 10703)
• 使 text-box-edge 继承；text-box-trim 引用应用于受影响行盒的相关值。 (问题 10904)
• 定义了 text-box-trim 在分片断裂处的行为。 (问题 5335)
• 定义了 text-box-trim 在多列容器上的行为，并阐明了其在其他格式化上下文中的应用（以及通过其他格式化上下文的应用）。 (问题 5335, 问题 11038)
• 将“不可见行盒”重命名为幽灵行盒，以与 CSS2 保持一致，并帮助阐明它们对于布局是“不可见的”，而不仅仅是绘制。

自 2024年8月8日工作草案 以来的变更：

• 对 text-box-edge 的一些次要引用进行了清理，这些引用是当它也表示 line-fit-edge 时遗留下的。
• 调整了 text-box-edge: auto，使其引用受影响的行盒上的 line-fit-edge，而不是计算为指定元素的 line-fit-edge。

自 2023 年 4 月 1 日工作草案以来的变更：

• 将 text-box-edge 拆分为两个属性——用于控制 text-box-trim 边缘的 text-box-edge 和用于控制行盒大小的 line-fit-edge——并添加了 text-box 简写属性。 （问题 8829 和 8696）
• 向 text-box-trim 关键字添加了 trim-* 前缀，以便它们在 text-box 简写属性的上下文中具有意义。 (问题 10675)
• 当多个祖先请求修剪时，对 text-box-trim 使用最内层的修剪边缘。 (问题 5426)
• 在计算行内框的后代的布局边界时，对其应用负的块轴外边距，以便它们能够实际产生指定的效果。 (问题 8182)
• 更正了幽灵行盒，使其仅考虑行内轴的框装饰。 (问题 9344)

自 2022 年 11 月 14 日工作草案以来的变更：

• 将 text-edge 重命名为 text-box-edge，将 leading-trim 重命名为 text-box-trim，并重命名了它们的初始值。 (问题 8067)
• 将行间距度量向下取整到零。 (问题 5064)

自 2020年8月28日工作草案 以来的变更：

• 修正 inline-sizing 为 可继承，以符合最初的意图。 (问题 1974)
• 更新 inline-sizing 的“适用于”属性以排除 ruby 框。
• 编辑修复，包括缺失的图片。

自 2020年6月18日工作草案 以来的变更：

• 为 initial-letter-align 添加 leading 值，以处理某些印度文字的常见实践。 参见 印度布局需求。 (问题 864)
• 使祖先元素的非零填充和边框块影响 leading-trim。 (问题 5237)
• 从 initial-letter-align 中移除 hebrew 值。 (问题 5208)
• 对小于 sink 的首字母使用下对齐点。 (问题 5329)
• 折叠与 下沉首字母 相邻的空白。 (问题 5120)
• 使 下沉首字母 在 text-align 方面的行为与 升起首字母 一致。 (问题 5207)
• 更改 shape-margin、margin 和 shape-outside 的交互方式以匹配浮动 (参见 initial-letter-wrap)。 (问题 5119)
• 为 Canvas 2D 添加了 em-over 和 em-under 基线的定义。 (问题 5312)
• 对 vertical-align 的新语法进行了一些细微改进。 (问题 5235)
• 定义了 baseline-shift: sub | super 的回退位移。 (问题 5225)

自 2020年6月4日工作草案 以来的变更：

• 重新设计了早期 line-sizing 和 text-box-trim 提案之间的关系，创建了 text-edge 以及结构不同的 leading-trim。 (问题 5168)
• 将 line-relative shift values 从 vertical-align 的简写属性移到 baseline-shift 的长属性中。 (问题 5180)
• 将 text-edge 集成到 行框高度计算 中。
• 将各种基线的定义重构为 它们自己的部分，并从 [CSS-WRITING-MODES-3] 中导入引言和核心术语。
• 从 [CSS2] 导入并更新/集成了剩余的基线对齐和行框大小调整的相关内容。
• 定义了所有基线的原子内联基线合成规则。
• 明确地将 中央基线 定义为 表意 中央基线。
• 定义了 首字母框 与后续文本之间的空白折叠。 (问题 5120)
• 加强了 首字母框 的盒模型定义，包括与其 包含块 的交互。 (问题 719)
• 各种小修复、澄清和编辑改进。

自 2018年8月8日工作草案 以来的变更：

• 添加了 line-sizing 属性来控制行间距的计算方式。 (问题 3199)
• 添加了 baseline-source 属性来控制对齐时使用第一个还是最后一个基线。 (问题 861)
• 添加了 leading-trim 提案，用于控制行框布局中 line-over/line-under 边缘的度量。 (问题 3240 和 3955)
• 从 [CSS2] 导入了 line-height 的定义和相关的规范文本。
• 改进了 § 2 Inline Layout Model 中的内联布局高级描述。
• 将 initial-letters 重命名回 initial-letter。 (问题 862)
• 添加了 raise 和 sink 关键词以简化语法。 (问题 2955)
• 指定了对于没有基线设置的 原子内联 的基线合成。
• 明确了 middle、 text-top 和 text-bottom 在 垂直书写模式 中的解释。 (问题 4495)
• 澄清了 text-top、text-bottom 和 text 值应在 vertical-align、dominant-baseline、leading-trim 以及绘制内联框内容框时保持一致的解释。 (问题 3978)
• 修正了 dominant-baseline 的初始值为 auto。 (问题 4115)
• 改进了关于 vertical-align 长属性和简写属性的撰写建议中的一些细微之处。
• 阐明了 initial-letter 和 float/position 的交互。
• 重新组织了 § 7.5 Initial Letter Layout 部分，以提高可读性，并对部分措辞进行了微调。
• 定义了 shape-margin 应用于字形轮廓。
• 切换了基线合成规则，以使用 永 (U+6C38) 作为表意字形边缘。
• 指定 首字母 在形状处理中是孤立的，即使它之后的文本仍保持连接形式。 (问题 2399)

另请参阅早期 自 2016年5月24日工作草案以来的更改。

致谢

特别感谢初始作者 Eric A. Meyer 和 Michel Suignard。

除了作者之外，这份规范的完成还要感谢以下人士的帮助：

David Baron， Mike Bremford， David M Brown， Oriol Brufau， John Daggett， Stephen Deach， Sylvain Galineau， David Hyatt， Myles Maxfield， Shinyu Murakami， Jan Nicklas， Tess O’Connor， Sujal Parikh， Florian Rivoal， Alan Stearns， Weston Thayer， Bobby Tung， Chris Wilson， Grzegorz Zygmunt。

隐私考虑

本规范没有报告新的隐私考虑事项。

安全考虑

本规范没有报告新的安全考虑事项。