Skip to content

Footnote fragmentation does not work in multi-column layout (limitation of #1877) #1879

@NetanelHarris

Description

@NetanelHarris

Describe the bug

PR #1877 (closes #1875) enabled fragmentation of long footnotes across pages, so a footnote that does not fit entirely at the bottom of its page starts on the call's page and continues to the next page (Prince-like behavior).

However, when the content is rendered inside a multi-column layout (column-count > 1), the fix does not apply: a long footnote that cannot fit entirely in the remaining @footnote area is still pushed in full to the next page, instead of being split across pages.

To Reproduce

  1. Build the latest master (containing fix: Enable footnote fragmentation across pages #1877).
  2. Load the HTML test case below in the Vivliostyle Viewer:
    http://localhost:3000/viewer/lib/vivliostyle-viewer-dev.html#src=../../core/test/files/footnotes/footnote-fragmentation-multicol.html
  3. Observe the first page: the long footnote at the bottom is pushed entirely to the next page rather than fragmenting.
  4. Change column-count from 2 to 1 in the stylesheet and reload — the footnote now fragments correctly across pages, confirming the regression is specific to multi-column flow.

Expected behavior

The long footnote should start on the same page as its call and continue on the following page, identical to the single-column case and to Prince's behavior. Multi-column layout should not disable footnote fragmentation.

Actual behavior

The entire footnote is deferred to the next page.

Minimal reproducible HTML (footnote-fragmentation-multicol.html)

Click to expand HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Footnote Fragmentation in Multi-Column</title>
    <style>
      @page {
        size: 148mm 210mm;
        margin: 20mm;
        @footnote {
          border-top: 1px solid black;
          padding-top: 0.5em;
          margin-top: 0.5em;
        }
      }
      :root { font: 12pt/1.5 serif; }
      body {
        column-count: 2;
        column-gap: 8mm;
        column-rule: 1px solid #ccc;
      }
      h1 { font-size: 1.2em; }
      .footnote { float: footnote; font: 0.9rem/1.4 serif; }
    </style>
  </head>
  <body>
    <h1>Footnote Fragmentation in Multi-Column</h1>
    <p>Filler text to push the footnote call near the bottom of the page.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
      volutpat, nunc sit amet varius dignissim, lacus erat facilisis urna,
      vitae facilisis lorem justo ut nulla. Integer non purus ut massa
      scelerisque tincidunt.</p>
    <p>More filler to reach the bottom area. Sed ut perspiciatis unde omnis
      iste natus error sit voluptatem accusantium doloremque laudantium,
      totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
      quasi architecto beatae vitae dicta sunt explicabo.<span class="footnote">
        This is a deliberately very long footnote that cannot fit entirely
        in the remaining footnote area on the current page. Expected: it
        should start on this page and continue on the next page, as it
        does in single-column layout after PR #1877. Actual in multi-column:
        the whole footnote is moved to the next page. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Vestibulum volutpat, nunc sit
        amet varius dignissim, lacus erat facilisis urna, vitae facilisis
        lorem justo ut nulla. Integer non purus ut massa scelerisque
        tincidunt. Sed ut perspiciatis unde omnis iste natus error sit
        voluptatem accusantium doloremque laudantium, totam rem aperiam,
        eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
        magni dolores eos qui ratione voluptatem sequi nesciunt.
        eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
        magni dolores eos qui ratione voluptatem sequi nesciunt.
      </span></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </body>
</html>
Click to expand Screenshots single-column multi-column
**Desktop (please complete the following information):**

Additional context


Huge thanks to @MurakamiShinyu for the incredibly fast turnaround on #1875 — the fix landed within a day, which is amazing. Opening this follow-up only to cover the remaining multi-column case; the single-column behavior now works beautifully. 🙏

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions