MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

ruby-position

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

概要

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

預設值over
Applies toruby annotations containers
繼承與否yes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

語法

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

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

屬性值

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 初始定義

瀏覽器相容性

功能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本支援 No support  (Yes) 38 (38) No support [1] ?  No support [2]
inter-character No support  ? No support No support  ?  No support 
功能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支援 No support  (Yes) 38.0 (38) No support [1] No support  No support [2]
inter-character No support  No support No support  No support  No support 

[1] 在 IE 9 以後,Internet Explorer 起用了非常老舊的草擬版本,該版本定義 inline(在旁註標記內等同於 display: inline)與 above(等同於今日的 over)。

[2] WebKit 導入了非標準且具前綴性的 ruby-position 版本,即 -webkit-ruby-position:它有兩個屬性:beforeafter(both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start

參見

文件標籤與貢獻者

 此頁面的貢獻者: iigmir
 最近更新: iigmir,