语法
css
/* Keyword values */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;
/* Global values */
ruby-align: inherit;
ruby-align: initial;
ruby-align: revert;
ruby-align: revert-layer;
ruby-align: unset;
值
start-
这是一个关键词，表示注音将与基准文本的开头对齐。
center-
这是一个关键词，表示注音将与基准文本的中间对齐。
space-between-
这是一个关键词，表示额外的空间将分布在注音元素之间。
space-around-
这是一个关键词，表示额外的空间将分布在注音元素之间和周围。
正式定义
正式语法
ruby-align =
start |
center |
space-between |
space-around
示例
注音与基准文本开头对齐
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: start;
}
结果
注音与基准文本中心对齐
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: center;
}
结果
额外空间分布在注音元素之间
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: space-between;
}
结果
额外空间分布在注音元素之间和周围
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: space-around;
}
结果
规范
| 规范 |
|---|
| CSS Ruby 注释布局模块级别 1 # ruby-align 属性 |
浏览器兼容性
加载中…
另见
- HTML 注音元素：
<ruby>、<rt>、<rp>和<rtc>。 - CSS 注音属性：
ruby-position、ruby-merge。