ruby-position

實驗性質: 這是一個實驗中的功能 (en-US)
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

CSS 的 ruby-position 屬性定義了 ruby 元素與該基礎元素（base element）相關聯的位置。它能在元素上方（over）、下方（under）、兩個字符之間、抑或右方（inter-character）。

css
/* 關鍵字值 */
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;

/* 全域值 */
ruby-position: inherit;
ruby-position: initial;
ruby-position: unset;
預設值 (en-US)alternate
Applies toruby annotations containers
繼承與否yes
Computed value (en-US)as specified
Animation type (en-US)discrete

語法

屬性值

over

Over example如果文件以橫式排列，該關鍵字會指引旁註標記（ruby）出現在主文的上方。如果文件以直式排列，則會出現在主文的右方。

under

Under example如果文件以橫式排列，該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列，則會出現在主文的左方。

inter-character

該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。

正式語法

ruby-position = 
  [ (en-US) alternate || (en-US) [ (en-US) over | (en-US) under ] (en-US) ] (en-US)  | (en-US)
  inter-character

示例

HTML 會因為 ruby-position 的值不同，而作出不同的渲染：

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

旁註標記定位到主文上方

html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
css
ruby {
  ruby-position: over;
}

它會給出如下結果：

旁註標記定位到主文下方

html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
css
ruby {
  ruby-position: under;
}

它會給出如下結果：

規範

Specification
CSS Ruby Annotation Layout Module Level 1
# rubypos

瀏覽器相容性

BCD tables only load in the browser

參見