CourtBouillon

footnote support has been added thanks to the financial support of Code & Co.. It has been a real pleasure to develop this feature with them.

You would love to get a new feature, a bug fix, or some support on WeasyPrint? Don’t hesitate to get in touch with us! Or if you simply want to see the project grow beautifully, you can donate on OpenCollective 😉.

What Is footnote and How to Use It?

Footnotes allow you to put some notes at the bottom of a page, which lets you provide comments, citations…

To create a footnote element, float: footnote is used. For example, a footnote statement that looks like this:

<style>
  @page {
    margin: 0.5cm;
    size: 450px 100px;
    @footnote {
      border-top: 0.1mm solid;
      margin-top: 0.5em;
      padding-top: 0.5em;
    }
  }
  ::footnote-call {
    font-size: 0.7rem;
    line-height: 1;
    vertical-align: super;
  }
  body { margin: 0; }
  span { float: footnote; }
</style>
<div>
  I'm a nice text with a footnote<span>I'm the footnote</span>.
</div>

gives the following result:

Several CSS properties and pseudo-elements let you manage how footnotes are displayed.

The footnote-display Property

The footnote-display property allows you to indicate if a footnote element is displayed as a block element or as an inline element. By default, footnotes are displayed as block elements.

The footnote-policy Property

The footnote-policy property helps you to influence how to render difficult pages, like when a footnote falls near the bottom of a page and doesn’t fully fit.

By default, the user agent chooses how to render footnotes, and WeasyPrint decides to put the note on the next page when there is not enough place on the current page.

You can make the user agent introduce a forced page break at the start of the line containing the footnote reference with the line value, so both the footnote reference and the footnote content go on the next page.

You can also make the user agent introduce a forced page break before the paragraph that contains the footnote with the block value.

The ::footnote-call and the ::footnote-marker Pseudo-Elements

The ::footnote-call pseudo-element is the element inserted in the text to reference the footnote.

The ::footnote-marker pseudo-element is the element representing the footnote marker in the footnote area, it’s the number or the symbol identifying each footnote.

By default, the content of these two pseudo-elements is the value of the footnote counter. As there is a footnote counter, you can style it like any other counter.

Limitations and Undefined Cases

There are currently some limitations and undefined cases.

The footnote-display property has a compact value that lets the user agent decide if a footnote is rendered as a block or inline element. This value isn’t supported by WeasyPrint.

If you look at the footnotes specification, you can find the ::footnote-marker::after selector. This syntax containing two pseudo-elements doesn’t work (yet) in WeasyPrint, but will be supported with Selectors Level 4.

Finally, when a footnote is larger than the page, nothing is defined in the specification to handle it. So in WeasyPrint, we decide that the content of the footnote simply overflows.

Footnotes are available in the latest WeasyPrint release: v54. We hope that they will be useful for you 😄!