CSS 节奏尺寸模块第 1 级

1. 引言

本规范提供了一些特性，用于按照用例所期望的规则来控制 CSS 对象的尺寸。

在很多情况下，希望将 CSS 对象的尺寸控制为某个步进单位的整数倍。本级规范聚焦于以下情况。

将块级框的高度调整为指定长度的整数倍。
将行框的高度调整为指定长度的整数倍。

通过以整数倍的方式堆叠块，作者可以在多列、分页、滚动吸附的块或多个绝对定位放置的块之间对齐内容，以保持纵向节奏。

此外，通过控制行框的高度，不同字体的文本行也能形成一致的视觉效果，从而提升可读性。

1.1. 东亚随意纵向节奏

在东亚，一种较为随意的纵向节奏变体被广泛使用。

纵向节奏通常用于专业排版。虽然它能提升可读性，但其间距约束要求对空间进行谨慎且周密的设计。

东亚的随意变体最初源于 80 年代传统文字处理器的技术限制。但当这些技术限制在更现代的技术中被解除后，在表意文字近似方块的视觉效果帮助下，东亚作者更倾向于保留其中一部分特性。

在这种纵向节奏变体中，为了便于非专业作者使用，其要求被放宽。文本仍然遵循节奏，因而大多数表意文字大体上仍落在网格上；但当作者指定边框、外边距或其他可能打破节奏的对象时，节奏会发生偏移，而不是被强行维持。严格的纵向节奏在这类情况下常因被强制跳变而让非专业作者感到意外；而这种变体把文本上的节奏与非专业作者的易用性结合在一起。

自 90 年代中期以来，这种变体在东亚被非常广泛地接受，以至于东亚使用的大多数主流文字处理器默认都��供了类似功能。

在东亚出版排版中，纵向节奏是重要属性之一，但它相对于其他属性的优先级会因文档类型而异。在单栏文档中，其优先级弱于多栏文档。文本应当处在纵向节奏上，但人们往往更倾向于让边框、外边距或其他属性优先于节奏。在这种情况下，节奏会被偏移，类似于随意变体。

在本规范中，当 line-height-step 属性在不与 block-step 属性或 line-grid 属性组合使用时，会产生与东亚随意纵向节奏类似的效果。

它对东亚出版排版也可能很有帮助，这取决于所期望的纵向节奏强度。

对于纵向节奏的其他情况，预期会使用 block-step 属性或 line-grid 属性，或者将 line-height-step 属性与它们一��使用。

1.2. 值定义

本规范遵循 CSS 属性定义约定（来自 [CSS2]），并使用值定义语法（来自 [CSS-VALUES-3]）。本规范未定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中定义。与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除各自定义中列出的属性特定值之外，本规范中定义的所有属性也都接受 CSS 全局关键字作为其属性值。为了便于阅读，这些关键字未在文中重复显式列出。

2. 调整块级框高度

最常见的排版节奏问题是块级侵入：当连续的段落级文本被插图、标题等不同尺寸的内容打断时，行与行之间的节奏就可能被打乱。块步进属性允许通过将这些元素的高度限制为指定步长的整数倍，使其适配节奏间隔。这使得打断前后的内容能保持连续的节奏。

一致地使用块步进属性可以产生并行内容流所需的严格网格化布局；而按元素指定步长也允许某些打断在流中采用其自然尺寸，并在之后重新开始纵向节奏。这在单栏布局中可能很有用：纵向节奏对于保持视觉连续性很重要，但旁边没有需要对齐的内容。在这些情况下，对于在视觉上使打断前后内容脱节的大型打断项，可以让该项周围的最优间距优先于对连续网格的严格遵循（通过指定 block-step: none，即初始值）。

该提案可以简化为仅使用 block-step-size 属性，并且只通过其缩写形式 block-step 来表示。本级规范很可能最多只包含 block-step-size 和 block-step-insert，而将 block-step-align 与 block-step-round 留待未来如有需求再加入。完整设计在此给出，用于当前讨论及未来参考。

该提案目前被定义为仅适用于块级框。此限制仅为简化第一次迭代；它最终应扩展到所有尊重指定高度的布局模式。

2.1. 指定步长：block-step-size 属性

名称：	block-step-size
值：	none \| <length [0,∞]>
初始值：	none
适用对象：	块级框
是否继承：	否
百分比：	不适用
计算值：	指定关键字或绝对长度
规范顺序：	按语法
动画类型：	按计算值类型

Tests

此属性为块级框的块尺寸定义步进单位。当步进单位被设置为正的 <length> 时，该框的外部高度会被舍入（见 block-step-round）到该单位的最接近整数倍。负的 <length> 值无效。

除 none 之外的值会使该框建立一个独立的格式化上下文。

注：这是为了避免祖先的浮动突出进入该框所带来的复杂性：改变其有效的上外边距或内边距可能会改变哪些内容会被浮动影响以及影响程度，从而需要重新布局（并且在该框的高度依赖其内容时，可能产生循环）。

