Footnotes are sometimes placed on the page before the corresponding footnote call

[aschmitz]

In some cases, which appears to be "when a footnote call would normally be set on one page, and there would be room for the footnote, but a later rendering check pushes the footnote to the next page", a footnote can appear on the page before its call. (This violates the GCPM spec which says "A footnote body must never be placed on a page before the footnote reference.")

A moderately minimal test case:

<style>
  @page { @footnote { background-color: #afa; } }
  html {
    font-size: 10pt;
  }
  .footnote {
    float: footnote;
  }
  ::footnote-call {
    background-color: #aff;
  }
  div {
    height: 65em;
    background-color: #aaf;
  }
  p {
    break-inside: avoid;
    background-color: #faa;
  }
</style>
  
<div></div>

<p>
  foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo
  bar baz foo bar baz foo bar baz foo bar baz foo bar baz
  <span class="footnote">footnote</span>
  foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo
  bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar
  baz
</p>

That produces footnote-wrap.pdf, which has a page break that looks like the following:

The blue div is simply used to push the red paragraph to approximately the correct position. The issue is that the (light blue) footnote call occurs on the page after the (green) footnote.

My speculation is that this happens because the footnote call site could fit on the first page if it were allowed to break (removing the break-inside rule renders "correctly"). It does not appear to be related to the fact that the entire paragraph may fit on the first page if the footnote area did not exist, as making the paragraph much longer still results in the same behavior. However, other ways of forcing the paragraph to wrap to the next page (such as setting orphans or widows to 3) produce the same result: this isn't just an issue with break-inside.

I have not taken too much time to try to dig into why this occurs, and am mostly filing the issue in case you have ideas as to where to look. Otherwise I'll likely dig into this as time allows, possibly later this week.

[sahilrl]

Hello, first of all thank you for the Weasyprint. I'm still new to this library and I already love it!
I recently encountered that the footnote is being output before their call site. The footnote number 26 is rendered before its call site.
I don't understand what am I doing wrong here? Is it possibly a bug?

HTML
<tr> <td colspan="2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt, consequuntur ducimus quidem ipsam iste autem in tempore aut cumque reprehenderit reiciendis! Aperiam facere delectus, <span class="footnote">quidem ipsa aut officiis temporibus! quidem ipsa aut officiis temporibus!</span></td> </tr>......

CSS

`@page {
size: portrait;
margin-left: 0;
margin-right: 0;
padding: 2% 3% 0 3%;

@top-center {
content: element(headerCenter);
width: 100%;
height: initial;
background-color: var(--light-blue);
}

@bottom-right {
content: element(footerRight);
width: 100%;
height: initial;
}

@footnote {
float: bottom;
border-top: 0.1em solid #A3AFC3;
}

}

span.footnote {
float: footnote;
footnote-display: inline;
footnote-policy: block;
/* font-size: 80%; /
/ padding-right: 0.8em; */
}

::footnote-call {
vertical-align:super;
font-size: 70%;
}`

[liZe]

I recently encountered that the footnote is being output before their call site. The footnote number 26 is rendered before its call site.

Hi!

It’s definitely a bug, but it’s not related to this one (that is fixed).

Could you please open another issue for your problem? It would also be very useful to have a full document (HTML, CSS and fonts) that shows the problem, otherwise we’ll probably not be able to reproduce it. If you can’t create a simple example, you can also share your document attached to the issue, or send by mail if it contains sensitive data.