MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

rubyタグがサポートできていない
https://forums.mozillazine.jp/viewtopic.php?f=2&t=18534
ページ 11

作成者:  hobbit_makoto [ 2021年5月31日(月) 22:17 ]
記事の件名:  rubyタグがサポートできていない

http://hobbit.ddo.jp/tolkien/instrume/lotr1.html

のルビを振ったところ、
IE, Edge, Google Chromeでは正しく表示されますが、Firefoxではルビが上の行や罫線に重なってしまいます。ルビで行の高さが変わることがサポートされていないようです。

作成者:  EarlgreyTea [ 2021年6月01日(火) 01:07 ]
記事の件名:  Re: rubyタグがサポートできていない

hobbit_makoto さん、EarlgreyTea と申します。

hobbit_makoto さんが書きました:
http://hobbit.ddo.jp/tolkien/instrume/lotr1.html
のルビを振ったところ、
IE, Edge, Google Chromeでは正しく表示されますが、Firefoxではルビが上の行や罫線に重なってしまいます。

はい、たしかに重なってしまいますね。

hobbit_makoto さんが書きました:
ルビで行の高さが変わることがサポートされていないようです。

そういうわけではなく、ルビが指定された箇所は行間が広くなっています。
しかし、ge.css にてルビ文字列に対して
コード:
  position:absolute;
  top:-1.2em;
などと設定されていますが、その計算が Chrome でテストした際の想定と合わないため重なってしまっているものと思います。
添付ファイル:
ルビ文字列が上の行に重なっている.jpg
ルビ文字列が上の行に重なっている.jpg [ 185.37 KiB | 表示数: 3442 回 ]

試しにウェブ開発ツールのインスペクターにて、一時的に上記スタイルを無効化すると重ならずに表示できます。
添付ファイル:
absolute指定を取ったらルビ文字列が重ならない.jpg
absolute指定を取ったらルビ文字列が重ならない.jpg [ 186.55 KiB | 表示数: 3442 回 ]

これとか参考にしてみてはどうでしょう。
https://romly.com/blog/css_ruby/

作成者:  EarlgreyTea [ 2021年6月01日(火) 20:09 ]
記事の件名:  Re: rubyタグがサポートできていない

EarlgreyTea さんが書きました:
その計算が Chrome でテストした際の想定と合わないため重なってしまっているものと思います。

これはちょっと外れていました。
hobbit_makoto さんご提示のWEBページでは、JavaScriptにてブラウザー判定を行い、読み込むスタイルシートを切り替えていました。
すなわち、Chrome や Edge と、Firefox では別のスタイルシートが適用されており、それがルビ部分の表示の差の直接の原因でした。

ブラウザー判定は User-Agent 文字列に含まれるキーワードで判断しており

(1) キーワード「MSIE」 … 該当:Internet Explorer 10以前
  → ie.css を読み込む
(2) キーワード「Firefox/3」 … 該当:Firefox 3.x.x および Firefox 30番代
(3) キーワード「Opera/9」 … 該当:Presto版旧Opera
(4) キーワード「Safari/5」 … 該当:現行のBlinkベースのブラウザー、Safariなど多数
  → ff3.css を読み込む
(5) キーワード「Gecko」 … 該当:(2) 以外のFirefox、および派生ブラウザー
  → ge.css を読み込む
(6) 上記以外 … 該当:Internet Explorer 11など
  → 追加読み込みしない

のようにスタイルシートを追加読み込みさせています。
このブラウザー判定は、かなり昔の状況からメンテナンスされていないように見受けられます。

このブラウザー判定を廃止して常に ff3.css の内容が適用されるように変更していただければ、
ひとまず問題は解消すると思います。

ページ 11 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/