ruby-position

Baseline 2024 *

新推出

自 2024 年 12 月起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在舊版裝置或瀏覽器上使用。

* 此特性的某些部分可能存在不同級別的支援。

ruby-position CSS 屬性定義了 ruby 元素相對於其基元素的位置。它可以定位在元素的上方（over）、下方（under），或者字元之間（inter-character）的右側。

試一試

ruby-position: over;

ruby-position: under;

<section id="default-example">
  <ruby id="example-element"> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>

#example-element {
  font-size: 2em;
}

語法

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: 一個關鍵字，表示 ruby 在水平書寫模式下應放置在主文字上方，在垂直書寫模式下應放置在主文字右側。
下: 一個關鍵字，表示 ruby 在水平書寫模式下應放置在主文字下方，在垂直書寫模式下應放置在主文字左側。
交替: 一個關鍵字，表示當有多個註釋級別時，ruby 在上方和下方之間交替。
inter-character: 當指定時，在垂直書寫模式下其行為與 over 相同。否則，它表示 ruby 必須放置在不同的字元之間，在水平文字中出現在基元素的右側，並強制 ruby 註釋容器的子元素具有 vertical-rl 書寫模式。

正式定義

初始值	`交替`
應用於	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

瀏覽器相容性

另見

<ruby>、<rt>、<rp> 和 <rtc> HTML 元素
ruby-align

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題