CSS 注音（Ruby）布局模块第 1 级

1. 简介

1.1. 什么是 ruby？

本小节不具约束性。

Ruby 是出现在另一段文本（称为“基准文本”）旁边，并作为该文本的注释或发音指南的文本序列的常用名称。

下图显示了两个 Ruby 示例，一个是简单情况，另一个是结构更复杂的情况。

在此示例中，使用单个注释来标注由多个字符组成的基准文本。

日语中的 ruby 示例（简单情况）

在日语排版中，这种情况有时被称为“对语ルビ”（日语：対語ルビ，即单词级 ruby）或组 ruby，因为整个注释与多字符单词（作为一个整体）相关联。

在第二个示例中，基准文本附加了两层注释：顶部的平假名字符指向每个汉字基准字符的发音，而底部的单词“Keio”和“University”则提供了英文翻译。

基准字符上方和下方带有注释文本的复杂 ruby

请注意，为了反映平假名字符与其对应的汉字基准字符之间的正确关联，基准层文本内的间距进行了调整。（这发生在上图第四个汉字附近，该汉字有三个平假名注音。）为了避免上述示例中基准文本的间距不一致，平假名注释可以样式化为 合并注释，它看起来更像前面的组 ruby 示例。然而，由于基准-注释 配对 已记录在 ruby 结构中，如果文本跨行断开，注释字符将保持与各自的基准字符正确配对。

在 HTML 中，ruby 结构和表示它的标记在“Ruby 标记扩展”规范中描述。本模块描述了此类标记的 ruby 布局相关的 CSS 渲染模型和格式化控件。

关于 Ruby 及其格式化的更深入介绍，请参阅“什么是 Ruby”文章 [QA-RUBY]。关于日语中传统上格式化 ruby 的主要方式的广泛信息，可以在 JIS X-4051 [JIS4051]（日语）以及 日语排版要求 [JLREQ] 中的 “Ruby 和着重号”（英语和日语）中找到；日语 Ruby 简单放置规则 [SIMPLE-RUBY] 也描述（英语）了一种可能的日语 ruby 格式化方法。中文排版要求 [CLREQ] 中的 “行间注释” 描述了中文排版的相关实践（中文和英语）。

1.2. 模块交互

本模块扩展了 CSS 2 级 [CSS2] 的行内盒模型以支持 ruby。

本模块中的属性均不适用于 ::first-line 或 ::first-letter 伪元素；但是 ruby-position 可以通过 ::first-line 继承，从而影响第一行上的 ruby 注释。

1.3. 值定义

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

除了其定义中列出的属性特定值外，本规范中定义的所有属性也都接受CSS 宽关键字作为其属性值。为了可读性，未明确重复列出。

1.4. 图示约定

本小节不具约束性。

东亚排版中的许多排版约定取决于所渲染的字符是宽字符（CJK）还是窄字符（非 CJK）。本文档中有许多图示使用了以下图例

宽单元格字形（例如汉字），是文本序列中的第 n 个字符。当用作注释时，它们通常被缩放至 50%。

窄单元格字形（例如罗马字母），是文本序列中的第 n 个字形。

上述符号在图中采用的方向对应于用户代理在渲染时这些字形所预期的方向。除非有意为了说明问题而更改，图中的字符间距是随意的。

2. Ruby 盒模型

CSS ruby 模型基于 W3C HTML5 Ruby 标记 模型和 XHTML Ruby 注释建议 [RUBY]。在此模型中，ruby 结构由一个或多个代表基准（被标注）文本的 ruby 基准 元素组成，并与一个或多个代表注释的 ruby 注释 元素层级相关联。Ruby 的结构类似于表格：有“行”（基准文本层，每个 注释层）和“列”（每个 ruby 基准 及其对应的 ruby 注释）。

连续的基准序列及其连续的注释序列被归组为 ruby 分段。在 ruby 分段 内，一个 ruby 注释 可以跨越多个 ruby 基准。

注意： 在 HTML 中，单个 <ruby> 元素可以包含多个 ruby 分段。（在 XHTML Ruby 模型中，单个 <ruby> 元素只能包含一个 ruby 分段。）

2.1. Ruby 特有的 display 值

对于没有预定义 ruby 元素的文档语言（如 XML 应用），作者必须将文档语言元素映射到 ruby 元素；这是通过 display 属性完成的。

以下新的 display 值将 ruby 布局角色分配给任意元素

ruby

指定元素生成 ruby 容器盒。（对应 HTML/XHTML <ruby> 元素。）

ruby-base

指定元素生成 ruby 基准盒。（对应 HTML/XHTML <rb> 元素。）

ruby-text

指定元素生成 ruby 注释盒。（对应 HTML/XHTML <rt> 元素。）

ruby-base-container

指定元素生成 ruby 基准容器盒。（对应 XHTML <rbc> 元素；在 HTML 中作为匿名盒生成。）

ruby-text-container

指定元素生成 ruby 注释容器盒。（对应 HTML/XHTML <rtc> 元素。）

使用支持专用 ruby 标记的语言（如 HTML）的作者应使用该标记，而不是使用 ruby display 值来样式化任意元素（如 <span>）。使用正确的标记可确保屏幕阅读器和非 CSS 渲染器能够解释 ruby 结构。

注意： 置换元素 的 display 值为 ruby-base、ruby-text、ruby-base-container 和 ruby-text-container，它们被视为 行内级盒，根据 CSS Display 3 § 2.4 布局内部显示类型：table-* 和 ruby-* 关键字；置换元素 的 display 值为 ruby 或 inline ruby，其行为根据其 外部显示类型，根据 CSS Display 3 § 2.1 流式布局的外部显示角色：block、inline 和 run-in 关键字。（另见 § 2.1.2 非行内 Ruby。）

2.1.1. Ruby 格式化上下文

Ruby 容器 是非原子的 行内级 盒。像常规的 行内盒 一样（参见 CSS 行内布局 3 § 2 行内布局模型），它们会跨行断开，并且其 包含块 是最近的 块容器 祖先。正如 行内盒 的内容参与包含该 行内盒 本身的同一个 行内格式化上下文 一样，ruby 容器 及其基准级内容也参与包含该 ruby 容器 本身的同一个 行内格式化上下文。

然而，ruby 容器 也建立了一个 ruby 格式化上下文，它围绕其 行内格式化上下文 的分段构建进一步的结构，以便容纳它们的注释。注意：此 格式化上下文 不是 独立格式化上下文。 Ruby 基准、ruby 注释、ruby 基准容器 和 ruby 注释容器 都是 内部 ruby 盒：像 内部表格元素 一样，它们在 ruby 布局中具有特定的角色，并参与其 ruby 容器 的 ruby 格式化上下文。除了在 ruby 格式化上下文 中的角色外，ruby 基准 同时参与与 ruby 容器 相同的基准级 行内格式化上下文，而 ruby 注释 则参与由 ruby 容器 建立的单独的注释级 行内格式化上下文。

与 行内盒 的内容一样，ruby 容器（及其所有 内部 ruby 盒）的内容的 包含块 是 ruby 容器 的 包含块。因此，例如浮动元素会被 ruby 容器 的 包含块 捕获，而不是被任何 ruby 盒类型捕获。

2.1.2. 非行内 Ruby

