ルビの基本

      2016/07/17

ルビはhtmlのruby要素で指定することで表示されます。ruby要素の中でルビ文字に当たる部分をrt要素で指定します。

要素名 意味
ruby ルビ(親文字とルビ文字全体)
rb ルビの親文字
rt ルビ文字
rp ルビをサポートしていないブラウザ用のフォールバック
rtc ルビコンテナ

ルビサンプル

See the Pen ルビサンプル01 by overprint (@overprint) on CodePen.

ルビ表示

CSSで特に指定しない場合、ルビは親文字の50%のサイズで表示されるようです。ただし、Chromeでは10px以下の文字サイズには小さくならないようです。テキストのデフォルト文字サイズは16pxなので、そのままでは親文字が16px、ルビ文字が10pxになり、50%サイズにはなりません。

Safariではこの制限はないようで、10px以下の文字サイズでも指定通りのサイズで表示されます(小さすぎて読めないですが)

Chrome(Mac版48.0.2564.109)での表示
Safari(Mac版9.0.3 (10601.4.4))での表示

Webフォントでのルビ表示のずれ

上記のようにChromeとSafariでも表示が合わないという問題がありますが、ChromeのMac版とWindows版で、ルビの親文字とルビ文字の空きが異なるという問題がおきました。表示にFONTPLUSのWebフォント(筑紫明朝)を使用したのですが、その場合にフォントが持っているなんらかの情報の扱いが間違っているようです。
(Webフォントを切ってデフォルトフォントで表示すると空きがなくなる)

Chrome(Mac版48.0.2564.109)での表示
Chrome(Windows10版48.0.2564.116m)での表示

参考

 - css, ルビ