ruby-align

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS の ruby-align プロパティは、ベースに対するさまざまなルビの配分を定義します。

/* キーワード値 */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/* グローバル値 */
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;
初期値space-around
適用対象ruby bases, ruby annotations, ruby base containers, ruby annotation containers
継承あり
計算値指定値
アニメーションの種類個別

構文

値

start
ルビをベーステキストの始点に揃えることを示すキーワードです。
center
ルビをベーステキストの中央に揃えることを示すキーワードです。
space-between
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。
space-around
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。

形式文法

start | center | space-between | space-around

例

この HTML を、ruby-align のそれぞれの値でレンダリングします。

<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>

ルビをベーステキストの始点に揃える

ruby {
  ruby-align: start;
}

結果は以下のとおりです。

ルビをベーステキストの中央に揃える

ruby {
  ruby-align: center;
}

結果は以下のとおりです。

ルビ要素の範囲内にスペースを配分する

ruby {
  ruby-align: space-between;
}

結果は以下のとおりです。

ルビ要素内および周囲にスペースを配分する

ruby {
  ruby-align: space-around;
}

結果は以下のとおりです。

仕様書

仕様書 状態 備考
CSS Ruby Layout Module Level 1
ruby-align の定義		 草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ruby-align
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 38IE 未対応 なし
補足
未対応 なし
補足
補足 Internet Explorer 9 and later supports an earlier draft of CSS Ruby with non-standard values for this property: auto, left, center, right, distribute-letter, distribute-space, and line-edge.
Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 38Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報