如果一个元素的 内部显示类型 为 ruby，且 外部显示类型 不是 inline，那么它会生成两个盒：一个是所需 外部显示类型 类型的首要盒，另一个是行内级 ruby 容器。指定在元素上的所有属性都应用于首要盒（如果是可继承的，则继承给 ruby 容器盒）。这允许将元素样式化为块级，同时正确维护内部 ruby 结构。

注意： 绝对定位或浮动元素会导致其 display 值计算为块级等效值。（参见 [CSS-DISPLAY-3] 或 [CSS2] 9.7 节。）对于 内部 ruby 显示类型，这会导致其 display 值计算为 block。

2.2. 匿名 Ruby 盒生成

CSS 模型不要求文档语言包含对应于这些组件中的每一个的元素。结构中缺失的部分通过匿名盒生成规则隐含，类似于用于规范化表格的规则。[CSS2]

1. 内联化 块级盒： 任何由 ruby 容器、ruby 基准容器、ruby 注释容器、ruby 基准盒 或 ruby 注释盒 直接包含的流内盒都会根据 [CSS-DISPLAY-3] 进行“内联化”，其 display 值相应计算，以使其仅包含行内级内容。例如，一个由 display: ruby-text 的元素作为父元素的流内元素，其 display 属性为 display: block，则计算为 inline-block。
2. 生成匿名 ruby 容器： 任何 连续 的未正确包含的 ruby 基准容器、ruby 注释容器、ruby 基准 和/或 ruby 注释（以及任何介入的 空白符）序列都会被包裹在一个匿名的 ruby 容器 中。为了此步骤的目的
   • 未正确包含的 ruby 基准 是指父元素不是 ruby 基准容器 或 ruby 容器 的基准
   • 未正确包含的 ruby 注释 是指父元素不是 ruby 注释容器 或 ruby 容器 的注释
   • 未正确包含的 ruby 基准容器 或 ruby 注释容器 是指父元素不是 ruby 容器 的容器
3. 包裹父元素不正确的行内级内容： 任何由 ruby 容器 或 ruby 基准容器 直接作为父元素的连续文本和行内级盒序列都会被包裹在匿名的 ruby 基准 中。类似地，任何由 ruby 注释容器 直接作为父元素的连续文本和行内级盒序列都会被包裹在匿名的 ruby 注释 中。（为此目的，父元素不正确的 内部表格元素 被视为 行内级内容，因为它们被 ruby 盒包裹，最终会被 表格包装盒 的 行内级 部分包裹。）

   然而，如果以这种方式构建的匿名盒仅包含 空白符，它被视为 ruby 内部空白符，并按照下文所述进行丢弃或保留。

4. 修剪首尾空白符： 任何不是其父元素的唯一 流内 子元素，且是 ruby 容器、ruby 注释容器 或 ruby 基准容器 的第一个或最后一个 流内 子元素的 ruby 内部空白符 都会被移除，就像它具有 display: none 一样
5. 移除层间空白符： 任何其紧邻的 流内 兄弟元素匹配以下模式之一的 ruby 内部空白符 是 层间空白符，并将被移除，就像它具有 display: none 一样。

   前一个盒	下一个盒
   任意 (any)	ruby 注释容器
   不是 ruby 注释	Ruby 注释

6. 解释层内空白符： 任何其紧邻的 流内 兄弟元素匹配以下模式之一的 ruby 内部空白符 盒被分配下表中定义的盒类型和子类型

   前一个盒	下一个盒	盒类型	子类型
   Ruby 基准	Ruby 基准	Ruby 基准	基准间空白符
   Ruby 注释	Ruby 注释	Ruby 注释	注释间空白符
   ruby 注释 或 ruby 注释容器	ruby 基准 或 ruby 基准容器	Ruby 基准	分段间空白符
   ruby 基准 或 ruby 基准容器	注音基准容器
   注音基准容器	ruby 基准 或 ruby 基准容器

   上面定义的 层内空白符 盒在 配对 和布局中受到特殊处理。见下文。
7. 禁止断行： 将 ruby 注释 内的所有强制换行符转换为 CSS 文本 3 级 § 4.1.2 中定义的折叠分段符（无论 white-space 值如何）。

   这样做的目的是通过禁止 ruby 注释内的任何断行来简化布局模型。或者，我们可以尝试定义某种可以接受的行为。

8. 生成匿名层容器： 任何未由 ruby 基准容器 作为父元素的连续 ruby 基准 和 基准间空白符（且不是 分段间空白符）序列都会被包裹在匿名的 ruby 基准容器 中。类似地，任何未由 ruby 注释容器 作为父元素的连续 ruby 注释 和 注释间空白符 序列都会被包裹在匿名的 ruby 注释容器 中。

一旦所有 ruby 布局结构都正确地有了父元素，用户代理就可以开始将基准文本与它们的注释进行关联。

注意： 用户代理不需要在其内部结构中创建任何这些匿名盒（或 § 2.3 注释配对 中提到的匿名空 层内空白符 盒），只要 配对 和布局的行为就像它们存在一样即可。

<ruby>×<rbc>×<rb></rb>⬕<rb></rb>×</rbc>☒<rtc>×<rt></rt>⬔<rt></rt>×</rtc>◼<rbc>×<rb></rb>…</rtc>×</ruby>

2.3. 注释配对

注释 配对 是将 ruby 注释 与 ruby 基准 相关联的过程。每个 ruby 注释 与一个或多个 ruby 基准 相关联，并称其 跨越 那些基准。（跨度注释 是指 跨越 多个基准的 ruby 注释。）

每个 ruby 基准 在每个 注释层 中只能与一个 ruby 注释 相关联。但是，如果有多个 注释层，它可以与多个 ruby 注释 相关联。

一旦 配对 完成，ruby 列 就会被定义，每一列由单个 ruby 基准 和来自其 ruby 分段 中每个 行间 注释层 的一个 ruby 注释（可能是空的、匿名的注释）表示。

2.3.1. 分段配对与注释层级

ruby 结构被划分为 ruby 分段，每个分段由单个 ruby 基准容器 后跟一个或多个 ruby 注释容器 组成。ruby 分段 中的每个 ruby 注释容器 代表基准文本的一层 层级：第一个容器代表第一层注释，第二个容器代表第二层注释，依此类推。ruby 基准容器 代表 基准层。ruby 基准容器 在每个分段中因此与该分段中的每个 ruby 注释容器 配对。

为了处理退化情况，假定存在一些空的匿名容器

• 如果 ruby 容器 的第一个子元素是 ruby 注释容器，则假定在其之前存在一个匿名的、空的 ruby 基准容器。
• 类似地，如果 ruby 容器 包含连续的 ruby 基准容器，则假定在它们之间存在匿名的、空的 ruby 注释容器。

分段间空白符 本身实际上是一个 ruby 分段。

2.3.2. 单元配对与跨度注释

在 ruby 分段 内，ruby 基准容器 中的每个 ruby 基准 都与来自其 ruby 分段 中每个 ruby 注释容器 的一个 ruby 注释 配对。

如果一个 ruby 注释容器 仅包含单个、匿名的 ruby 注释，那么该 ruby 注释 将与 ruby 分段 中的所有 ruby 基准 配对（即 跨越）。

