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:
To get footnotes to do their magic, it’s as easy as adding float: footnote.
Interaction with the Page Footer
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:
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:
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!