HTML to PDF Conversion: Easy Footnotes for Large and Small PDFs Documentation

Whether you’re creating an eBook or a marketing one-page with fine print, footnotes are a necessity. With DocRaptor, 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:

<html>
  <head>
    <style type="text/css">
      @page { size: A6; } /* Basic style for easier demonstration */
      body { font-family: Verdana; } /* Basic style for easier demonstration */

      .footnote {
        float: footnote;
      }
    </style>
  </head>
  <body>
    <p>
      This text needs a footnote.<span class="footnote">I'm a footnote!</span>
    </p>
  </body>
</html>

The PDF output:

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.

<html>
  <head>
    <style type="text/css">
      @page { size: A6; } /* Basic style for easier demonstration */
      body { font-family: Verdana; } /* Basic style for easier demonstration */

      .footnote {
        float: footnote;
        background-color: #ffc0c0; /* a reddish background */
      }

      @page {
        @bottom {
          content: "Page " counter(page) " of " counter(pages);
          background-color: #c0ffc0; /* a greenish background */
        }
      }

      body {
        background-color: #c0c0ff; /* a blueish background */
      }
    </style>
  </head>
  <body>
    <p>
      This text needs a footnote.<span class="footnote">I'm a footnote!</span>
    </p>
  </body>
</html>

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.

<html>
  <head>
    <style type="text/css">
      @page { size: A6; } /* Basic style for easier demonstration */
      body { font-family: Verdana; } /* Basic style for easier demonstration */

      .footnote {
        float: footnote;
        background-color: #ffc0c0; /* a reddish background */
        footnote-style-position: inside; /* forces marker inside footnote area */
      }

      .footnote::footnote-call {
        /* controls the footnote markers in the main page text */
        content: counter(footnote, symbols('*', '†', '‡'));
      }
      .footnote::footnote-marker {
        /* controls the footnote markers in the footnote section */
        content: counter(footnote, symbols('*', '†', '‡'));
      }

      @page {
        @bottom {
          content: "Page " counter(page) " of " counter(pages);
          background-color: #c0ffc0; /* a greenish background */
        }
      }

      body {
        background-color: #c0c0ff; /* a blueish background */
      }

    </style>
  </head>
  <body>
    <p>
      This text needs a footnote.<span class="footnote">I'm a footnote!</span>
    </p>

    <p>
      This text also needs a footnote.<span class="footnote">I'm a footnote, too!</span>
    </p>

    <p>
      This text needs a footnote, too.<span class="footnote">Don't forget this footnote!</span>
    </p>
  </body>
</html>

The PDF output:

Multi-Paragraph Footnotes

If you need to create longer, multi-paragraph footnotes, use linebreak elements (<br>) instead of paragraph elements (<p>) within the footnotes. For example:

<p>
   This text needs a footnote.
   <span class="footnote">I'm multi-line <br><br> footnote!</span>
</p>

If paragraph elements are placed inside other paragraph elements, the footnote will not render property.

HTML to PDF Conversion: Easy Footnotes for Large and Small PDFs

Basic Footnotes

Interaction with the Page Footer

Styling the Footnote Counter

Multi-Paragraph Footnotes

Ready to get started? Try DocRaptor for free with unlimited test documents.