否则，每个 ruby 注释 按文档顺序与该分段中对应的 ruby 基准 配对。如果 ruby 注释容器 中没有足够的 ruby 注释，剩余的 ruby 基准 将与插入在 ruby 注释容器 末尾的匿名空注释配对。如果 ruby 基准 不够，任何剩余的 ruby 注释 将与插入在 ruby 基准容器 末尾的空匿名基准配对。

如果实现支持具有显式跨度的 ruby 标记（例如 XHTML 复杂 Ruby 注释），它必须调整 配对 规则，以将 跨度注释 适当地与它们的基准配对。

层内空白符 不参与标准的注释 配对。但是，如果紧邻的 ruby 基准 或 ruby 注释 是配对的，

• 并且带有两个 ruby 基准 或 注释，包围了另一层中对应的 层内空白符，则对应的 层内空白符 盒也会被配对。
• 并且带有单个跨越的 ruby 注释，则 层内空白符 也与该 ruby 注释 配对
• 并且带有两个没有介入 层内空白符 的 ruby 基准 或 注释，则 层内空白符 盒与假定存在于它们之间的匿名空 层内空白符 盒配对。

|[  s p a n n i n g   a n n o t a t i o n ]|
|[ a1 ]|[ws]|[ a2 ]|[  ]|[ a3 ]|[ws]|[ a4 ]|
|[ b1 ]|[ws]|[ b2 ]|[ws]|[ b3 ]|[  ]|[ b4 ]|

2.4. 隐藏注释：visibility: collapse 与自动隐藏 ruby

visibility 为 collapse 的 ruby 注释 是 隐藏注释。此外，如果一个 ruby 注释 具有与其基准完全相同的文本内容，它会被用户代理自动 隐藏（自动隐藏）。

隐藏 ruby 注释 不会影响注释 配对。但是 隐藏注释 是不可见的，除了在同级中分隔相邻的 ruby 注释盒 序列外，它对布局没有其他影响，就像它们属于不同的分段，且 隐藏注释 的基准不是 ruby 基准，而是介入的行内元素一样。

自动隐藏允许对汉字和假名混合的日语单词进行正确的注释行内显示。例如，单词 振り仮名 应行内显示为

振り仮名(ふりがな)

因此被标记为

<ruby>
  <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
  <rp>(</rp><rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt><rp>)</rp>
</ruby>

然而，当作为 ruby 显示时，其中的“り”应该被隐藏

振り仮名 的平假名 ruby。注意，り 上方没有平假名注释，因为它已经是平假名。

本示例中的日语单词由三个汉字组成，其中一个是小学一年级教授的，另外两个较深奥。（颜色标注以显示基准对对应关系。）

<ruby><rb>昆<rb>虫<rb>記<rt>こん<rt class=easy>ちゅう<rt>き</ruby>

虽然有些读者可能需要在所有三个字符上获得发音指导，但对于其他受众，隐藏较容易字符上的注释更为合适。应用 visibility: collapse 可以实现这种隐藏

visibility: collapse 的 隐藏 行为不同于 visibility: hidden——后者使注释不可见，但不会消除其对布局的影响

它也不同于 display: none，因为 visibility: collapse 保留了配对关系，而 display: none 将盒从树中完全移除，扰乱了其后任何注释的配对

当 注释容器 上 ruby-merge 的 计算值 为 merge 时，隐藏 被禁用。当该值为 auto 时，用户代理可以决定是否禁用其注释的 隐藏，但如果用户代理的布局算法产生的结果类似于 separate，则建议启用 隐藏。

自动隐藏 的内容比较发生在空白符折叠（white-space）和文本转换（text-transform）之前，并忽略元素（仅考虑盒的 textContent）。

注意： 未来等级的 CSS Ruby 可能会为 自动隐藏 添加控件，但在本等级中，它是始终强制执行的。

2.5. 空白符折叠

如 § 2.2 匿名 Ruby 盒生成 中所述，ruby 结构内的空白符会被 丢弃

• 在 ruby 容器、注释容器 或 基准容器 的开头和结尾，
• 在 基准容器 及其随后的 注释容器 之间，
• 在 注释容器 之间。

<ruby>
  <rb>東</rb><rb>京</rb>
  <rt>とう</rt><rt>きょう</rt>
  <rtc><rt>Tō</rt><rt>kyō</rt></rtc>
</ruby>

然而，在 ruby 分段 之间，在 ruby 基准 之间，以及在 ruby 注释 之间，空白符不会被丢弃，并保留以便作为 基准间、注释间 或 分段间空白符 进行渲染。（参见上文的 解释层内空白符。）

<ruby>
  <rb>W</rb><rb>W</rb><rb>W</rb>
  <rt>World</rt> <rt>Wide</rt> <rt>Web</rt>
</ruby>

<ruby>
  <rb>Aerith</rb><rb> </rb><rb>Gainsborough</rb>
  <rt>エアリス</rt><rt>・</rt><rt>ゲインズブール</rt>
</ruby>

在未丢弃的空白符 可折叠 的地方，它将按照标准的 空白符处理规则 [CSS-TEXT-3] 在每一行盒中跨相邻盒折叠。在单独的 ruby 分段 中或由 隐藏注释 分隔的注释不被视为相邻；然而，所有基准级内容（包括被视为 原子行内元素 的 字符间注释）都被视为相邻。对于 可折叠空白符 在 ruby 分段（分段间空白符）之间的情况，确定 分段断行转换 的上下文文本由两侧的 ruby 基准 给出，而不一定是源文档顺序中空白符两侧的文本（这可能包括 行间注释）。

<ruby>
  屋<rt>おく</rt>内<rt>ない</rt>
  禁<rt>きん</rt>煙<rt>えん</rt>
</ruby>

<ruby>
  屋<rt>おく</rt>  内<rt>ない</rt>
  禁<rt>きん</rt>  煙<rt>えん</rt>
</ruby>

3. Ruby 布局

当布局 ruby 结构时，其 基准层 最初会布局在行上，就像其 ruby 基准 是常规的 行内盒 序列，而 ruby 容器 是围绕它包裹的常规 行内盒 一样。

如果 ruby 容器 具有任何 字符间注释，它们会按照 § 3.2 字符间 Ruby 布局 中的详细说明布局到 基准层 中。随后，基准容器 进行尺寸调整，行间注释 按照 § 3.1 行间 Ruby 布局 中的详细说明进行布局。

与其他 CSS 布局模型一样，相对定位、变换和其他图形效果在这些盒的布局之后应用。

3.1. 行间 Ruby 布局

层内的 行间 ruby 注释 最初被布局为好像它们是参与相同 行内格式化上下文 的 行内盒，有效地为 ruby 容器 中该 层级 的注释建立了一个 行盒。注释 和 基准 通过调整它们的间距相互对齐，如下所述。

3.1.1. 行内轴行间布局

在行内轴上，行间 ruby 注释 根据其 注释容器 的 ruby-merge 值相对于它们的 ruby 基准盒 对齐。

当 ruby-merge 为 separate 时，每个 ruby 列 的尺寸调整为该 列 中最宽的内容（ruby 基准 或 ruby 注释）。在 跨度注释（无论是实际跨越还是按照 ruby-merge: merge 假装跨越）的情况下，如果 跨度注释 的内容比它跨越的 列 更宽，则差异会平均分配给跨越的 列。如果 ruby 分段 包含多个 跨度注释，这种额外空间的分配从跨越基准数最少的 跨度注释 开始，然后按照跨越基准数的递增顺序进行。每个 ruby 基准 和 ruby 注释 然后被调整为恰好跨越其列。

注意： 如果存在多个跨越相同数量基准但重叠但不一致的注释，空间分配是不确定的。注意，这在 HTML 标记中是不可能的，但在具有显式跨度的标记语言（如 [RUBY]）中可能会发生。

如果 ruby-merge: auto 的 注释容器 中的任何 ruby 注释 比其 基准 更宽，则该 注释容器 中的 ruby 注释 可能会延伸到其 列 之外。当它们延伸时，它们对所交叉 列 的度量的影响由用户代理决定，前提是 ruby 分段 的宽度足以容纳其所有内容。

字符间 注释交错在列之间：它们会影响跨越两个相邻列的注释的测量，但不会包含在任何一列中，也不会受到 行间注释 的尺寸调整或定位的影响。

在每个 基准 和 注释 盒内，当其内容比盒的尺寸更窄时，额外空间如何分配由其 ruby-align 属性指定。

3.1.2. 块轴行间布局

定义 vertical-align 影响这些 ruby 盒的程度。见 Issue 4987。

然后，每个 基准容器 进行尺寸调整和定位，以恰好包含其所有 ruby 基准 的外边距盒——以及它们关联的任何 字符间 ruby 注释 外边距盒（如果有的话）——以及任何参与此 行内格式化上下文 的后代 ruby 容器 的 基准 和 注释容器。（如果 基准容器 没有 流内 内容，则其尺寸调整和定位就像它包含单个空 ruby 基准 一样。）

每个 行间 注释容器 进行尺寸调整和定位，以恰好包含其所有 ruby 注释 的外边距盒，以及参与此 注释层级 行内格式化上下文 的任何后代 ruby 容器 的 基准 和 注释容器。（如果一个 注释容器 没有 流内 内容，则其尺寸调整和定位就像它包含单个空 ruby 注释 一样。）这些 注释容器 然后向外堆叠在它们对应的 基准容器 之上或之下（取决于 ruby-position），中间没有任何空间，从而确定 ruby 注释 相对于其 ruby 基准 的块轴定位。

块轴外边距应该折叠吗？这会使布局更稳健，但这与行内元素沿行内轴的行为方式不一致。

3.2. 字符间 Ruby 布局

字间注具有特殊的布局。 字间 ruby 注释框会被拼接到 基准层 的布局中并作为其一部分进行测量。每个 ruby 注释 都会插入到与其配对的 ruby 基准 右侧；一个 跨列 的 字间注 会被放置在它所跨越的所有基准中最右侧基准之后。 字间 ruby 注释 的布局方式与 行内块 (inline blocks) 完全相同，下述情况除外。

注： 根据 字间 (inter-character) 的定义，字间注 始终具有 vertical-rl 的 书写模式 (writing-mode)，并且仅存在于 水平 ruby 容器 中。

每个 ruby 注释 都被放置在相关 ruby 基准 的紧右侧，位于任何 基准间空白（或 片段间空白）之前。如果多个 字间 ruby 注释框 被放置在同一个 ruby 基准 上，它们的 外边距框 (margin boxes) 会向右堆叠，中间没有间隔，并按 层级 (level) 递增的顺序排列。

如果 ruby 注释框 的 内容区域 的 自动高度 小于其放置在其后的 ruby 基准 的 内容框 高度，则其 内容框 高度会增加以精确匹配该高度。

ruby 注释框 的对齐方式取决于 ruby 注释 上的 ruby-align 属性。

• 如果 ruby-align 为 start，则 ruby 注释 的 内容框 的顶边与 ruby 基准 的 内容框 的顶边对齐。
• 否则，ruby 注释 的 内容框 的中心与 ruby 基准 的 内容框 的中心在垂直方向上对齐。

字间注 的 ruby 注释容器框 的尺寸和位置设定为使其内容框与 ruby 基准容器框 的内容框完全重合。

注： 字间 ruby 注释容器框 的大小和位置对布局没有影响。上述定义仅为了确保以程序方式查询它们时能产生确定性的结果。

出于 对齐 和列大小调整（详见 § 3 Ruby 布局）的目的，字间 ruby 注释 不被视为与它们所附加的基准属于同一个 列 (column)；相反，它们有效地形成了自己的一 列。

3.3. 设置 Ruby 框的样式

Ruby 基准 和 ruby 容器 被视为 行内框 (inline boxes)，除另有说明外，适用于 行内框 的所有属性也以相同方式适用于它们。但是，vertical-align 的 行相对位移值（top, bottom）必须被忽略（视为零）。

除另有说明外，适用于 行内框 的所有属性也以相同方式适用于 ruby 注释，但 line-height 不适用。此外，vertical-align 的 行相对位移值（top, bottom）必须被忽略（视为零）。

适用于 行内框 的 margin、padding、border 属性或任何不适用于 行内框 的属性均不适用于 基准容器 或 注释容器。此外，line-height 不适用于 注释容器。

用户代理 (UA) 不需要支持 ruby 基准容器框 或 ruby 注释容器框 上的任何背景属性、轮廓属性或任何其他用以说明框边界的属性。UA 可以将这些框仅实现为用于继承和控制其内容布局的抽象。

3.4. 换行

当没有足够的空间容纳整个 ruby 容器 时，可以在所有层级同时允许换行的地方进行换行。（有关换行的详细信息，请参阅 CSS 文本 3 § 5 换行与词边界。）Ruby 最常在“基准-注释”集合之间断开，但如果换行规则允许，也可以在 ruby 基准 内部（以及并行地，在其关联的 ruby 注释框 中）进行换行。

无论何时进行跨行断行，ruby 注释 必须与其各自的 ruby 基准 保持在一起。即便是在 字间注 的情况下，行 也绝不能 在 ruby 基准 和其 注释 之间断开。

字间 (inter-character) ruby 换行时机

断行后，每个片段都会独立地进行 布局，并且在每个片段内会发生 ruby 对齐。

3.4.1. 基准之间的换行

在典型情况下，ruby 基准框 和 ruby 注释框 被设置为禁止内部行内换行且不包含强制断行。（参见 附录 A。）在此类情况下，ruby 容器 只能在相邻的 ruby 基准 之间断行，且仅当没有 ruby 注释 跨越这些 ruby 基准 时才允许。

Ruby 换行时机

ruby 是否可以在两个相邻的 ruby 基准 之间断行，由基准文本的正常换行规则控制，效果完全如同这些 ruby 基准 是相邻的行内框一样。（在确定 基准层 的软换行时机时，会忽略注释。）

<ruby>蝴<rt>hú</rt>蝶<rt>dié</rt>

基准间空白对于评估 ruby 基准 之间的换行时机具有重要意义。与行内元素之间的空白一样，当在此处换行时，它会遵循 CSS 文本 3 § 4.1 空白处理规则 中详细说明的规则进行折叠。同样地，注释空白也会在换行处被截断。

<ruby><rb>one</rb> <rb>two</rb> <rt>1</rt> <rt>2</rt></ruby>

