Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

ruby-position

ruby-position は CSS のプロパティで、ベース要素に対するルビ要素の位置を定義します。要素の上方 (over)、下方 (under)、文字の間の右側 (inter-character) に配置できます。

ルビ位置指定

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ruby-position
84
84
38
18.2
84
18.2
inter-character
84
84
18.2
84
18.2
over
84
84
38
18.2
84
18.2
under
84
84
38
18.2
84
18.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
  • `ruby-position` の非標準の接頭辞付きバージョン、`-webkit-ruby-position` として実装されます。これには 2 つのプロパティがあります: `before` と `after` (どちらも ltr および rtl スクリプトの場合、`ruby-align: start` で使用される標準の `over` 値と同等です)。
注釈 3件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
実装メモ
  • `ruby-position` の非標準の接頭辞付きバージョン、`-webkit-ruby-position` として実装されます。これには 2 つのプロパティがあります: `before` と `after` (どちらも ltr および rtl スクリプトの場合、`ruby-align: start` で使用される標準の `over` 値と同等です)。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
実装メモ
  • `ruby-position` の非標準の接頭辞付きバージョン、`-webkit-ruby-position` として実装されます。これには 2 つのプロパティがあります: `before` と `after` (どちらも ltr および rtl スクリプトの場合、`ruby-align: start` で使用される標準の `over` 値と同等です)。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
実装メモ
  • `ruby-position` の非標準の接頭辞付きバージョン、`-webkit-ruby-position` として実装されます。これには 2 つのプロパティがあります: `before` と `after` (どちらも ltr および rtl スクリプトの場合、`ruby-align: start` で使用される標準の `over` 値と同等です)。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
実装メモ
  • `ruby-position` の非標準の接頭辞付きバージョン、`-webkit-ruby-position` として実装されます。これには 2 つのプロパティがあります: `before` と `after` (どちらも ltr および rtl スクリプトの場合、`ruby-align: start` で使用される標準の `over` 値と同等です)。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • この値は、プロパティのプレフィックス付きバージョンでのみサポートされます。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • この値は、プロパティのプレフィックス付きバージョンでのみサポートされます。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • この値は、プロパティのプレフィックス付きバージョンでのみサポートされます。

基本構文

CSS 
ruby {
  ruby-position: over;
}
.bottom-ruby {
  ruby-position: under;
}

ライブデモ

Over(top)

CSS Over(top) demo.

プレビュー全画面表示

Under(bottom)

CSS Under(bottom) demo.

プレビュー全画面表示

verticalcomparison

CSS verticalcomparison demo.

プレビュー全画面表示

実務での使いどころ

  • ルビの表示位置設定

    日本語テキストの振り仮名を漢字の上側に表示したり、学習用途で下側に配置したりします。

注意点

  • inter-characterの値は台湾の注音符号（ボポモフォ）用であり、日本語のルビには適しません。

アクセシビリティ

  • ルビの表示位置を変更しても、HTML構造が正しければスクリーンリーダーでの読み上げに影響はありません。

参考リンク