Footnotes

Footnotes are useful for adding additional information to your document without cluttering the main text. They are often used to provide citations, references, or explanations.

Adding Footnotes

First, create a new CSS file footnotes.css in your template and add the following example styles.


/* Styles the footnote span itself */
span.footnote-auto {
  float: footnote;
  font-size: 12px;
  margin-top: 12px;
}

/* Styles the container for the footnotes at the bottom of the page */
@page {
  @footnote {
    border-top: solid black 1px;
    margin-top: 12px;
  }
}

/* The number embedded within the main text */
.footnote-auto::footnote-call {
  font-weight: bold;
  vertical-align: top;
  font-size: 10px;
}

/* The number in the footnote at the bottom of the page */
.footnote-auto::footnote-marker {
  font-weight: bold;
  font-size: 10px;
}

Then you can use the footnote-auto class on a <span> element in your template HTML to create footnotes.


<html>
  <head>
    <link href="footnotes.css" rel="stylesheet" />
  </head>

  <body>
    <p>This is a sentence that needs some clarification
      <span class="footnote-auto">Your first footnote</span>.
    </p>
    <p>This sentence is also footnoted<span class="footnote-auto">Your second footnote</span>.</p>
    <p>This one has no footnotes.</p>
  </body>
</html>