3.4.2. 基准内部的换行

对于较长的基准文本，有时允许在基准-注释对内部进行换行是合适的。例如，如果用日文翻译来注释一段英文句子，允许文本换行可以实现段落中合理的换行行为。

插入扫描示例，这样人们就不会认为这只是疯狂的规范作者的胡言乱语。

仅当 ruby 基准 及其所有并行 注释 的 white-space 属性允许时，才允许在 ruby 基准 内部进行换行，且在每个基准/注释框的内容 内部（即不在开始或结束处）存在 软换行时机。由于 ruby 基准 和 注释 内部的内容片段之间没有结构性对应关系，UA 可以在任何时机集合处断行；但建议 UA 尝试按比例平衡每个片段内的内容量。

字间注 内部没有换行时机。

3.5. 双向 (Bidi) 重排序

当来自相反方向性的脚本字符在单个段落中混合时，Unicode 双向算法会重新排序逻辑存储的文本以供视觉呈现。

为了保持 ruby 注释 与其各自 ruby 基准 的对应关系，必须施加一些限制

• ruby 基准 或 ruby 注释 的内容必须保持连续。
• Ruby 注释 必须与其 ruby 基准 一起重排序。
• 由单个 ruby 注释 跨越的所有 ruby 基准 必须保持连续。

为此，

• 所有 内部 ruby 框 和 ruby 容器 均强制执行双向隔离：unicode-bidi 的 normal 和 embed 值计算为 isolate，而 bidi-override 计算为 isolate-override。

  注： 这意味着隐式双向重排序在 ruby 基准之间不起作用，因此作者需要确保 ruby 容器 声明的方向性确实与其内容相匹配。

• 在布局过程中，ruby 片段 在 ruby 容器 内的顺序由其 ruby 容器 的 direction 属性决定。
• 在片段内部，未 合并 的 ruby 基准 和 ruby 注释 在其各自的容器中按片段的 ruby 基准容器 的 direction 属性进行排序。合并的注释 按其 注释容器 的 direction 属性排序，效果完全如同它们是其 注释容器 内的一系列行内框一样。

  注： 这意味着 ruby 注释容器 上的 direction 属性在布局非 合并 的注释时会被忽略。但是，它仍然可以继承到容器的子元素中，从而影响它所包含的任何 ruby 注释 的 行内基准方向。

与其他行内级内容一样，内部 ruby 框 的双向重排序发生在断行之后，以便内容根据其逻辑顺序在行之间进行划分。

注： 可以稍微调整这些规则，以便当特定 注释容器 上的 ruby-merge 为 merge 时，不强制在单个注释上进行双向隔离，从而使它们能够被一起处理。然而，这将增加实现的复杂性，在没有处理此情况的需求时似乎并不合理。鼓励任何有此需求的人联系 CSS 工作组。

有关 CSS 中双向文本的更深入讨论，请参阅 [CSS3-WRITING-MODES]。

3.6. 行间距

line-height 属性控制 CSS 中的行间距。当行上的行内内容短于 line-height 时，如 CSS 行内布局 3 § 5 逻辑高度与行间距 中所指定，内容两侧会添加半行距 (half-leading)。

为了确保行间距的一致性，带有 ruby 的文档通常会确保 line-height 足够大，以在文本行之间容纳 ruby。因此，通常情况下，ruby 注释容器 和 ruby 注释框 不会对行内内容的测量高度产生贡献；任何对齐（参见 vertical-align）和 line-height 计算仅使用 ruby 基准容器 执行，效果完全如同它是一个正常的行内元素一样。

但是，如果 line-height 在 ruby 容器 上指定的值小于最上方 ruby 注释容器 的顶部与最下方 ruby 注释容器 的底部之间的距离，则会在 ruby 基准容器 的适当一侧（或两侧）添加额外的行距，使得如果一个块由三行组成，每行都包含与此相同的 ruby，则没有任何 ruby 容器 会重叠。

注： 这并不能保证 ruby 注释 保持在行框内。它仅确保 如果所有行的间距相等 且 ruby 注释 的数量和位置相当，则会有足够的空间来避免重叠。

作者应确保适当的 line-height 和 padding 以容纳 ruby，并特别注意块的开始或结束处，以及当行包含比段落默认字体大小更高的行内级内容（如图像、行内块或通过 vertical-align 位移的元素）时的情况。

Ruby 注释通常会溢出行外；作者应确保 ruby 注释行上方/下方的空间足够，以便为 ruby 留出空间。

注： 对 ruby 如何影响对齐和行布局的更多控制将包含在 CSS 行布局模块第 3 级中。注意，它目前处于开发的探索阶段；对于新功能的描述尚不应被依赖。

4. Ruby 格式化属性

引入了以下属性来控制 ruby 定位、文本分布 和 对齐。

4.1. Ruby 定位：ruby-position 属性

此属性控制 ruby 注释 相对于其基准的位置。各值的含义如下

alternate

不同 层级 (levels) 的注释在 over 和 under 之间交替。

如果 注释容器 是其 ruby 片段 中的第一 层级，或者如果所有先前的 层级 都是 字间注 (inter-character)，则 alternate（无论是单独指定还是与 over 组合）表现得与 over 相同，而 alternate 与 under 组合时表现得与 under 相同。

否则，如果前一个 行间 注释层级为 over，则 alternate 的表现类似于 under，反之亦然。（在此情况下，单独指定 alternate 还是与 over 或 under 组合没有区别。）

在

ruby 注释出现在基准的 线上方 (line-over)。

水平布局中日文基准文本上方的 Ruby

垂直布局中日文基准文本右侧的 Ruby

under

ruby 注释出现在基准的 线下方 (line-under)。这是一个在东亚表意文字书写系统中相对罕见的设置，最常见于教育文本中。

水平布局中日文基准文本下方的 Ruby

垂直布局中日文基准文本左侧的 Ruby

inter-character

如果所包含的 ruby 容器 的 书写模式 是 垂直 的，则此值具有与 over 相同的效果。

否则，ruby 注释将成为 字间注 (inter-character annotation)。该注释出现在水平文本中基准的右侧。这会强制此 ruby 注释容器 的 ruby 注释 子元素的 writing-mode 计算值为 vertical-rl。

注： ruby 注释容器 本身的 writing-mode 计算值不受影响。这是为了避免同一元素上的 writing-mode、display 和 ruby-position 属性的计算值之间产生循环依赖。

此值提供给特别是在台湾使用的繁体中文的特殊情况：在该上下文中，（由 注音符号 组成的）ruby 即使在基准字符布局为水平时，也会垂直出现在基准字形右侧

水平布局中繁体中文的“注音符号” Ruby（ruby 注释为清晰起见显示为蓝色）

注意：由于继承作用于元素树，而不考虑为 ruby 布局创建的匿名框，在使用 字间注 时，作者需要小心避免使用涉及基于元素的 ruby 注释容器、匿名 ruby 注释 和进一步的后代元素的标记模式，因为这些后代将从 ruby 注释容器 继承其书写模式，而不是从其 writing-mode 已更改为 vertical-rl 的 ruby 注释 处继承。

ruby { ruby-position: inter-character; }

<ruby>base<rtc><em>problematic</em> annotation</ruby>

