文字組の話（ルビ）
ルビは読み方や意味の補足を行うために利用される文字組の機能の一つです。今回はルビについてのお話です。
ルビは、平仮名が発展した平安時代から使われるようになったそうです。現代でもルビは漢字の読み方や、専門書における用語の解説、または外来語の表記として活躍しています。人が文章を読みやすくするために様々なシーンで利用されています。
ルビはHTMLの仕様としても定義されています。
https://html.spec.whatwg.org/#the-ruby-element
基本的なルビの使い方は簡単です。
<html>
<body>
<ruby>帳票<rt>ちょうひょう</rt></ruby>
</body>
</html>Chromeで表示させると下記のようになります。
※noteではhtmlを埋め込めないようなので画像を添付
ルビ文字（上記では"ちょうひょう"）が親文字（上記では"帳票"）より長い場合、親文字がバランスよく配置されます。逆の場合はルビ文字の位置が同じように調整されます。文字の流れをスムーズにすることで、読み手にストレスなく読ませるための心遣いです。素晴らしいですね。
さらに、ルビ文字は隣の文字に乗っかります。
<html>
<body>
SVFはデジタル<ruby>帳票<rt>ちょうひょう</rt></ruby>を出力する
</body>
</html>ルビ文字の先頭文字の「ち」が手前の文字の「ル」の上に乗っているのがわかります。一方、ルビ文字の末尾文字の「う」が後ろの文字の「を」の上に乗っています。これも文字の流れを意識した仕様という認識です。
次に、ルビ文字のアライメントを調整する事も可能です。
上記は短い方の文字を両端に揃えて配置した場合になります。
ルビ文字列の両端をしっかり合わせたい場合や、ルビ文字を隣の文字に乗せたくない時に利用したいプロパティですね。
<html>
<head>
<style type="text/css">ruby {ruby-align: space-between;} </style>
</head>
<body>
<ruby>帳票<rt>ちょうひょう</rt></ruby>
</body>
</html>CSSで上記のように指定することが可能です。
※現状ではFirefoxのみ対応するプロパティ
短い方の文字列の文字間を広げないようにするプロパティもあります。
<html>
<head>
<style type="text/css">ruby {ruby-align: center;} </style>
</head>
<body>
<ruby>帳票<rt>ちょうひょう</rt></ruby>
</body>
</html>文字間が広がってしまうことで文字の流れが途切れてしまうような場合には利用したいプロパティですね。
まとめ
ルビは日本独特の表記方法で、様々なオプションがあり、用途や好みに合わせて使い分けることが可能です。標準的な機能は様々なブラウザで見る事が出来ます。是非お試しください。
余談ですが、ルビは私が大好きな文字組機能の一つです。弊社製品のSVFでは未対応の機能ですが、今後チャンスがあれば対応したい機能です。（プロトタイプとして試験的な実装はこっそり行ったことがあります）
以上、お粗末様でした。
この記事が気に入ったらサポートをしてみませんか？