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

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge 未対応 なし
補足
未対応 なし
補足
補足 Edge 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.
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 ? Edge Mobile ? Firefox Android 完全対応 38Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,