在上述标记中，创建了一个匿名 ruby 注释 框作为 <rtc> 元素的子元素，以包裹整个“有问题的注释”。因为它是一个 ruby-position 为 inter-character 的 注释容器 的子元素，所以它的 writing-mode 将为 vertical-rl，这是预期的。但是，<em> 元素直接从 <rtc> 元素继承其 writing-mode，而后者并未被强制为 vertical-rl。

在此示例中，不需要显式的 ruby 注释容器 元素，因此使用 ruby 注释 元素将避免该问题

<ruby>base<rt><em>problematic</em> annotation</ruby>

如果需要显式的 ruby 注释容器 元素，那么同时使用 ruby 注释 元素也可以解决此问题

<ruby>base<rtc><rt><em>problematic</em> annotation</ruby>

非 字间注 的 注释容器 被称为 行间注 (interlinear annotations)。

如果多个 ruby 注释容器 具有相同的 ruby-position，它们会从基准文本向外堆叠。

4.2. 共享注释空间：ruby-merge 属性

此属性控制当一个 ruby 容器框中有多个 ruby 注释框时，应如何呈现它们：是应该保持每一对单独呈现，还是应将注释 合并 (merged) 并作为一个组进行呈现，还是应该根据可用空间决定是否分离。

注： 字间注 始终是分离的，此属性不适用。

可能的值：

separate

每个 ruby 注释框都呈现在与其对应的基准框相同的 列 (column) 中，即不会在两侧重叠相邻的基准。在 [JLREQ] 中，这种样式被称为“单注 (mono ruby)”。

例如，以下两行呈现效果相同

<p><ruby>無<rt>む</ruby><ruby>常<rt>じょう</ruby>
<p><ruby style="ruby-merge:separate"><rb>無<rb>常<rt>む<rt>じょう</ruby>

merge

同一行上同一 ruby 片段 内的所有 ruby 注释框 都会在其 注释容器 中作为 行内框 连接起来，并排布在一个跨越所有相关 ruby 基准框 的匿名 ruby 注释框 中。当在单行上布局时，这种样式的呈现类似于 [JLREQ] 中的“组注 (group ruby)”。但是，当跨行断行时，ruby 注释 会与其各自的 ruby 基准 保持在一起。

如果两个字符都适合放在一行上，则以下两行呈现效果相同

<p><ruby>無常<rt>むじょう</ruby>
<p><ruby style="ruby-merge:merge"><rb>無<rb>常<rt>む<rt>じょう</ruby>

但是，当两个基准跨行断开时，第二行的呈现效果与 ruby-position: separate 相同。

auto

用户代理可以使用任何算法来确定每个 ruby 注释框如何呈现到其对应的基准框上，其目的是如果所有注释都适合放在其各自的基准之上，则结果与 separate 相同，但如果某些注释比它们的基准宽，则以某种方式共享空间以避免在基准之间强加间隔。

注：此行为适用于复合词，请参见 “什么是 ruby？”中的“熟语 Ruby (Jukugo Ruby)”。 [QA-RUBY]

呈现此类 ruby 有多种惯例，请参见 [SIMPLE-RUBY] 中的 “熟语 Ruby 的放置”、[JLREQ] 中的 “熟语 Ruby 的定位” 以及 [JISX4051] 中的 4.12.3(c) 熟語ルビの処理，以获取不同复杂性的示例。

其中最简单的是，如果所有 ruby 注释框都适合在其相应基准框的宽度内，则呈现为 separate，否则呈现为 merge。

注： 由于 双向隔离，文本不会跨 ruby 注释 或 基准（即使是合并的）进行塑形或形成连字。请参阅 § 3.5 双向重排序 和 CSS 文本 3 § 7.3 跨元素边界塑形。

4.3. Ruby 文本分布：ruby-align 属性

此属性指定当其内容未完全填满各自的框时，文本如何在各种 ruby 框内分布。请注意，由 ruby-align 分布的空间与由于两端对齐而分布的空间无关且独立。

对于 字间注，此属性还可以影响框本身的对齐方式（参见 § 3.2 字间 Ruby 布局）。除此以外，它仅影响框内内容的对齐，不影响框本身的大小或位置。

值的含义如下：

start

ruby 内容与其框的起始边缘对齐。

start ruby 分布

“肩付きルビ (Katatsuki ruby)” 接近但不完全等同于此 start 值。特别是，它在悬垂于基准之上时的行为可能因周围环境而异，与起始对齐不同，请参阅 JLREQ。此外，它仅用于垂直书写，且 JLTF 认为它并不是特别重要，因此使其足够智能以处理肩付きルビ可能不值得投入精力。如果为了其他目的需要 start，我们应该保留它。否则，也许直接舍弃它？

center

ruby 内容在其框内居中。

center ruby 分布

space-between

ruby 内容按正常文本两端对齐的定义（如 text-justify 所定义）进行扩展，只是如果没有 两端对齐时机，则内容居中。

space-between ruby 分布

space-around

与 space-between 相同，只是存在额外的 两端对齐时机，其空间一半分布在 ruby 内容之前，一半分布在之后。

space-around ruby 分布

默认 UA 样式表 将 text-justify: ruby 应用于 ruby 注释，在每一对相邻的中日韩 字符 之间定义 两端对齐时机，但不在相邻的拉丁或注音符号 字符 对之间定义。因此，space-around 和 space-between 值仍会导致拉丁或注音符号字符居中

space-around 和 space-between ruby 分布中的非中日韩 ruby 文本居中

空间的分布可以通过 text-justify 进行控制。 [CSS-TEXT-3]

ruby 基准 和 ruby 注释 中的内容（不因 ruby-merge: merge 而跨越的内容除外）根据该框上的 ruby-align 的值在其框内对齐。合并的注释 中的内容根据 注释容器 上的 ruby-align 值在 ruby 注释容器 内对齐，而忽略个别 ruby 注释 上的 ruby-align 值。

如果 合并的注释 导致 ruby 片段 更宽怎么办？这是否会导致每个基准像跨越它们一样增长，如当前所指定的那样？这不允许例如在多基准基准容器中对齐文本，当其合并注释较长时。相反，也许我们应该允许 ruby-merge 也应用于基准容器，但这要求我们允许单个基准跨越多个注释（如果基准合并但某些注释层级不是），或者要求如果基准合并，则所有注释层级也必须合并。

当 ruby-merge 为 auto 时内容的对齐方式由用户代理决定，但当所有注释都适合放在其相应基准之上时，其对齐方式必须与 ruby-merge: separate 完全相同。

4.4. Ruby 文本装饰

文本装饰不会从基准文本传播到注释。

当在 ruby 的祖先上指定文本装饰时，它会绘制在 ruby 基准容器的整个内容区域，包括为了容纳长注释而在 ruby 基准内容两侧添加的任何额外空间。当直接在 ruby 基准上指定文本装饰时，此额外空间不会被装饰，类似于直接在该框上指定文本装饰时，框自身的内边距不会被装饰一样。 [CSS3-TEXT-DECOR]

文本装饰可以直接在 ruby 基准容器和 ruby 注释容器上指定：在这种情况下，它会传播到容器的所有基准或注释（分别），并为了连续性而在它们之间绘制。

