ruby-position

ruby-position CSS 属性定义了 ruby 元素相对于其基元素的位置。它可以放置在元素上方 (over)、下方 (under) 或字符右侧之间 (inter-character)。

试试看

语法

css
/* Keyword values */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;

/* Global values */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

值

over

Over 示例 是一个关键字，表示 ruby 必须放置在水平脚本的主文本上方，对于垂直脚本，则放置在其右侧。

under

Under 示例 是一个关键字，表示 ruby 必须放置在水平脚本的主文本下方，对于垂直脚本，则放置在其左侧。

alternate

是一个关键字，表示当有多个注释级别时，ruby 在 over 和 under 之间交替。

inter-character

当指定时，它在垂直书写模式下表现为 over。否则，它表示 ruby 必须放置在不同的字符之间，出现在水平文本的基元素右侧，并强制 ruby 注释容器的子元素具有 vertical-rl 书写模式。

正式定义

初始值alternate
应用于ruby 注释容器
继承是
计算值如指定
动画类型离散

正式语法

ruby-position = 
  [ alternate || [ over | under ] ]  |
  inter-character

示例

放置在文本上方的 Ruby

HTML

html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

CSS

css
ruby {
  ruby-position: over;
}

结果

放置在文本下方的 Ruby

HTML

html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

CSS

css
ruby {
  ruby-position: under;
}

结果

Ruby 交替

HTML

html
<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

CSS

css
ruby {
  ruby-position: alternate; /* this is also the initial value */
}

结果

规范

规范
CSS Ruby 注释布局模块级别 1
# rubypos

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