vivliostyle / vivliostyle.js

📖 The power of CSS typesetting, right at your fingertips.
https://vivliostyle.org
GNU Affero General Public License v3.0
602 stars 52 forks source link

Page float with footnote may cause error "Error: No PageFloatLayoutContext for region" #1353

Open MurakamiShinyu opened 3 months ago

MurakamiShinyu commented 3 months ago

Test case: https://gist.githubusercontent.com/MurakamiShinyu/dd49bcd1a882883299bab9d8c256a2c5/raw/test.html

      figure {
        float-reference: page;
        float: block-start;
      }

Test with Vivliostyle Viewer v2.30.1: https://vivliostyle.github.io/viewer/v2.30.1/#src=https://gist.githubusercontent.com/MurakamiShinyu/dd49bcd1a882883299bab9d8c256a2c5/raw/test.html

Screenshot: Screenshot 2024-06-28 11 32 38

MurakamiShinyu commented 3 months ago

This error occurs when footnote is used in page float. e.g.:

    figure {
      float-reference: page;
      float: block-start;
    }

    .footnote {
      float: footnote;
    }
  <figure>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Gustave_Moreau_006.jpg/200px-Gustave_Moreau_006.jpg"
      alt="">
    <figcaption>
      ギュスターヴ・モロー1868年作『プロメテウス』。神話の共通テーマ
      「火」を代表する物語である<span
        class="footnote">世界神話事典 p.129、吉田</span>。</figcaption>
  </figure>
MurakamiShinyu commented 3 months ago

I tested old vivliostyle versions and found that this error occurs in the 2017.6 version:

https://vivliostyle.github.io/viewer/2017.6/vivliostyle-viewer.html#x=https://gist.githack.com/MurakamiShinyu/dd49bcd1a882883299bab9d8c256a2c5/raw/bdaad018c1e80c113978fc23ea00070a48e820ca/test.html

but does not occur in the 2017.2 version:

https://vivliostyle.github.io/viewer/2017.2/vivliostyle-viewer.html#x=https://gist.githack.com/MurakamiShinyu/dd49bcd1a882883299bab9d8c256a2c5/raw/bdaad018c1e80c113978fc23ea00070a48e820ca/test.html

MurakamiShinyu commented 1 month ago

After fixing Issue #1354, this error does not occur when figure { display: flex; }. However, in this case, float: footnote does not work in <figcaption>.

Test: https://vivliostyle.github.io/viewer/v2.30.2/#src=https://gist.githubusercontent.com/MurakamiShinyu/dd49bcd1a882883299bab9d8c256a2c5/raw/test.html&style=data:,/*%3Cviewer%3E*/%0A/*%3C/viewer%3E*/%0Afigure%20%7B%0A%20%20display:%20flex;%0A%20%20align-items:%20center;%0A%20%20flex-direction:%20column;%0A%7D