昨日に続いてルビネタ。
いまいち再現条件がよく分かってないんだけど、
- 縦書きにする
- 縦書きのボックスに高さを設ける
- さらに均等割り付けにする
- 適当な箇所でルビをつける
の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