ruby 注释的位置可以调整，以避免与应用于基准文本的上划线和下划线装饰潜在的冲突。在字体大小和基线对齐一致的基本情况下，下划线或上划线位于 基准层 与该侧的任何注释之间。

本节需要澄清在相邻基准/注释的内容之间绘制装饰的问题。这取决于这些框是否与其 列 一样宽。

5. 边缘效应

5.1. Ruby 悬垂：ruby-overhang 属性

ruby-overhang 属性控制 ruby 注释 是否可以与 ruby 容器 外部的相邻文本重叠。各值的含义如下

auto

当 ruby 注释容器 比其对应的 ruby 基准容器 更长时，ruby 注释容器 可以部分重叠相邻的框。

是否、多少以及在什么条件下悬垂由 UA 确定。

none

ruby 注释容器 绝不允许延伸超过 ruby 注释容器。

当不允许 ruby 注释 悬垂时，ruby 容器 的行为类似于传统的行内框，即仅在其边界内呈现其自身内容，且相邻元素不会跨越该框边界

文本不允许悬垂于相邻文本的简单 ruby

但是，如果允许 ruby 注释容器 悬垂，相邻内容可能会重叠 ruby 容器框，从而允许其 ruby 注释 部分呈现于周围行内级内容之上/之下。悬垂仅在不会导致相邻内容与 ruby 容器的 注释框 或其重叠 基准 的内容之间发生碰撞的范围内允许。

文本允许悬垂于相邻文本的简单 ruby

注： 与 ruby 基准 相关的 ruby 注释 是否可以悬垂于另一个 ruby 基准 上，由 ruby-merge 控制。

通常，基准或注释的内容的对齐方式不受悬垂行为的影响：对齐和空间分布（参见 ruby-align）的实现方式与是否允许悬垂无关，并且在确定重叠可用空间之前计算。但是，UA 在确定注释和基准的空间分布和/或对齐时，可能会考虑允许的悬垂。

我怀疑悬垂在某些情况下会与对齐交互；可能以后需要研究一下。

5.2. 行边对齐

当一个比其 ruby 基准 更长的 ruby 注释框 位于一行的开始或结束边缘时，用户代理 可以 强制接触行边缘的 ruby 注释 侧与基准的相应边缘对齐。这种对齐方式由 [JLREQ] 描述。

本规范级别不提供控制此行为的机制。

行边对齐

附录 A：示例样式表

本节是资料性的。

A.1 默认 UA 样式表

以下展示了用于将 HTML 和 XHTML ruby 标记呈现为 ruby 布局的默认 UA 样式表

ruby { display: ruby; }
rp   { display: none; }
rbc  { display: ruby-base-container; }
rtc  { display: ruby-text-container; }
rb   { display: ruby-base; white-space: nowrap; }
rt   { display: ruby-text; }
ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }

rtc, rt {
  font-variant-east-asian: ruby;  /* See [[CSS-FONTS-3]] */
  text-justify: ruby;             /* See [[CSS-TEXT-4]] */
  text-emphasis: none;            /* See [[CSS-TEXT-DECOR-3]] */
  white-space: nowrap;
  line-height: 1; }

rtc, :not(rtc) > rt {
  font-size: 50%; }
rtc:lang(zh-TW), :not(rtc) > rt:lang(zh-TW),
rtc:lang(zh-Hanb), :not(rtc) > rt:lang(zh-Hanb), {
  font-size: 30%; }               /* bopomofo */

注： 作者不应使用上述规则：支持 ruby 布局的 UA 应该默认提供这些规则。

实现用户控制的“最小字体大小”功能的用户代理，应考虑为 ruby 注释降低该最小值。

A.2 行内呈现 Ruby 注释

以下展示了用于将 HTML 和 XHTML ruby 标记呈现为行内注释的示例样式表

ruby, rb, rt, rbc, rtc, rp {
  display: inline; white-space: inherit;
  font: inherit; text-emphasis: inherit; }

A.3 生成括号

不幸的是，由于选择器无法匹配文本节点，无法使用 CSS 来表达会自动且正确地为 HTML 中所有可能的 ruby 标记模式下的无括号 ruby 注释添加括号的规则。（这是因为 HTML ruby 允许从原始文本中暗示 ruby 基准，而无需对应的元素。）

但是，这些规则将在严格使用 <rb> 或 <rtc> 的情况下，在每个注释序列周围添加括号

/* Parens around <rtc> */
rtc::before { content: "（"; }
rtc::after  { content: "）"; }

/* Parens before first <rt> not inside <rtc> */
rb  + rt::before,
rtc + rt::before { content: "（"; }

/* Parens after <rt> not inside <rtc> */
rb ~ rt:last-child::after,
rt + rb::before  { content: "）"; }
rt + rtc::before { content: "）（"; }

或者，如果已知使用的是纯交替样式的标记（<ruby>A<rt>a</rt>B<rt>b</rt>C<rt>c</rt><ruby>），且没有相邻的 ruby 注释，则以下规则将在每个注释周围添加括号

/* Parens around each <rt> */
rt::before { content: "（"; }
rt::after  { content: "）"; }

6. 术语表

注音符号 (Bopomofo) 或 注音符号 (Zhuyin Fuhao) (中文: ㄅㄆㄇㄈ, 注音符号, 或 注音符号)

为中文（特别是标准普通话）作为语音而开发的字符和声调标记。这些通常（但不限于）用于 ruby 注释。

中文中用作语音字间注的注音符号示例

注音符号声调标记 (Bopomofo tone marks) 是出现在每个注音符号音节末尾（内存中）的间距字符。它们通常显示在其他注音符号字符右侧或上方的单独轨道中，声调标记的位置取决于音节中的字符数。然而，轻声标记放置在注音符号之前（并与之对齐），而不是并排放置。

注： 在显示文本时——无论文本是出现在 ruby 注释中还是作为常规行内内容——用户代理和字体子系统负责确保字形的正确相对对齐和定位，包括 注音符号声调标记。此类字形放置不是 CSS ruby 布局的功能。

注音符号 字母 属于 Bopomofo Unicode 脚本（目前映射在 U+3100–312F 和 U+31A0–31BF 区块中）；注音符号声调标记 是 U+02C9 (ˉ), U+02CA (ˊ), U+02C7 (ˇ), U+02CB (ˋ), U+02EA (˪), U+02EB (˫), U+02D9 (˙)。出于 CSS 的目的，统称这些为 注音符号字符。

韩字 (Hanja) (韩文: 漢字)

韩文书写系统的一个子集，使用从中文书写系统借用或改编的表意字符。另请参见 日文汉字 (Kanji)。

平假名 (Hiragana) (日文: 平仮名)

日文音节脚本，或该脚本的字符。外观圆润而草书。日文书写系统的一个子集，与汉字和片假名一起使用。近年来，主要用于在汉字不可用或不合适时书写日文单词，以及书写词尾和助词。另请参见 片假名 (Katakana)。

表意文字 (Ideograph)

用于表示概念、词语或词素的字符，与字母或音节文字不同。最为人所知的表意文字系统在东亚（中国、日本、韩国等）使用（略有差异）。

假名 (Kana) (日文: 仮名)

平假名和片假名的统称

汉字 (Kanji) (日文: 漢字)

日文对表意文字的称呼；日语中使用的表意文字。日文书写系统的一个子集，与平假名和片假名一起使用。另请参见 韩字 (Hanja)。

