日本語のページを組んでいると、ふりがな、つまりルビの扱いで地味に手を取られることがある。難読の地名や人名に読みを添えたい、子ども向けや自治体のページで漢字に読みを振りたい、といった要望は今も普通に出てくる。HTMLにはもともと ruby 要素があり、<ruby>石動<rt>いするぎ</rt></ruby> のように書けば親字の上に読みが乗る。ところが実際に組んでみると、読みのほうが親字より長いときの見え方がブラウザまかせになりがちで、そこを細かく指定する手段が長らく足りていなかった。Chromeのベータ版に入った新しいCSSプロパティは、その足りなかった部分をひとつ埋めるものになっている。

ルビは日本語サイトの地味な難所

ルビの厄介さは、親字と読みの長さが一致しないところにある。二文字の漢字に四文字の読みを振れば、読みの側が横にあふれる。ブラウザはこのあふれた分を隣の文字の上に少しはみ出させて表示することが多い。行がむやみに間延びしないので、組版としてはむしろ自然な処理だ。

問題は、そのはみ出しが常に望ましいとは限らないことだった。隣にリンクや強調が続いていると読みが重なって見えづらくなる。狭いカラムや表のセルの中では、はみ出しのせいで折り返し位置が予想と変わる。逆にはみ出しを一切許さないと、親字と読みの幅を揃えるために文字間が広がり、本文の中でその部分だけ間延びして見える。どちらを選ぶかは文脈次第で、これまではCSSからその判断を伝える標準的な手段がなかった。制作側は文字サイズを下げる、ルビを画像にする、そもそもルビをあきらめるといった回り道をしてきた。

はみ出しの許し方を選べるruby-overhang

Chrome 151のベータで加わったのが ruby-overhang というプロパティで、ルビが隣にはみ出すことを許すかどうかを書き手が指定できる。初期値は auto で、これは従来どおりブラウザの判断ではみ出しを許す振る舞いにあたる。隣にも別のルビが並んでいる場合など、重なると読めなくなる状況では自動的にはみ出さない、といった配慮も仕様に含まれている。

もうひとつの値が spaces で、はみ出してよい相手を空白と約物、つまり句読点やかっこの類に限る。隣が普通の文字なら、はみ出さずにその手前で止まる。Chromeの説明によれば none は spaces の別名として扱われ、はみ出しを完全に禁じた結果として不自然な隙間ができるのを避ける形になっている。この none の解釈は資料によって記述が揃っていない段階なので、実際の見え方は手元で確かめておきたいところだ。

書き方そのものは短い。読みが隣の文字に重なると困る箇所に ruby-overhang: spaces; を当てるだけで、あとはブラウザが処理してくれる。JavaScriptで文字幅を測って調整する、といった作業はいらない。

位置や揃え方を決める指定との組み合わせ

ルビまわりのCSSは、これが最初というわけではない。読みを親字の上に置くか下に置くかを決める ruby-position、親字に対して読みをどう割り付けるかを決める ruby-align は以前から使える。縦書きで読みを右側に出したい、読みを親字の幅いっぱいに散らしたい、といった調整はこれらが受け持つ。

今回の指定は、そこに「隣との境界をどう扱うか」という軸を足すものだと考えるとわかりやすい。位置と揃え方を決めたうえで、あふれた分を外に出してよいかどうかを別に決められる。組み合わせると、たとえば見出しの中のルビははみ出しを許して行の高さを保ち、本文の狭い箇所でははみ出しを止める、といった使い分けができる。

現時点で試すときの構え

ruby-overhang は主要ブラウザすべてに揃った状態ではなく、Baselineの対象にもなっていない。Chromeでもまだ安定版ではなくベータの段階にある。今すぐ本番の見た目を左右する前提で組むものではない、というのが正直なところだ。

とはいえ、対応していないブラウザではこの指定が無視されるだけで、ルビ自体は従来どおり表示される。壊れるのではなく、これまでの見え方に戻るだけなので、段階的に足していける類の機能になる。ルビを多用しているページがあるなら、対応済みのブラウザで spaces を当てたときにどう変わるかを一度見ておくと、将来の判断が早くなる。

中小企業のサイトでルビが主役になる場面は多くないが、社名や商品名の読み、地域名、業界特有の用語など、読みを添えたい単語は意外とある。読みを振ると崩れるから避ける、という選択をしてきた現場ほど、こうした指定が揃ってきたことの意味は大きい。日本語の組版に関わる指定がウェブ標準の側で少しずつ整っていくのは、地味だが歓迎したい流れだ。