ルビ (ruby annotation) は、漢字の読み方を示す振り仮名のことです。名称の由来は活版印刷の活字サイズで、5.5 ポイントの活字を「ルビー」と呼んだことに遡ります。日本語の書籍、新聞、教科書で広く使われており、特に児童向けコンテンツや難読漢字を含む文章では不可欠な表記要素です。

HTML でルビを実装するには <ruby> 要素を使います。<ruby>漢字<rt>かんじ</rt></ruby> と記述すると、「漢字」の上に小さく「かんじ」と表示されます。ルビに対応していないブラウザ向けに <rp> 要素で括弧を付けるフォールバックも用意されています。現在の主要ブラウザはすべて <ruby> をサポートしています。

ルビには「モノルビ」と「グループルビ」の 2 種類があります。モノルビは漢字 1 文字ずつに振り仮名を付ける方式で、「東とう京きょう」のように各文字の読みが明確になります。グループルビは熟語全体に振り仮名を付ける方式で、「東京とうきょう」のように表示します。教科書ではモノルビが標準ですが、ウェブではグループルビが多く使われます。

文字数カウントにおけるルビの扱いは複雑です。ルビテキスト (振り仮名部分) を文字数に含めるかどうかは、用途によって異なります。原稿用紙の文字数カウントではルビは文字数に含めません。一方、HTML のソースコード上では <rt> 内のテキストも文字列として存在するため、DOM のテキストコンテンツを取得すると「漢字かんじ」のように本文とルビが連結されます。正確な文字数カウントには、ルビ部分を除外するロジックが必要です。

CSS でのルビのスタイリングには ruby-position (上/下)、ruby-align (揃え方)、ruby-overhang (はみ出し) などのプロパティがあります。ルビのフォントサイズは親文字の 50% が標準ですが、ウェブでは可読性を考慮して 60〜70% に設定することもあります。ルビが長い場合 (例: 「薔薇」に「ばら」) は親文字からはみ出すため、前後の文字との間隔調整が必要です。

アクセシビリティの観点では、スクリーンリーダーはルビテキストを読み上げるため、視覚障害のあるユーザーにも漢字の読みが伝わります。ただし、ルビの読み上げ方はスクリーンリーダーによって異なり、「漢字、かんじ」と読むものもあれば「かんじ」だけを読むものもあります。