片假名 (Katakana) (日文: 片仮名)

日文音节脚本，或该脚本的字符。外观有棱角。日文书写系统的一个子集，与汉字和平假名一起使用。近年来，主要用于书写外来词。另请参见 平假名 (Hiragana)。

致谢

没有以下人员的帮助，本规范是不可能完成的

David Baron, Robin Berjon, Susanna Bowen, Stephen Deach, Martin Dürst, Hideki Hiura (樋浦 秀樹), Masayasu Ishikawa (石川雅康), Taichi Kawabata, Chris Pratley, Xidorn Quan, Takao Suzuki (鈴木 孝雄), Frank Yung-Fong Tang, Chris Thrasher, Masafumi Yabe (家辺勝文), Boris Zbarsky, Steve Zilles。

特别感谢以前的编辑：微软的 Michel Suignard 和 Marcin Sawicki，以及 W3C 的 Richard Ishida。

变更 (Changes)

本节记录了自上次发布以来的变更。

自 2021 年 12 月 2 日工作草案 (WD) 以来的更改

• 将 字间注 上的 writing-mode 的计算值调整应用于 ruby 注释框，而不是 ruby 注释容器框。
• 在 HTML 中将 font-size: 30% 应用于 ruby 注释 的规则中添加了 zh-Hant。
• 向 UA 默认样式表添加了 text-justify: ruby。 (问题 771 问题 779)

自 2020 年 4 月 29 日工作草案 (WD) 以来的更改

• 向 ruby-position 添加了 alternate 关键字，并使其成为 初始值。
• 将 ruby-merge 的 collapse 值重命名为 merge。 (问题 5004)
• 定义了 visibility: collapse 以显式 隐藏 注释，方式与 自动隐藏 注释相同。 (问题 5927)
• 更精确地指定了哪些属性适用于各种 ruby 显示类型（§ 3.3 设置 Ruby 框的样式），并定义了 ruby、ruby 基准和 ruby 注释框的行为与常规 行内框 相同，除另有说明外。 (问题 4935, 问题 4936, 问题 4976, 问题 4979)
• 实质性地重构了 § 3 Ruby 布局，更清晰地定义了 行间注 和 字间注 ruby 布局及其与 ruby-align 的交互。字间 ruby 现在基于 行内块 布局，其与 行间 ruby 的交互也得到了很好的定义。行间 ruby 的行内轴空间分布现在对于跨列注释有更精确的定义（模拟 max-content 网格轨道）。
• 通过在 行间 ruby 的块轴大小调整中核算其基准和注释容器，定义了嵌套 ruby 的处理。 (问题 4986, 问题 4980)
• 更精确地指定了 ruby-align 的工作方式。
• 放宽了 ruby 悬垂不应影响 ruby 内容对齐的要求，增加了悬垂不应导致 ruby 内容与相邻内容发生碰撞的要求。
• 阐明了双向重排序与 合并的注释 的交互。 (§ 3.5 双向重排序)
• 收紧了全文的规范性用语。
• 改进了 简介、示例和其他说明性文本。

注： 仍有许多未决问题，请参见 评论处理 和 GitHub 上追踪的 较新的问题。

自 2014 年 8 月 5 日工作草案 (WD) 以来的更改

• 添加回 ruby-overhang: auto | none 以便对 ruby 悬垂行为进行基本控制。
• 协调内联化与 CSS 显示模块。
• 允许 UA 在 ruby/强调标记与下划线/上划线冲突时对其进行位移。
• 当 ruby-merge 的计算值为 collapse 时，禁用自动隐藏。
• 调整默认样式表。
• 增加定义与文本修饰交互的章节。
• 将 ruby-position 的 right 和 left 值推迟到下一级。
• 修改 ruby 配对规则，使其仅应用于匿名标注（即直接包含在 rtc 中的内容）上的跨列（spanning）。
• 将多余的基准/标注与自动生成的空匿名基准/标注进行配对。
• 将 ruby-position 应用于 ::first-line。（议题 2998）
• 澄清 ruby 盒子及其内容的包含块与其它行内盒一样，是最近的块容器。
• 澄清对位置错误的内部表格元素的处理。
• 修剪 ruby 容器、基准容器和标注容器中前导/尾随的空白，以防止其干扰配对。
• 定义空基准容器和标注容器的布局效果。
• 禁用 ruby 基准容器和 ruby 标注容器上的外边距、内边距和边框（但不禁用 ruby 基准和 ruby 标注本身）。

自 2013 年 9 月 19 日工作草案（WD）以来的变更

• 重写匿名盒子生成规则和空白处理规则，定义了匿名空白盒子的专门配对。
• 将嵌套 ruby 的处理从配对中移除。（将通过尺寸调整/布局来处理。）
• 定义 ruby 结构的双向（bidi）布局。

自 2011 年 6 月 30 日工作草案（WD）以来的变更

移除 ruby-span 以及关于 rbspan 的表述。

HTML ruby 不使用显式跨列，而采用隐式跨列。这无法处理某些病态的双面跨列情况，但目前似乎没有这方面的需求。（对于支持完整复杂 XHTML Ruby 的实现，它们可以从标记中推断跨列，方式与我们处理表格单元格跨列的神奇方式相同。似乎没必要在第 1 级中包含这些控制。）

将 ruby-overhang 和 ruby-align: line-end 推迟到第 2 级。

这是一个相对复杂的高级功能。建议由用户代理（UA）定义此行为，并提供一些可接受选项的示例。

关闭要求 display: rp 的议题：改用 display: none。

国际化工作组提出了一个议题，要求为 rp 元素添加显示值。当 ruby 显示为 ruby 时，它们应该被隐藏。但这一点使用 display: none 已经可以轻松实现。

更改 ruby-position 的值以匹配 text-emphasis-position。

除了我们需要保留的 inter-character 外，将 ruby 位置与 text-emphasis-position 对齐更为合理，后者可以正确处理水平/垂直偏好的各种组合。

移除 ruby-align 中未使用的值。

不需要 left、right 和 end。

用 space-between 和 space-around 替换 ruby-align 中的 auto、distribute-letter 和 distribute-space。

auto 值依赖于检查内容来确定行为；这可以通过仅使用带有标准对齐规则（允许 CJK 之间有间距，但拉丁文之间不允许）的 space-around 来避免。将 distribute-letter 和 distribute-space 替换为 space-between 和 space-around，以与 [CSS-FLEXBOX-1] 和 [CSS-ALIGN-3] 中的分布关键字保持一致，并避免与 text-justify: distribute 的定义产生任何链接。

添加了 ruby-merge 属性以控制熟语（jukugo）渲染。

这是一种样式效果，而非结构效果；之前的模型假设它是结构性的，并建议通过更改标记来处理。:(

从 ruby-position 中移除 inline。

这可以通过在所有 ruby 相关元素上使用 display: inline 来实现，请参阅附录 A。

添加了默认样式规则

应国际化工作组要求。

编写了匿名盒子生成规则

并定义了基准和标注的配对。现在应该能处理 HTML ruby 标记的所有疯狂建议排列。

定义了 ruby 的布局

详细定义了空间分布、空白处理、换行、行堆叠等。留给双向（bidi）布局的开放议题。