rubyタグ内の改行について。Chrome,Firefox,Edgeで表示を統一したい。

前提

htmlタグのrubyを用いてルビをふっている文字列があるのですが、widthの値で改行した時の挙動がChrome,Firefox,Edgeで異なります。
これを統一したいのですが、https://www.w3.org/
などを参考にしても言及されておらず、検索しても良い例がかかりません。

rubyタグの正しい扱い方がありましたらお教えください。

実現したいこと

ruby内を左揃えにしたいのです。
text-align:leftも（古いのかもしれませんが）ruby-align:leftも効きません。

以下の様な表示にしたい

発生している問題・エラーメッセージ

Chrome,Edgeでは一番下の行が左右均等分散の様な形になってしまいます。

Firefoxでは改行すらしてくれません。

該当のソースコード

html
1<p style="width:108px;">
2 <ruby>
3  <rb>寿限無寿限無五劫のすりきれ海砂利水魚の水行末雲来末風来末</rb>
4  <rt>じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ</rt>
5 </ruby>
6</p>

試したこと

・text-align:left;
・検索してruby-alignというのに行き着いたので試してみましたがダメでした。
・Firefoxでは<br>タグさえ無視されてしまいます。
・Firefoxではword-break: break-all;も無視されます。
・W3Cページでrubyについて調べましたが特筆すべき点は見つかりませんでした。

ひとまずrubyを使うのが正しいのだと思い使っていますが、扱いにくいのでpタグやspanタグなどに入れえる事も視野に入れておりますが、その前にrubyタグの正しい扱い方がありましたらお教えください。

行動規範の内容に同意します

回答1件

ベストアンサー

規格では https://drafts.csswg.org/css-ruby-1/#break-within で述べられていて、このケースではwhite-spaceがデフォルトのままなのでFirefoxの動作が正しいです。white-space:normal などを設定した場合はルビとベースが交互に表示されるべきです。現状、ルビの実装はどのブラウザも中途半端で、規格通りには動きません。

このケースで表示をブラウザ間で揃える方法は思いつきません。

Safari, Chrome, Edge は ruby-align に未対応で、text-align: left でお望みの挙動になります。

投稿2022/07/19 07:28

編集2022/07/19 07:45