ruby-align

ruby-align CSS 属性定义了不同 ruby 元素在基线上的分布。

语法

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

是一个关键字，表示 ruby 将与基线文本的开头对齐。

center

是一个关键字，表示 ruby 将与基线文本的中间对齐。

space-between

是一个关键字，表示额外的空间将分布在 ruby 的元素之间。

space-around

是一个关键字，表示额外的空间将分布在 ruby 的元素之间，以及 ruby 周围。

正式定义

初始值space-around
应用于ruby 基线、ruby 注解、ruby 基线容器、ruby 注解容器
继承是
计算值如指定
动画类型按计算值类型

正式语法

ruby-align = 
  start          |
  center         |
  space-between  |
  space-around

示例

与基线文本开头对齐的 Ruby

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;
}

结果

与基线文本中心对齐的 Ruby

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;
}

结果

Ruby 元素之间分布的额外空间

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;
}

结果

Ruby 元素之间和周围分布的额外空间

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-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