Simple CSS-Only Footnotes for PDFs

Whether you’re creating an eBook or a marketing one-page with fine print, footnotes are a necessity. With DocRaptor (powered by Prince), footnotes are easy to create and you can do it inline too!

Unfortunately, you’re out of luck if you’re using open-source tools such as wkhtmltopdf or PhantomJS. It’s possible to create HTML documents that look like they have footnotes, but you’ll need to add an extra footnotes section and split your footnotes from your content. The technique we’ll show here is part of a W3C draft, but not yet supported by the WebKit browser used by wkhtmltopdf and others.

But back to DocRaptor. Below are instructions on how to use footnotes, how they interact with other parts of the PDF, and how to style them:

Basic Footnotes

The basic HTML to generate footnotes looks like this:

The PDF output:

a simple PDF with a footnote

To get footnotes to do their magic, it’s as easy as adding float: footnote.

Let’s take a look at how the footnotes interact with the @bottom directive, since they both are things that live at the bottom of a page. Here’s some HTML that adds a counter to the page’s footer. We color-coded the sections to better illustrate the interaction of the parts of the page.

The PDF output:

a simple PDF with a footnote and page counter

Styling the Footnote Counter

You can go beyond the defaults by aligning the markers with the page content and adding some flair with symbols.

The PDF output:

a simple PDF with a footnote, page counter, and styles footnote markers

The End

We hope you have you have lots of cool ideas for footnotes. Keep making those beautiful documents and contact us if you have any questions!