読者です 読者をやめる 読者になる 読者になる

Firefox Nightlyにおいて、ある縦書き環境下でルビを付けるとルビがおかしなところに飛ぶ

昨日に続いてルビネタ。

いまいち再現条件がよく分かってないんだけど、

  • 縦書きにする
  • 縦書きのボックスに高さを設ける
  • さらに均等割り付けにする
  • 適当な箇所でルビをつける

の4つの条件をどうやら満たすと、ルビテキストがルビベースから大きく離れて文字が重なってしまう。

p要素にtext-align: justify;を施した上で、縦書きに高さを設定して適当てきとうなルビを設定してみる例。

<p style="text-align: justify;height:200px;writing-mode: vertical-rl;"><code>p</code>要素に<code>text-align: justify;</code>を施した上で、縦書きに高さを設定して<ruby>適当<rt>てきとう</rt></ruby>なルビを設定してみる例。</p>

もう少し別の例を考えてみる


<p style="text-align:justify; height:200px; writing-mode:vertical-rl;">
<ruby>祇園精舎<rt>ぎおんしょうじゃ</rt></ruby>の鐘の声、
<ruby>諸行無常<rt>しょぎょうむじょう</rt></ruby>の響きあり。
<ruby>沙羅双樹<rt>さらそうじゅ</rt></ruby>の花の色、
<ruby>盛者必衰<rt>じょうしゃひっすい</rt></ruby>の理をあらはす。<!-- correct rendering -->
</p>

なぜか最終行はバグらない…なんだこれ。

バグレポ投げておきました:1135361 – CSS Ruby jumps under certain vertical text situation