HTMLの規格にrubyが提案されたのは2001年。GPTやGeminiに雑に聞くと2014年のHTML5と答えるかもしれないけど、Mac OS 10.4 TigerのDashboardで遊んでいた頃には動いていたはずだから、2005年から数えて20年近く付き合っていることになる。
そしてその頃からずっと、一行目のルビが親要素のマージンを広げてしまう問題に悩まされている。
上の例では、二段落目の「傍」につけたルビが段落のマージンを広げてしまっている。これは縦書きでも同じ問題を引き起こす。
0.2文字幅程度のわずかなズレなのだけど行が揃わないのは美しくないし、40行入れようと思った時に入らず溢れてしまったりもする。CSSから印刷物を作るCSS組版では致命的な問題なので、ルビを扱う時はいつもなんとかできないかとあの手この手を試して、情報を集めてもいた。flexでレイアウトしてみるとかabsoluteにしたらどうかとかcss transformならいけるかとか……でも、どれも無理だったね。
rubyタグにdata-rubyみたいなアトリビュートを追加して、CSSのbefore擬似要素をレイヤーのように載せる方法は面白かったけれどルビの字数が多い時はうまくいかない。
驚くかもしれないけど、KindleやKobo、AppleのBooksでも同じ問題は出る。1行目にルビがあるとちょっとだけ行が太るのだ。この問題が出ていないように見える電子書籍に出会うこともあるけど、よく見ると行送りが大きくて目立たないだけだったり、たまたまそのページで問題が出ていなかったりするだけだったりする。十年前は「いつか治るだろう」と思ってたけど、まさか直らずにここまで来るとは思っていなかった。
私の作っているnovel-writerでも、もちろんこの問題が出る。原稿用紙プレビューには枠線があるので、ずれがはっきり見える。
しかし印刷となるとそうはいかない。使いやすいPDFプレビューを搭載したおかげで、このずれが気になる場面が増えてきたので、解決することにした。
1行目にルビが出てくる段落のマージンを減らすのだ。
novel-writerは原稿用紙やPDFのプレビューを行うときに、段落ごとにルビや圏点のタグを埋め込んでいる。この時に、1行の文字数よりも手前に<rubyが来る段落は右（あるいは上）マージンをズレの分だけ減らせば、ズレは消えるはず。というわけで実装してみたらうまくいったので、3.4.5としてリリースした。
乱暴な方法だけど20年越しの問題が解決したので、ちょっと気が晴れた。
でも、いつか直ってほしいなあ。
