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

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
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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 の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし なし138 なし2 なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし ? ?38 なし なし なし

1. 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.

2. 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.

Microsoft Edge 及びその前身である Internet Explorer — バージョン 9 から 11 — は、 CSS ルビの早期草稿を実装しており、 ruby-align プロパティが auto, left, center, right, distribute-letter, distribute-space, line-edge の値を持ちます。こちらの表では、 Microsoft の実装と現在の CSS Ruby, Level 1 仕様との正確な対応を説明します。

Edge 及び IE の構文 標準の構文
auto 表意文字では space-around (既定値)、ラテン文字では center です。同様の効果を実現する方法としては、 ISO 15924 スクリプトコードと HTMLlang 属性又は XMLxml:lang 属性を組み合わせたものと、 CSSlang 疑似クラスセレクターを使用する方法があります。
left 左書き表記の場合は start
center center ですが、 CSS Ruby, Level 1, Section 5.2: Line‐Edge Alignment で記述されたオプションの動作がありません。これは Firefox の動作です。
right 右書き表記の場合は start
distribute-letter space-between
distribute-space space-around (既定値)
line-edge center ですが、 CSS Ruby, Level 1, Section 5.2: Line‐Edge Alignment で記述されたオプションの動作を伴いますFirefox はこの動作のキーワードに対応していません。 Firefox で同様の効果を得るには、ルビのベーステキストの位置及び幅に基づいて、個別の ruby 要素を対象に center 又は start キーワードを指定したものを代わりに使用することができます。

関連情報

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

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