Broken text layout at page break when ruby-text font size is larger than usual

[MurakamiShinyu]

公式サンプルの『銀河鉄道の夜』を閲覧したとき、何らかの条件によって、改ページされるところで文字間が異常に開く、あるいは一文字だけの行ができるといったテキストレイアウトの異常が発生することがあります。再現する条件を調べたところ、Chromeの「設定」→「デザイン」→「フォントをカスタマイズ」の「最小フォントサイズ」を9以上の値にするとこの現象が起きました。

テスト：
https://vivliostyle.org/viewer/#src=https://vivliostyle.github.io/vivliostyle_doc/samples/gingatetsudo/index.html

追記：最小フォントサイズ設定をしなくても、CSSでルビのフォントサイズを大きめに指定すると再現します。以下はルビのフォントサイズを11pxに指定したテスト：

https://vivliostyle.org/viewer/#src=https://vivliostyle.github.io/vivliostyle_doc/samples/gingatetsudo/index.html&style=data:,/*%3Cviewer%3E*/%0A/*%3C/viewer%3E*/%0Aruby%3Ert%7Bfont-size:11px%7D

スクリーンショット：

[skmtjny]

@MurakamiShinyu

インラインでSVGを挿入した際にも似た現象が発生していたのでお知らせします。

241025.zip

[MurakamiShinyu]

@skmtjny

インラインでSVGを挿入した際にも似た現象が発生していたのでお知らせします。

ありがとうございます。調べます

[MurakamiShinyu]

ルビによって起きる不具合は v2.30.0 での次の修正に問題があったためでした：

• PR fix: Page breaks not made between some inline elements such as images #1333

これについては、 PR #1404 でのとりあえずの修正 2bb4d0e で解決します。

しかし、 #1401 (comment) で報告をもらったインラインSVGでの不具合は、別の原因のようです。
v2.19.2 での次の修正に問題があるようです。（この修正をする前のものでは問題が起きない）

• PR fix: improve box edge treatment at page break and box-decoration-break support #1037

この修正を見直します。

[MurakamiShinyu]

インラインSVGでの不具合は別の原因なので、新しいissueに分けました:

• Broken text layout at page/column break caused by inline SVG #1406

[MurakamiShinyu]

Fixed in #1404.

Test: https://vivliostyle-git-fix-issue1401-vivliostyle.vercel.app/#src=https://vivliostyle.github.io/vivliostyle_doc/samples/gingatetsudo/index.html&style=data:,/*%3Cviewer%3E*/%0A/*%3C/viewer%3E*/%0Aruby%3Ert%7Bfont-size:11px%7D

[skmtjny]

@MurakamiShinyu さま

確かなことはいえませんが、いくつかテストしてみた範囲では
rubyが連続する場合では不具合が残っているような感じがします。

241125.zip

[MurakamiShinyu]

ルビだけの問題ではなくて、行の途中に前方（block-start側）にはみ出しているインライン要素があって、そのインライン要素だけがページ/段の終わりに収まる位置にあるという条件で発生している不具合でした。

<span style="vertical-align: 2rem; font-size: 0.33em">くけこ</span> というインライン要素によってこれが起きる例：

https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401c1.html

Test: https://vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401c1.html

Screenshot:

[MurakamiShinyu]

PR #1424 で修正しました。

テスト：

• https://vivliostyle-git-fix-bug-at-break-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401-241125.html
• https://vivliostyle-git-fix-bug-at-break-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401c1.html

[skmtjny]

@MurakamiShinyu さま
修正ありがとうございます。

テストしていたところ、崩れが発生するケース、しないケースが見られたため
いくつかサンプルを作ってみました。

影響を与える要素としては確認できたのは以下です。
・rubyタグの連続
・rubyタグが設定されている文字の位置
・rbタグの有無
・段落の文字数

他にもあるかもしれませんが取り急ぎサンプルデータをお送りします。

241202.zip

[MurakamiShinyu]

@skmtjny 調査ありがとうございます。修正がまだ不十分でした。issue再々オープンします。

[MurakamiShinyu]

Fixed in #1426.

Test:

• https://vivliostyle-git-fix-issue1401-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401-241202-01.html
• https://vivliostyle-git-fix-issue1401-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401-241202-02.html
• https://vivliostyle-git-fix-issue1401-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401-241202-03.html
• https://vivliostyle-git-fix-issue1401-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401-241202-04.html
• https://vivliostyle-git-fix-issue1401-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/b496dbc2a0e181f34f5ab740f80249b7/raw/test1401-241202-05.html