ruby-align

ruby-align

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

ruby-alignCSS属性定义在基底的不同ruby 元素的分布。

/* 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: unset;

语法

值

start是一个关键字，表明ruby 将与基本文本的开始对齐。

center是一个关键字，表示ruby将在基本文本的中间对齐

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

space-around是一个关键字，表明多余的空间将分布在ruby 的元素和周围。

形式语法

start | center | space-between | space-around

实例

此HTML将以不同的方式呈现ruby-align：

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

Ruby在基本文本的开始对齐

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align:start;
}

结果如下：

Ruby在基本文本的中心对齐

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align:center;
}

结果如下：

在 ruby 元素之间额外的空间分布

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align:space-between;
}

结果如下：

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

<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

ruby {
  ruby-align:space-around;
}

结果如下：

规范

浏览器兼容性

Microsoft Edge及其前身的Internet Explorer版本9至11实现了CSS Rubby的一个早期草案，其中ruby-align属性有值auto，left，center，right，distribute-letter，distribute-space，和line-edge。这里是一个表格，描述了Microsoft实现的和当前的CSS Ruby，Level 1规范之间的近似等价关系：