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

ruby-position

ruby-positionは、ルビ注釈テキストの表示位置を制御するCSSプロパティです。over（上）、under（下）、inter-character（文字間）の値を指定でき、言語や用途に応じた最適なルビ配置が可能です。日本語では通常上側に表示しますが、教育用途や特定のデザインでは下側に配置することもあります。

ルビ位置指定

概要

ruby-positionは、ルビ注釈テキストの表示位置を制御するCSSプロパティです。over（上）、under（下）、inter-character（文字間）の値を指定でき、言語や用途に応じた最適なルビ配置が可能です。日本語では通常上側に表示しますが、教育用途や特定のデザインでは下側に配置することもあります。

対応ブラウザ

デスクトップ

Chrome 84+
Edge 84+
Safari 18.2+
Firefox 38+

モバイル

Chrome Android 84+
Safari iOS 18.2+
Firefox Android 38+

基本構文

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

実務での使いどころ

  • ルビの表示位置設定

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

注意点

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

アクセシビリティ

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

参考リンク