― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 3 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2021年5月31日(月) 22:17 
http://hobbit.ddo.jp/tolkien/instrume/lotr1.html

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

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2021年6月01日(火) 01:07 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3654
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 | 表示数: 2782 回 ]

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

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

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2021年6月01日(火) 20:09 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3654
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 の内容が適用されるように変更していただければ、
ひとまず問題は解消すると思います。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 3 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[14人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean