ruby-position

Experimental

這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。

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

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

/* 全域值 */
ruby-position: inherit;
ruby-position: initial;
ruby-position: unset;

預設值over
Applies toruby annotations containers
繼承與否yes
Computed valueas specified
Animation typediscrete

語法

屬性值

over
Over example如果文件以橫式排列,該關鍵字會指引旁註標記(ruby)出現在主文的上方。如果文件以直式排列,則會出現在主文的右方。
under
Under example如果文件以橫式排列,該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列,則會出現在主文的左方。
inter-character
該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。

正式語法

over | under | inter-character

示例

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

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

旁註標記定位到主文上方

ruby {
    ruby-position:over;
}

它會給出如下結果:

旁註標記定位到主文下方

ruby {
    ruby-position:under;
}

它會給出如下結果:

規範

規範 狀態 註解
CSS Ruby Layout Module Level 1
The definition of 'ruby-position' in that specification.
Working Draft 初始定義

瀏覽器相容性

BCD tables only load in the browser

參見