1. 引言
1.1. 什么是 ruby?
本小节不具规范性。
Ruby 是指一段与另一段文本(称为“基底”)并排出现的文本, 用作该文本的注释或发音标注的通用名称。

下列插图展示了两种 Ruby 的例子, 一个简单情况和一个结构更复杂的情况。

日文中使用ruby的示例(简单情况)
在日文排版中,这种情况有时被称为 taigo ruby(日文:対語ルビ,即按词注音)或组ruby, 因为注释整体与多字符单词(作为整体)关联。

复杂ruby,基底字符的上方和下方均有注释文本
注意,为了正确对应 平假名与其相应的汉字基底字符, 基底文本中的间距会做相应调整。 (如上图中第四个汉字,其注音为三个字符。) 为避免上述示例中基底文本间距变化, 可以将平假名注释设为合并注释, 这样效果会更接近前面的组ruby示例。 但由于基底-注释配对关系已记录在ruby结构中, 若文本换行,注释字符仍会与其基底字符正确配对。
在 HTML 中,ruby 结构及其标记描述见 Ruby Markup Extension 规范。 本模块描述与这种标记的 ruby 布局相关的 CSS 渲染模型及格式控制。
关于 Ruby 及其格式的更深入介绍, 可参见文章“什么是 Ruby” [QA-RUBY]。 关于 ruby 在日文中主要传统排版方式的详细信息, 见 JIS X-4051 [JIS4051](日文), 以及 《Ruby和着重点》一节, 载于 日本语排版需求 [JLREQ](英文和日文); 日文ruby简单定位规则 [SIMPLE-RUBY] 亦以英文介绍了一种日文ruby排版的方式。 《行间注释》一节载于 中文排版需求 [CLREQ],介绍了中文排版中的相关实践(中英文)。
1.2. 模块交互
本模块扩展了 CSS Level 2 [CSS2] 的行内盒模型,以支持 ruby。
本模块中的属性均不适用于 ::first-line 或 ::first-letter 伪元素; 但 ruby-position 可通过 ::first-line 继承,影响首行上的 ruby 注释。
1.3. 值定义
本规范遵循 CSS属性定义约定(见 [CSS2]),并采用 值定义语法(见 [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基底。

注: 在 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),
应优先使用该标记,
而非仅对任意元素(如 <span>
)应用ruby display 值。
正确使用标记可保证屏幕阅读器
及非CSS渲染器能正确识别ruby结构。
注: 替换元素 设置为 display 为 ruby-base、ruby-text、ruby-base-container、 ruby-text-container 时,均视为 行内级盒, 详见 CSS Display 3 § 2.4 布局内部display类型:table-*与ruby-*关键字;替换元素 的 display 值为 ruby 或 inline ruby 时,根据其 外部display类型 行为, 详见 CSS Display 3 § 2.1 流式布局的外部display角色:block、inline和run-in关键字。 (参见 § 2.1.2 非行内ruby。)
2.1.1. Ruby格式化上下文
Ruby容器是非原子的 行内级盒。 与普通的行内盒类似(参见CSS Inline Layout 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
如果一个元素的内部display类型为ruby,而外部display类型不是 inline, 则会生成两个盒: 一个指定的外部display类型的主盒, 以及一个行内级的ruby容器。 元素上指定的所有属性应用于主盒 (可继承的属性则会继承到ruby容器盒)。 这样可以将元素样式化为块级, 同时仍能正确维护内部的ruby结构。
注意: 绝对定位或浮动元素会导致其display 值 计算为块级等价值。(参见[CSS-DISPLAY-3] 或 [CSS2] 第9.7节。) 对于内部ruby显示类型, 这会使它们的display值计算为block。
2.2. 匿名ruby盒生成
CSS模型不要求文档语言 必须包含与每个组件对应的元素。 缺失的结构部分通过匿名盒生成规则隐式推断,类似于表格的归一化处理。(见[CSS2])
- 行内化块级盒: 任何由ruby容器、 ruby基底容器、 ruby注释容器、 ruby基底盒或 ruby注释盒 直接包含的流内盒, 必须按照[CSS-DISPLAY-3]的 行内化规则行内化, 并相应计算其display值, 以便它们仅包含行内级内容。 例如, 被一个display为display: block的父元素包裹、且本身在流内的元素, 如果其父元素的display: ruby-text, 则其display属性会计算为inline-block。
- 生成匿名ruby容器: 任何连续的未正确包含的 ruby基底容器、 ruby注释容器、 ruby基底盒和/或 ruby注释盒(及其间的空白) 会被包裹在一个匿名ruby容器中。 本步骤中:
-
包裹父级错误的行内级内容: 任何由ruby容器或
ruby基底容器直接包含的文本和行内级盒的连续序列,
会被包裹在一个匿名ruby基底中。
类似地,任何由ruby注释容器直接包含的文本和行内级盒的连续序列,
会被包裹在一个匿名ruby注释中。
(为此目的,被视为内部表格元素的错误父级元素,
也被视为行内级内容,因为它们最终会被ruby盒包裹成
行内级表包装盒。)
但如果这样构建的匿名盒只包含空白, 则该盒被视为ruby内部空白,其是否丢弃 或保留见下文说明。
- 移除首尾空白: 任何ruby内部空白,如果不是父元素唯一的流内子元素,并且是 ruby容器、 ruby注释容器或 ruby基底容器的第一个或最后一个 流内子元素,则移除它,如同其有display: none
-
移除层间空白:
任何ruby内部空白,其紧邻的流内兄弟元素匹配下列模式之一,
就是层间空白,并被移除,如同其有display:
none。
前一个盒 后一个盒 任意 ruby注释容器 不是ruby注释 ruby注释 -
解释层内空白: 任何ruby内部空白盒,
其紧邻的流内兄弟元素
匹配下表之一时,
赋予该盒相应类型及子类型:
前一个盒 后一个盒 盒类型 子类型 ruby基底 ruby基底 ruby基底 基底间空白 ruby注释 ruby注释 ruby注释 注释间空白 ruby注释 或 ruby注释容器 ruby基底 或 ruby基底容器 ruby基底 段间空白 ruby基底 或 ruby基底容器 ruby基底容器 ruby基底容器 ruby基底 或 ruby基底容器 - 抑制换行: 转换所有ruby注释内部的强制换行(无论white-space值如何), 按照CSS Text Level 3 § 4.1.2中的可折叠段落断点处理。
- 生成匿名层级容器: 任何没有被ruby基底容器包裹的 ruby基底和 基底间空白的连续序列 (且不是段间空白), 会被包裹在匿名ruby基底容器中。 类似地,任何没有被ruby注释容器包裹的 ruby注释和 注释间空白的连续序列, 会被包裹在匿名ruby注释容器中。
一旦所有ruby布局结构都正确包裹, UA即可开始将基底与注释关联。
注意: UA无需在内部结构中实际创建这些匿名盒 (或层内空白匿名空盒,见§ 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注释容器配对。
为处理退化情况,假定有若干匿名空容器:
2.3.2. 单元配对与跨基底注释
在一个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 ]|
蓝色方括号([ ])表示基底盒, 红色方括号([ ])表示注释盒, 灰色竖线(|)表示ruby列的边界, [ws]表示ruby内部空白, 而[]表示自动生成与另一层的层内空白配对的匿名空基底或注释。 ruby容器、基底容器和 注释容器省略不画。
2.4. 隐藏注释:visibility: collapse 和自动隐藏ruby
若ruby注释的visibility为collapse,则该注释为隐藏注释。 此外, 若某ruby注释与其基底文本内容完全相同, UA会自动将其 (自动隐藏)。
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: hidden——后者使注释不可见, 但仍会保留其占位空间:
的隐藏效果 不同于
这也不同于display: none,因为visibility: collapse会保留配对关系, 而display: none会完全移除盒, 导致后续注释配对错乱:

当计算值为ruby-merge的注释容器为 merge时,将禁用 。 若为auto, UA可决定是否禁用其注释的 , 推荐在UA布局算法生成类似separate效果时启用 。
white-space)和文本转换(text-transform)之前,
并忽略元素(仅比较盒的textContent
)。
注:后续CSS Ruby级别可能会增加 的控制, 但在本级别中始终强制自动隐藏。
2.5. 空白折叠
如§ 2.2 匿名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之间会显示空格:
< 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-merge为separate时, 每个ruby列以该列中内容最大宽度 (ruby基底或ruby注释)定宽。 如跨基底注释(无论实际跨越,还是根据ruby-merge: merge假定跨越), 其内容宽于所跨列总宽时, 超出宽度在所跨列间平均分配。 若一ruby段有多个跨基底注释, 则先分配跨度小的注释,再按跨度递增处理。 每个ruby基底和ruby注释最终正好覆盖其列。
注: 若多个不同层级的注释跨相同数量基底且重叠但不重合, 空间分配未定义。 注意这在HTML标记中不可能, 但在如[RUBY]中支持显式跨越的标记语言中可能出现。
若某ruby注释位于注释容器且ruby-merge: auto,且其宽度大于基底宽度, 该ruby注释可超出其注释容器的列范围。 UA可自行决定其对ruby段宽度的影响, 但要保证该段能容纳全部内容。
字间注释穿插于列之间: 它们计入跨列注释的测量, 但不属于任何一列, 也不会被行间注释的尺寸或定位影响。
每个基底及注释盒内, 当内容宽度小于盒宽时, 多余空间如何分配由ruby-align属性指定。
蓝色方括号([ ])表示基底盒, 红色方括号([ ])表示注释盒, 灰色竖线(|)表示ruby列的边界。ruby容器、基底容器、注释容器省略不画。
- 分列/非跨越:
-
|[ a1 ]|[ a2 ]|[annotation-3]| |[base 1]|[base 2]|[ base 3 ]|
每个列内的盒宽以本列中最宽盒为准。 每个ruby-align在基底盒和注释盒上决定盒内多余空间分布。
- 跨越(短):
-
|[ a1 ]|[ short span ]| |[base 1]|[base 2]|[base 3]|
当跨基底注释短于所跨基底, 多余空间无需在这些基底间分配。 跨基底注释自身多余空间按其ruby-align分配,与非跨越情况相同。
- 跨越(长):
-
|[ a1 ]|[spanning annotation]| |[base 1]|[ base 2 ]|[ base 3 ]|
- 合并(短):
-
|[merged annotation]| |[base 1]|[base 2]|[base 3]|
合并注释 行为类似跨基底注释, 但多余空间分配由ruby-align决定, 应用在注释容器上, 而非其注释盒。
- 多层级、带跨越注释:
-
|[ a1 ]|[ annotation-2 ]|[ a3 ]| |[long annotation spanning all content]| |[ base 1 ]|[ base 2 ]|[ base 3 ]|
|[ xx ]|[annotation spanning bases]| |[ a1 ]|[ annotation-2 ]|[ a3 ]| |[base 1]|[ base 2 ]|[ base 3 ]|
- 多层级、多跨越注释:
-
|[ xx ]|[ annotation spanning bases ]| |[ a1 ]|[ annotation-2 ]|[ a3 ]| |[lengthy annotation spanning base content]| |[ base 1 ]|[ base 2 ]|[ base 3 ]|
当存在多个跨基底注释时, 跨基底数最少的先处理。 如本例中,绿色跨两基底,橙色跨三基底, 顺序不同会导致空间分配不同。
为方便识别每个跨基底注释负责的空间分配, 本图各跨基底注释的文本颜色与其分配空间的背景色一致。
3.1.2. 块轴上的行间布局
需要定义 vertical-align 对这些 ruby 盒的影响范围。 参见 Issue 4987。
然后,每个 基底容器 会被定尺寸和定位, 以精确包含其所有 ruby 基底的 margin 盒 —— 以及所有关联的 字间 ruby 注释 margin 盒(如有)—— 以及所有参与本 ruby 容器、属于其后代的 基底 和 注释容器。 (若 基底容器 没有 流内内容, 则其定尺寸和定位仿佛包含一个空的 ruby 基底。)
每个 行间 注释容器 会被定尺寸和定位, 以精确包含其所有 ruby 注释的 margin 盒, 以及所有参与该注释层的后代 ruby 容器中的 基底 和 注释容器。 (若 注释容器 没有 流内内容, 则其定尺寸和定位仿佛包含一个空的 ruby 注释。) 这些 注释容器 会依次向外堆叠, 位于其对应 基底容器 的上方或下方(取决于 ruby-position), 之间不留空隙, 从而确定 ruby 注释 与其 ruby 基底 的块轴定位。
块轴上的 margin 是否应折叠? 这样可增强布局健壮性, 但与行内轴的 inline 行为不一致。
3.2. 字间 ruby 布局
字间注释有特殊布局。 字间 ruby 注释盒 会被插入到 基底层的布局流程中并参与测量。 每个 ruby 注释 被插入到其配对 ruby 基底的右侧; 跨越的 字间注释 则放在其所跨所有基底最右侧之后。 字间 ruby 注释的布局方式与 inline block 几乎一致,除非下文另有说明。
注: 根据 inter-character 的定义,字间注释总是采用 vertical-rl 的 writing-mode, 且只存在于 横排的 ruby 容器中。
每个 ruby 注释 紧跟在相关 ruby 基底的右侧, 位于所有 基底间空白(或 段间空白)之前。 若多个 字间 ruby 注释盒 紧邻同一个 ruby 基底, 它们的 margin 盒 依次向右堆叠,无间隔,顺序按 层级递增。
如果 自动高度 计算下,ruby 注释盒的 内容区 比其后插入的 ruby 基底的 内容盒矮,则其 内容盒高度会被提升至与基底内容盒相同。
ruby 注释盒的对齐方式取决于其 ruby-align 属性:
- 若 ruby-align 为 start, 则 ruby 注释的 内容盒上边缘 与 ruby 基底的 内容盒上边缘对齐。
- 否则, ruby 注释的 内容盒中心 与 ruby 基底的 内容盒中心垂直对齐。
某 字间注释 的 ruby 注释容器盒 定尺寸和定位时,其内容盒应与 ruby 基底容器盒内容盒完全重合。
注: 字间 ruby 注释容器盒 的尺寸与位置对布局无影响。 如此定义仅为确保代码查询这些盒时结果确定。
对于对齐与列尺寸(见§ 3 Ruby 布局)的计算,字间ruby 注释不视为附着基底的同一列, 它们实际上自成一列。
3.3. ruby盒样式
ruby 基底和ruby 容器视为行内盒, 所有适用于行内盒的属性(除非另有说明)同样适用于它们。 但行内相对偏移值的vertical-align(top,bottom) 必须忽略(视为0)。
所有适用于行内盒的属性(除非另有说明), 同样适用于ruby 注释, 但line-height不适用。 同时,行内相对偏移值的vertical-align(top,bottom) 也需忽略(视为0)。
margin、 padding、 border属性 以及所有不适用于行内盒的属性, 均不适用于基底容器或 注释容器。 此外,line-height 不适用于 注释容器。
UA 不要求支持 任何 background 属性或 outline 属性, 也不要求在 ruby 基底容器盒 或 ruby 注释容器盒上支持任何显示盒边界的属性。 UA 可仅将这些盒作为继承和布局内容控制的抽象实现。
3.4. 跨行断开
若一行无法容纳整个ruby 容器, 则只要所有层级同时允许断开处,ruby 可在该处断开。 (关于断行的详细内容,参见 CSS Text 3 § 5 断行和词边界。) ruby 通常在基底-注释对之间断开, 但若断行规则允许,也可在ruby 基底内部(及其关联的 ruby 注释盒)断开。
每当 ruby 跨行断开时,ruby 注释必须和它们各自的ruby 基底保持在一起。 不能在 ruby 基底与其注释之间断开, 即使是 字间注释 也如此。

字间 ruby 的断行机会
断行后, 每个片段会独立布局, ruby 对齐在每个片段内分别进行。
3.4.1. 基底间断开
通常情况下,ruby 基底盒和ruby 注释盒都会避免内部换行且不包含强制断点。 (见附录A。) 这时ruby 容器只能在相邻ruby 基底间断开, 且只有当没有ruby 注释跨越这些基底时才可断开。

ruby 的断行机会
是否能在两个相邻的ruby 基底间断开由基底文本的常规断行规则控制, 就像ruby 基底是相邻的行内盒一样。 (确定 基底层 软断点时会忽略注释。)
< ruby > 蝴< rt > hú</ rt > 蝶< rt > dié</ rt >
基底间空白对判断ruby 基底间的断行机会很重要。 如同行内空白, 断行时会被折叠, 规则见CSS Text 3 § 4.1 空白处理规则。 注释间空白在断行时也会被裁剪。
< ruby >< rb > one</ rb > < rb > two</ rb > < rt > 1</ rt > < rt > 2</ rt ></ ruby >
由于存在空格,行可在“one”和“two”之间断开。 若断行于此,空格(及“1”和“2”之间的空格)会消失,符合 CSS 标准空白处理规则。
3.4.2. 基底内断开
对于较长的基底文本,有时可以允许在基底-注释对内断行。 例如,用日文翻译为注解的英文句子, 允许文本换行能让段落获得合理的断行效果。
需要插入实际扫描样例,避免让人以为这只是规范作者的胡思乱想。
只有在 ruby 基底 及其所有并行 注释 的 white-space 属性允许, 且每个基底/注释盒内容内(不是开头或结尾)存在软断点时,才允许在基底内断行。 由于 ruby 基底与注释内容片段之间无结构对应关系, UA 可在任意机会断行; 但推荐 UA 尽可能平衡每个片段内的内容量。
字间注释内部不允许断行。
3.5. 双向重排
Unicode 双向算法会在单段落内混用不同方向书写体系的字符时, 按视觉展示重排逻辑存储的文本。
为保持ruby 注释与各自ruby 基底的对应关系, 必须施加如下限制:
为此,
-
所有内部 ruby 盒及ruby 容器都强制 bidi 隔离:
normal 和 embed 的 unicode-bidi 计算为 isolate,
bidi-override 计算为 isolate-override。
注: 这意味着隐式 bidi 重排不会跨 ruby 基底生效, 作者应确保 ruby 容器 的声明方向与其内容一致。
- 布局时,ruby 段 在 ruby 容器 内的顺序由其 direction 属性决定。
-
在段内,未合并的ruby 基底和ruby
注释在各自容器中的顺序由该段 direction 属性决定。
合并注释在其注释容器上按 direction 排序,
就像它们是该 注释容器 内的行内盒序列一样。
注: 这意味着 direction 属性对非合并注释的布局无效。 但它依然可以继承给容器的子元素, 从而影响其中任何行内基方向的ruby 注释。
如同其它行内级内容, 内部 ruby 盒的 bidi 重排在断行后进行, 以保证内容按逻辑顺序分行。
注: 若在某 ruby-merge 为 merge 的注释容器上,不强制各注释的 bidi 隔离, 允许一起处理,或许会有用。 但这会增加实现复杂性,目前没有需求。 有实际需求者请联系 CSS 工作组。
关于 CSS 中双向文本的更深入讨论,参见[CSS3-WRITING-MODES]。
3.6. 行间距
line-height 属性控制 CSS 中的行间距。 当一行中的行内内容高度小于 line-height 时, 会在内容上下各添加一半行距(half-leading), 具体见 CSS Inline Layout 3 § 5 逻辑高度与行间距。
为了确保行距一致, 含 ruby 的文档通常会确保 line-height 足够大, 能容纳行间 ruby。 因此,通常 ruby 注释容器和 ruby 注释盒不会影响该行行内内容的高度测量; 对齐(见 vertical-align)和行高计算 仅以 ruby 基底容器为准, 就像它是普通行内元素一样。
但如果 line-height 设置在 ruby 容器上且小于 最上方 ruby 注释容器顶部到最下方 ruby 注释容器底部的距离, 就会在 ruby 基底容器 上适当一侧添加额外的行距, 这样如果一个块包含三行内容且每行 ruby 都一样, 则各 ruby 容器不会重叠。
注: 这不能确保 ruby 注释始终保留在行盒内。 它只是保证如果所有行间距相等且 ruby 注释数量和位置等价, 就不会重叠。
作者应确保 line-height 和 padding 足够容纳 ruby, 并在块级开头、结尾以及某行包含高度大于段落默认字号的行内内容(如图片、inline-block、或用 vertical-align 上移的元素)时特别注意。

Ruby 注释常常溢出行盒; 作者应确保 ruby 注释行上下内容有足够空间留给 ruby。
注: 更细粒度的 ruby 对齐和行布局控制将在 CSS Line Layout Module Level 3 实现。 目前尚处于探索阶段, 新特性说明尚不可靠。
4. Ruby 格式属性
4.1. Ruby 定位:ruby-position 属性
名称: | ruby-position |
---|---|
值: | [ alternate || [ over | under ] ] | inter-character |
初始值: | alternate |
适用元素: | ruby 注释容器 |
可继承: | 是 |
百分比: | n/a |
计算值: | 指定关键字 |
规范顺序: | 依语法 |
动画类型: | 离散 |
该属性控制 ruby 注释相对于基底的位置。 各值含义如下:
- alternate
-
不同层级的注释在 上方 和 下方交替排列。
如果 注释容器是其 ruby 段的第一层级, 或之前所有 层级都是 字间注释, 那么 alternate,无论单独还是与 over 组合, 行为都等同于 over, 而与 under 组合时等同于 under。
否则, 如果前一个行间注释层为 over,则 alternate 等同于 under, 反之亦然。 (此时 alternate 单独指定还是与 over 或 under 组合无差别。)
- over
-
注释显示在基底上方。
横排日文基底上方的 ruby 注释
竖排日文基底右侧的 ruby 注释
- under
-
注释显示在基底下方。
该设置在东亚表意文字系统中较少见,
最常用于教科书等。
横排日文基底下方的 ruby 注释
竖排日文基底左侧的 ruby 注释
- inter-character
-
若外层writing-mode为竖排,
则效果等同于 over。
否则,ruby 注释会成为字间注释, 注释显示在基底右侧(横排文本)。 这会强制该 ruby 注释容器下 ruby 注释子元素的 writing-mode 计算值为 vertical-rl。
注: writing-mode 在 ruby 注释容器 本身的计算值不受影响。 这样可以避免 writing-mode、 display、 ruby-position 之间的循环依赖。
此值用于台湾等地传统中文的特殊情况: ruby(多为 注音符号)在这种情况下 即使主文为横排也总是出现在基字右侧竖排:
传统中文“注音”ruby(蓝色为清晰起见)横排布局
注:继承作用于元素树,不考虑 ruby 布局生成的匿名盒, 使用 字间注释 时, 作者需避免如下标记结构: 元素式 ruby 注释容器, 匿名 ruby 注释, 以及更深层后代元素, 因为这些后代会继承 ruby 注释容器的 writing-mode, 而不是 ruby 注释的 writing-mode(已被强制为 vertical-rl)。ruby
{ ruby-position : inter-character; } < ruby > base< rtc >< em > problematic</ em > annotation</ ruby > 如上例,匿名 ruby 注释盒作为
<rtc>
的子盒包裹“problematic annotation”。 它作为注释容器的子元素,ruby-position为 inter-character, 因此其 writing-mode 被强制为 vertical-rl,这没问题。 但<em>
元素直接继承<rtc>
的 writing-mode,并非 ruby 注释的 vertical-rl。若不需要显式 ruby 注释容器 元素, 用 ruby 注释 元素可避免此问题:
< ruby > base< rt >< em > problematic</ em > annotation</ ruby > 如需显式 ruby 注释容器, 也应配合 ruby 注释 元素:
< ruby > base< rtc >< rt >< em > problematic</ em > annotation</ ruby >
若多个ruby 注释容器具有相同的 ruby-position, 它们会自基底文本向外堆叠。
4.2. 共享注释空间:ruby-merge 属性
名称: | ruby-merge |
---|---|
值: | separate | merge | auto |
初始值: | separate |
适用元素: | 行间 ruby 注释容器 |
可继承: | 是 |
百分比: | n/a |
计算值: | 指定关键字 |
规范顺序: | 依语法 |
动画类型: | 按计算值类型 |
该属性控制当一个 ruby 容器盒内有多个 ruby 注释盒时, 应如何渲染: 是每对独立分隔, 还是将注释合并为一组渲染, 或根据空间自动决定分隔方式。
注: 字间注释始终分隔,该属性无效。
可能的取值:
- separate
-
每个 ruby 注释盒均在其对应的 列中渲染,
即不会与相邻基底重叠。
这种风格在 [JLREQ] 中称为“单 ruby”。
ruby-merge: separate 居中对齐示意 - merge
-
同一行内同一ruby 段内所有 ruby 注释盒
会作为行内盒拼接进其 注释容器,
并以单一匿名 ruby 注释盒跨越所有 ruby 基底盒布局。
单行时这种风格类似于 [JLREQ] 的“组 ruby”。
跨行时,ruby 注释仍与各自 ruby
基底保持配对。
ruby-merge: merge 居中对齐示意 若两字符同在一行,以下两行渲染一致:< p >< ruby > 無常< rt > むじょう</ ruby > < p >< ruby style = "ruby-merge:merge" >< rb > 無</ rb > 常</ rb > rt > む</ rt > rt > じょう</ rt > ruby > 但当基底跨行时,后者表现同 ruby-position: separate。
- auto
-
UA 可采用任意算法决定每个 ruby 注释盒如何与其基底盒配对渲染,
但应尽量保证所有注释能对齐各自基底时效果等同于 separate,
若部分注释宽于基底,则空间会被合适分配,避免基底间出现空隙。
ruby-merge: auto 居中对齐示意 注:此行为用于复合词, 见 “Jukugo Ruby” in “What is ruby?”。[QA-RUBY]各种实现方式见 Placement of Jukugo-ruby ([SIMPLE-RUBY])、JLREQ 及 4.12.3(c) 熟语 ruby 的处理([JISX4051])等。
注: 文本不会跨 ruby 注释或 基底(即使合并的)自动连写或形成连字, 因为有 bidi 隔离。 见 § 3.5 双向重排 和 CSS Text 3 § 7.3 跨元素边界的字形处理。
4.3. Ruby 文本分布:ruby-align 属性
名称: | ruby-align |
---|---|
值: | start | center | space-between | space-around |
初始值: | space-around |
适用元素: | ruby 基底、ruby 注释、ruby 基底容器、ruby 注释容器 |
可继承: | 是 |
百分比: | n/a |
计算值: | 指定关键字 |
规范顺序: | 依语法 |
动画类型: | 按计算值类型 |
该属性指定当 ruby 盒内容未完全填满各自盒子时,文本在盒内如何分布。 注意 ruby-align 分布的空白与两端对齐分布的空白无关且互不影响。
对于字间注释, 该属性也可影响盒本身的对齐(见§ 3.2 字间 Ruby 布局)。 其它情况下只影响盒内内容对齐,不影响盒本身尺寸或位置。
各值含义如下:
- start
-
ruby 内容与盒起始边对齐。
“肩付きルビ”(Katatsuki ruby) 与 此 start 值类似但不完全相同。 特别是在超出基底时, 其行为可能随上下文与 start 对齐不同, 见 JLREQ。 此风格仅用于竖排,且 JLTF 认为其重要性不高, 是否值得为 katatsuki ruby 优化存疑。 若 start 另有用途可保留,否则可考虑移除。
- center
- ruby 内容在盒内居中。
- space-between
- ruby 内容按常规文本两端对齐方式扩展分布 (由 text-justify 定义), 但若无对齐机会则居中显示。
- space-around
- 类似 space-between,但多一个对齐机会,空白在 ruby 内容前后各分一半。
可用 text-justify 控制空白分布。[CSS-TEXT-3]
ruby 基底和ruby 注释中的内容, 除因 ruby-merge: merge 跨越的,均按本盒的 ruby-align 对齐。 合并注释内容按 ruby 注释容器的 ruby-align 对齐, 忽略单独 ruby-align 的值。
如果合并注释导致ruby 段变宽,会怎样? 是否如当前规范让每个基底也等比变宽(如跨越注释),这导致多基底容器不能居中对齐合并注释。 或许应允许 ruby-merge 也应用于基底容器,但这又要求基底跨多个注释(如基底合并但部分注释层未合并), 或要求基底合并时所有注释层也必须合并。
当 ruby-merge 为 auto 时,实际对齐方式由 UA 决定, 但所有注释能完全覆盖各自基底时,效果必须与 ruby-merge: separate 相同。
4.4. Ruby 文本装饰
文本装饰不会从基底文本继承到注释。
当文本装饰应用于 ruby 祖先时, 会横跨 ruby 基底容器的整个内容区绘制, 包括为容纳长注释而在基底内容两侧添加的额外空间。 当文本装饰直接应用于 ruby 基底时, 这些额外空间不被装饰, 类似于盒自身 padding 区不被装饰。[CSS3-TEXT-DECOR]
文本装饰也可直接应用于 ruby 基底容器和注释容器: 此时会传递到容器内所有基底或注释,并在它们之间连续绘制。
ruby 注释的位置可以调整, 以避免与基底文本的上划线(overline)和下划线(underline)冲突。 在字体大小和基线一致的基本情况下, 下划线或上划线会绘制在 基底层与该侧注释之间。
本节需补充说明 邻接基底/注释内容间装饰的绘制方式, 取决于这些盒是否与其列等宽。
5. 边缘效果
5.1. 悬挂 Ruby:ruby-overhang 属性
名称: | ruby-overhang |
---|---|
值: | auto | none |
初始值: | auto |
适用元素: | ruby 注释容器 |
可继承: | 是 |
百分比: | n/a |
计算值: | 指定关键字 |
规范顺序: | 依语法 |
动画类型: | 按计算值类型 |
ruby-overhang 属性控制 ruby 注释是否可超出 ruby 容器与相邻文本重叠。 各值含义如下:
- auto
-
当 ruby 注释容器长于其对应的 ruby 基底容器 时,
ruby 注释容器可部分悬挂重叠相邻盒。
允许悬挂的条件、范围和规则由 UA 决定。
- none
- ruby 注释容器绝不允许超出自身范围。
若不允许ruby 注释悬挂, ruby 容器表现如普通行内盒, 即只有自身内容渲染在边界内,相邻元素不会跨越盒边界:

不允许悬挂相邻文本的简单 ruby
若ruby 注释容器允许悬挂, 相邻内容可与 ruby 容器盒重叠, 允许其 ruby 注释部分覆盖上下文的行内内容。 悬挂仅在不会导致相邻内容与 ruby 容器的 注释盒或其下的 基底内容冲突时允许。

允许悬挂相邻文本的简单 ruby
注: 某 ruby 注释是否可跨越其他 ruby 基底由 ruby-merge 控制。
通常,基底或注释内容的对齐不受悬挂行为影响: 对齐与空间分配(见 ruby-align) 的方式与是否允许悬挂无关,且在计算可用悬挂空间前已确定。 但 UA 可在分配空间和/或对齐时考虑允许悬挂的情况。
5.2. 行边对齐
当一侧超出基底的ruby 注释盒在行首或行末时, UA 可以强制该 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; /* 见 [[CSS-FONTS-3]] */ text-justify: ruby; /* 见 [[CSS-TEXT-4]] */ text-emphasis: none; /* 见 [[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 % ; } /* 注音符号 */
注: 作者不应自行使用以上规则,支持 ruby 布局的 UA 应默认提供这些样式。
实现“最小字体大小”功能的 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>
的情况下,以下规则可为每段注释加括号:
/* 给 <rtc> 加括号 */ rtc::before{ content : "(" ; } rtc::after{ content : ")" ; } /* 给首个不在 <rtc> 内的 <rt> 前加括号 */ rb + rt::before, rtc + rt::before{ content : "(" ; } /* 给不在 <rtc> 内的 <rt> 后加括号 */ rb ~ rt:last-child::after, rt + rb::before{ content : ")" ; } rt + rtc::before{ content : ")(" ; }
若已知只用交替标记法
(
)
不会出现相邻 ruby 注释,
以下规则可为每个注释加括号:
/* 给每个 <rt> 加括号 */ rt::before{ content : "(" ; } rt::after{ content : ")" ; }
6. 术语表
- 注音符号 或 注音符号 (中文:ㄅㄆㄇㄈ,注音符號,或 注音符号)
-
为中文语音(尤其是普通话标准音)设计的字符和声调符号。 这些通常(但并非专用于)用于 ruby 注音。
注音符号作为中文字间注释的例子
注音符号声调符号是空格型字符, (在内存中)出现在每个注音音节的末尾。 它们通常显示在注音符号字母的右侧或上方的独立轨道中, 声调符号的位置依赖于音节中字符的数量。 但轻声符号则位于注音符号前面(与注音字母对齐),而不是在旁边。
注: 浏览器和字体子系统负责在显示文本时确保字形的正确相对对齐和定位,包括注音符号声调符号,无论这些文本出现于 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 处理。 - 韩文汉字(朝鲜语:漢字)
- 韩文书写体系的一个子集,使用自中文书写体系借用或改编的表意字符。 另见 日文汉字。
- 平假名(日本语:平仮名)
- 日语音节文字或该文字的字符。外形圆润、草书。 是日语书写体系的子集,与汉字和片假名共同使用。 近年来主要用于在无法或不适合用汉字时书写日语词汇,以及词尾和助词。 另见 片假名。
- 表意文字
- 一种用来表示思想、词或词素的字符,与字母或音节文字的字符不同。 最著名的表意文字体系在东亚(中国、日本、韩国等)使用(有一定差异)。
- 假名(日本语:仮名)
- 平假名和片假名的统称。
- 汉字(日语:漢字)
- 日语中对表意文字的称呼;日语中使用的汉字。 是日语书写体系的子集,与平假名和片假名共同使用。 另见 韩文汉字。
- 片假名(日语:片仮名)
- 日语音节文字或该文字的字符。外形棱角分明。 是日语书写体系的子集,与汉字和平假名共同使用。 近年来主要用于书写外来词。 另见 平假名。
致谢
没有以下人士的帮助,本规范无法完成:
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。
特别感谢前任编辑: Microsoft 的 Michel Suignard 和 Marcin Sawicki, 以及 W3C 的 Richard Ishida。
变更记录
本节记录了自前一版发布以来的变更。
自 2021 年 12 月 2 日 WD 之后的变更
- 将 writing-mode 在字间注释上的计算值调整为作用于 ruby 注释盒,而非 ruby 注释容器盒。
- 为 HTML 中的 ruby
注释 增加
zh-Hant
规则,应用 font-size: 30%。 - 为 UA 默认样式表添加
text-justify: ruby
。 (问题771 问题779)
自 2020 年 4 月 29 日 WD 之后的变更
- 为 alternate 关键字加入 ruby-position,并设为初始值。
- 将 collapse 从 ruby-merge 的可选值重命名为 merge。 (问题5004)
- 定义 visibility: collapse 显式 注释, 与 一致。 (问题5927)
- 更精确地规定了各 ruby 显示类型适用的属性 (§ 3.3 ruby 盒样式), 定义 ruby、ruby 基底、ruby 注释盒除特殊规定外与普通行内盒一致。 (问题4935, 问题4936, 问题4976, 问题4979)
- 大幅重写 § 3 Ruby 布局,更清晰定义了行间和字间 ruby 布局, 以及它们与 ruby-align 的交互。字间 ruby 现在基于 inline block 布局, 并明确了其与 行间 ruby 的关系。 行内轴上的空间分布也更精确定义了跨越注释的行为 (以 max-content 网格轨道为模型)。
- 定义嵌套 ruby 的处理, 块轴尺寸需考虑其基底和注释容器。 (问题4986, 问题4980)
- 更精确地规范了 ruby-align 的行为。
- 放宽 ruby 悬挂不影响内容对齐的要求,增加不能与相邻内容碰撞的新要求。
- 澄清了 bidi 重排与合并注释的交互。 (见§ 3.5 双向重排)
- 规范全篇加强。
- 完善了简介、示例和其它补充内容。
注: 仍有许多未解决问题,见 意见处理 和 GitHub 跟踪的新问题 。
自 2014 年 8 月 5 日 WD 之后的变更
- 恢复 ruby-overhang: auto | none,用于基本控制 ruby 悬挂行为。
- 使行内化与 CSS Display 模块保持一致。
- 允许 UA 在 ruby/着重号与下划线/上划线冲突时进行位置调整。
- 当 ruby-merge 的计算值为
collapse
时禁用自动隐藏。 - 调整 默认样式表。
- 新增章节,定义与 文本装饰 的交互。
- 将 right 和 left 这两个 ruby-position 的值延后到下一级规范。
- 修改 ruby 配对规则,仅对匿名注释(即直接包含在
rtc
的内容)应用跨越。 - 多余的基底/注释与自动生成的空匿名基底/注释配对。
- 将 ruby-position 应用于 ::first-line。 (Issue 2998)
- 明确 ruby 盒及其内容的包含块与其他行内盒一样,是最近的块级容器。
- 明确对于被错误放置父级的内部表格元素的处理方式。
- 修剪 ruby 容器、基底容器和注释容器的首尾空白,防止干扰配对。
- 定义空基底和注释容器的布局效果。
- 禁用 ruby 基底容器和注释容器上的 margin、padding 和 border(但 ruby 基底和注释本身不受影响)。
自 2013 年 9 月 19 日 WD 之后的变更
自 2011 年 6 月 30 日 WD 之后的变更
- 移除
ruby-span
和rbspan
的相关内容。 - HTML ruby 不使用显式跨越,而采用隐式跨越。 这不能处理某些极端双向跨越,但目前无实际需求。 (支持完整复杂 XHTML Ruby 的实现可通过标记隐式推断跨越,类似表格单元格跨越的处理方式。 Level 1 无需包含此控制。)
- 延后
ruby-overhang
和ruby-align: line-end
到 Level 2。 - 属于较复杂的高级特性。 提议将此行为定义为 UA 自定,并提供可接受选项示例。
- 关闭
display: rp
相关问题:用display: none
代替。 - 国际化工作组提出 issue,
希望
rp
元素有 display 值。 实际上 ruby 显示为 ruby 时应隐藏该元素, 但display: none
已能实现。 - 将 ruby-position 的值对齐到 text-emphasis-position。
- 除 inter-character,其它值与 text-emphasis-position 对齐更合理, 可正确处理横竖排组合。
- 移除 ruby-align 的未用值。
- left、right、end 不再需要。
- 用 space-around
和标准对齐规则代替 auto,distribute-letter,distribute-space;
以 space-between、
space-around 与
[CSS-FLEXBOX-1] 和
[CSS-ALIGN-3] 的分布关键字一致,避免和
text-justify: distribute
的混淆。- 增加 ruby-merge 属性以控制熟语 ruby 显示。
- 这属于样式效果而非结构, 旧模型假设为结构,并建议通过更改标记实现,已废弃。
- 移除 inline 作为 ruby-position 的值。
- 用
display: inline
实现,见附录A。 - 加入 默认样式 规则
- 应国际化工作组要求。
- 重写匿名盒生成规则
- 并定义了基底和注释的配对。 现在应能处理所有 HTML ruby 标记的组合情况。
- 定义 ruby 布局
- 详细定义了空间分布、空白处理、断行、行叠加等。 双向处理留作未解决问题。