这是打破此类循环的最佳方式吗？ [Issue #1901]

在外边距发生折叠的情况下，计算其外部尺寸时只考虑该框自身的外边距。

当一个框发生分片时，步进尺寸按每个分片分别应用。

我们是否应将其与 text-box-edge/text-box-trim 的继承与应用模型对齐？ [Issue #1902]

2.2. 指定间距类型：block-step-insert 属性

名称：	block-step-insert
值：	margin-box \| padding-box \| content-box
初始值：	margin-box
适用对象：	块级框
是否继承：	否
百分比：	不适用
计算值：	指定关键字
规范顺序：	按语法
动画类型：	离散

Tests

此属性指定由应用 block-step-size 派生出的额外间距是作为框边框之内的额外空间（类似 padding）插入，还是作为框边框之外的额外空间（类似 margin）插入，或者改变内容可用高度（类似 min-height 或 max-height）。

各值含义如下：

margin-box: 由 block-step-size 导致的调整所产生的任何额外空间会作为额外外边距插入到框边框之外。
padding-box: 由 block-step-size 导致的调整所产生的任何额外空间会作为额外内边距插入到框边框之内。
content-box: 由 block-step-size 导致的调整所产生的任何额外空间会通过增加内容区域的高度插入到框边框之内。

2.3. 指定对齐：block-step-align 属性

名称：	block-step-align
值：	auto \| center \| start \| end
初始值：	auto
适用对象：	块级框
是否继承：	否
百分比：	不适用
计算值：	指定关键字
规范顺序：	按语法
动画类型：	离散

Tests

此属性指定由应用 block-step-size 派生出的额外间距是插入到该框之前、插入到该框之后，还是分摊到该框两侧。

各值含义如下：

auto: 如果 block-step-insert 为 margin-box：若 align-self 为 start、end 或 center，则按该值处理；否则按 center 处理。
center: 由 block-step-size 导致的调整所产生的任何额外空间会被分割，并各有一半应用于该框的两侧。
start: 由 block-step-size 导致的调整所产生的任何额外空间会插入到该框的 end 侧。
end: 由 block-step-size 导致的调整所产生的任何额外空间会插入到该框的 start 侧。

定义与 align-content 的交互。 [Issue #11206]

在所有情况下，由于未强制的分片断点导致被截断或省略的外边距不能添加额外间距（见 [CSS3-PAGE] 与 [CSS-BREAK-3]）；因此若 block-step-insert 为 margin-box，则由应用 block-step-size 派生出的所有额外空间必须插入到该分片的相反一侧（无论 block-step-align 为何）。

该规则正确吗？还是说即便在分片边界处也应遵循 block-step-align？ [Issue #1260]

2.4. 舍入方法：block-step-round 属性

名称：	block-step-round
值：	up \| down \| nearest
初始值：	up
适用对象：	块级框
是否继承：	否
百分比：	不适用
计算值：	指定关键字
规范顺序：	按语法
动画类型：	离散

Tests

此属性指定由 block-step-size 引起的调整是插入正空间还是负空间。

各值含义如下：

up: 该框的外部尺寸会被增大（插入正空间）以满足 block-step-size 约束。
down: 该框的外部尺寸会被减小（插入负空间）以满足 block-step-size 约束。
nearest: 该框的外部尺寸要么增大（同 up），要么减小（同 down）——以绝对变化量最小者为准——从而满足 block-step-size 约束。若两种选择的变化量相同，则增大尺寸。

2.5. 块步调整简写：block-step 简写

名称：	block-step
值：	<'block-step-size'> \|\| <'block-step-insert'> \|\| <'block-step-align'> \|\| <'block-step-round'>
初始值：	见各个属性
适用对象：	块级框
是否继承：	否
百分比：	不适用
计算值：	见各个属性
动画类型：	见各个属性
规范顺序：	按语法

Tests

该简写属性允许在一条声明中设置 block-step-size、block-step-insert、block-step-align 以及 block-step-round。省略的值会被设置为该属性的初始值。

建议作者使用此简写，而不是分别使用各长写属性，除非确有需要让各长写属性独立层叠。

3. 调整行框高度：line-height-step 属性

名称：	line-height-step
值：	<length [0,∞]>
初始值：	0
适用对象：	块容器
是否继承：	是
百分比：	��适用
计算值：	绝对长度
规范顺序：	按语法
动画类型：	按计算值类型

此属性为行框高度定义步进单位。步进单位是纵向节奏的长度，通常是正文相邻两条基线之间的距离。正文应能容纳在一个步进单位之内，而诸如标题等更高的行应具有两个或更多步进单位的高度。纵向节奏通过使所有行的高度成为步进单位的整数倍来创建。

当步进单位被设置为正的 <length> 时，行框高度会向上舍入到最接近的该单位的整数倍。负的 <length> 值无效。

[CSS2] §10.8 行高计算定义了如何从其行内级内容计算行框的高度。舍入应用于行框的最终高度，额外空间会平均分配到行框的 over 侧与 under 侧，从而使原始行框在该步进单位的整数倍高度中居中显示。此调整通过假定行框中存在一个行内级框（其 A' 与 D' 已被调整）来完成。该行内级框不影响 vertical-align 属性的对齐点，但相对于行框对齐的取值除外。

将计算得到的行框高度向上舍入。

是否应当可动画化？似乎没有用例，但为了一致性是否需要？

在下面的例子中，每个段落中的行框高度都会向上舍入到步进单位。

:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
p {
  margin: 0;
}

<h1> 中的行框无法容纳在一个步进单位中，因此占用两个；但它仍会在这两个步进单位内居中。

作者可以像上面的例子那样，使用 var() 和 calc() 来保持外边距或其他属性为步进单位的整数倍。

如果作者愿意， Sass 之类的工具可以使这类声明更简短。

$gu: 18px;

@function gu($n) {
  @return $n * $gu;
}

h1 {
  font-size: 20pt;
  margin: gu(1.2) auto gu(1.8);
}

通常建议将 line-height 设置得低于步进单位。由于 vertical-align 或字体回退等若干因素，使用的行高可能会增大。

4. 隐私注意事项

本规范未引入除“正确实现它”之外的任何新的隐私泄露。

5. 安全注意事项

本规范未引入除“正确实现它”之外的任何新的安全注意事项。

6. 致谢

若没有以下人士的帮助，本规范不可能完成： Masaharu Akutsu， Yoko Aoki， Takao Baba， Chris Eppstein， Ichiro Inaba， Jxck， Noriko Kase， Motoya Kinoshita， Shinyu Murakami， Tsutomu Nanjo， Kiyoshi Narishima， Charlie Neely， Takuya Nishimura， Katsuhiro Osumi， Florian Rivoal， Hiroshi Sakakibara， Alan Stearns， Masataka Yakura， KADOKAWA Corporation， PixelGrid Inc.，以及 CSS 工作组成员。

7. 变更

自首份公开工作草案以来的变更包括：

在引言中加入了与东亚随意纵向节奏的交互。
定义了对被截断外边距的处理。（Issue 1260）
将 margin-box 添加到 block-step-insert，并将其他值重命名以匹配 *-box 模式。（Issue 10486）
从 line-height-step 中移除了 none 值。（Issue 1151）
定义了 block-step 与分片的交互。
使属性元数据与最新实践对齐。
添加了 Web Platform Tests 覆盖。
编辑改进与 bug 修复。

一致性

文档约定

一致性要求通过描述性断言与 RFC 2119 术语的组合来表达。规范性部分中的关键词 “MUST”， “MUST NOT”， “REQUIRED”， “SHALL”， “SHALL NOT”， “SHOULD”， “SHOULD NOT”， “RECOMMENDED”， “MAY”，以及 “OPTIONAL” 应按 RFC 2119 中所述进行解释。然而，为了便于阅读，这些词在本规范中并未全部以全大写字母出现。

除非某些章节被明确标记为非规范性内容、示例和注释之外，本规范的全部文本均为规范性内容。 [RFC2119]

本规范中的示例以 “例如” 等词引入，或者使用 class="example" 将其与规范性文本区分开来，如下所示：

资料性注释以 “注” 一词开头，并使用 class="note" 将其与规范性文本区分开来，如下所示：

提示（Advisements）是以特殊样式呈现、用于引起特别注意的规范性章节，并使用 <strong class="advisement"> 将其与其他规范性文本区分开来，例如： 用户代理必须提供一种无障碍替代方案。

一致性类别

若某样式表中所有使用本模块定义语法的声明都符合通用 CSS 语法以及本模块中每个特性各自的语法，则该样式表符合本规范。

若某渲染器除了按相应规范解释样式表之外，还能通过正确解析并相应渲染文档来支持本规范定义的所有特性，则该渲染器符合本规范。然而，UA 因设备限制而无法正确渲染文档并不会使该 UA 不符合规范。（例如，UA 不要求在单色显示器上渲染颜色。）

若某创作工具编写的样式表在语法上符合通用 CSS 语法以及本模块中各特性的各自语法，并满足本模块所述的样式表的所有其他一致性要求，则该创作工具符合本规范。

部分实现

为了使作者能够利用前向兼容的解析规则来指定回退值， CSS 渲染器必须将其不具备可用支持级别的任何 at 规则、属性、属性值、关键字以及其他语法结构视为无效（并按需忽略）。尤其是，用户代理不得在单个多值属性声明中选择性忽略不支持的组件值而对支持的值予以认可：若任一值被视为无效（不支持的值必须如此），CSS 要求忽略整条声明。

不稳定与专有特性的实现

非试验性实现

当某规范达到候选推荐（Candidate Recommendation）阶段后，就可能出现非试验性实现，且实现者应发布其能够证明已按规范正确实现的任何 CR 级特性的无前缀实现。

为建立并维持 CSS 在不同实现之间的互操作性， CSS 工作组请求非试验性的 CSS 渲染器在发布任何 CSS 特性的无前缀实现之前，向 W3C 提交实现报告（以及在必要时，用于该实现报告的测试用例）。提交给 W3C 的测试用例将由 CSS 工作组进行审查与修正。

CSS 节奏尺寸模块第 1 级

摘要

本文档状态