PrintCSS: Footnotes

Footnotes play an important role when it comes to creating books or PDF documents in general. Unfortunately, not all PDF rendering tools are supporting the W3C draft yet. While the commercial tools all have a good integration of the draft, most open-source tools lack support for footnotes completely.

Still, in this article, I will explain the W3C footnote draft to you, and we will see the rendering result with the different tools.

Terminology

Before we go through some samples, we should first get to know the different terms used.

Footnotes rendered with PDFreactor.

A footnote call is a number or sometimes a symbol in the main text pointing to the footnote’s body.

The footnote body consists of the footnote marker, which is actually the number or symbol from the footnote call. The marker can have extra punctuation. After the marker, we have the footnote element, which is still part of the footnote body. The footnote element is the actual content of the footnote. The content is defined within the text flow but gets removed from there and is shown as a footnote.

All your footnotes are in the footnote area, so the area of the page where your footnotes are displayed. Above that area, you can have a horizontal rule, which is called the footnote rule.

From Terminology to CSS and HTML

If you want to try the samples yourself, head over to printcss.live and play around with different PDF rendering tools.

@page{
 size: A6;

 @footnote {
  /* The Background color highlights the footnote area */
  background-color:#feb2b2;

  /* The Border Top is the footnote rule */
  border-top:5px solid #38a169;
 }
}

/* This element is for a single footnote body */
.footnote { 
 float: footnote;
 background-color:#a3bffa; 
 margin-bottom:2mm;
}

/* As the name says this is the footnote call */
.footnote::footnote-call { 
 background-color:#d6bcfa;
}

/* And the footnote marker */
.footnote::footnote-marker { 
 background-color:#fbb6ce;
}

In the HTML document, all you need to do is add an element with the footnote class at the desired place.

<p>
    Footnotes play an important role when it comes to creating books or PDF documents in general. Unfortunately, not all PDF rendering tools are supporting the W3C draft<span class="footnote">Sample Footnote Content</span> yet. While the commercial tools all have a good integration of the draft, most open-source<span class="footnote">Another Sample Footnote Content</span> tools lack support for footnotes completely.
</p>

The result of the above code, with some extra content, header and footer looks like the following.

Footnotes rendered with PDFreactor and Prince.

As I mentioned in the beginning, most open-source tools lack the support of footnotes until now. So let us have a look at how the same code renders with Weasyprint and Paged.js.

No footnote support with Weasyprint and Paged.js

Footnote Marker & Call

Prince also supports symbols besides the decimal numbers. So the following CSS code will work only for Prince.

.footnote::footnote-call {
  background-color:#d6bcfa;
  content: counter(footnote, symbols('*', '&', '%', '>'));
}
.footnote::footnote-marker { /* And the footnote marker */
  background-color:#fbb6ce;
  content: counter(footnote, symbols('*', '&', '%', '>'));
}

Footnote Marker & Call Symbols with Prince

But both rendering tools support the values allowed for the CSS property ‘list-style-type’, for example, ‘upper-greek’. This has nothing to do with footnotes directly but with the ‘counter’ function, which is used here.

‘upper-greek’ example in Prince and PDFreactor

.footnote::footnote-call {
  background-color:#d6bcfa;
  content: counter(footnote, lower-greek);
 }

.footnote::footnote-marker {
  background-color:#fbb6ce;
  content: counter(footnote, lower-greek);
}