Footnotes in a PDF, and what to do when the page cannot hold them

Why this block is harder than it looks

Real footnotes require the layout engine to move content to the bottom of whichever page the marker landed on, shrink the text block to make room, and split a long note across two pages if it will not fit. That is a specification feature with patchy support. So the practical question is not how to write the footnote property, it is what to do instead, and the honest answer depends on how much the notes matter to the document.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Try the standard approach first and look at the output rather than trusting it. If the notes land at the foot of the right page, the problem is solved and nothing below applies.
• Where footnotes do not work, endnotes do, and they need nothing special: a numbered list at the end of the section with markers pointing into it. For most business documents that is a different convention rather than a downgrade.
• Where the note must be on the page, set it as a sidenote in the outer margin instead. That needs only a wide margin and positioning relative to the paragraph, and it is more readable than a foot-of-page note anyway.
• Number markers with a CSS counter so insertion does not force renumbering by hand, and use superscript figures rather than symbols once there are more than three.
• Keep the marker tight against the word with the punctuation before it, which is the convention almost everywhere and the thing readers notice when it is wrong.
• Never allow a two-line note to split so one line falls on the next page. If the mechanism cannot guarantee that, the note belongs at the end.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<!-- Endnote pattern: works everywhere, needs no renderer feature. -->
<p>The survey was carried out on 4 March<a class="fn-ref" href="#n1"></a>
   under dry conditions.</p>

<section class="notes">
  <h2>Notes</h2>
  <ol>
    <li id="n1">Access to the rear elevation was not available.</li>
  </ol>
</section>

<style>
  body { counter-reset: fn; }
  .fn-ref { counter-increment: fn; text-decoration: none; }
  .fn-ref::after {
    content: counter(fn);
    vertical-align: super;
    font-size: 0.7em;
    line-height: 0;
    padding-left: 0.5pt;
  }
  .notes { break-before: page; font-size: 9pt; }
  .notes ol { padding-left: 18pt; }
  .notes li { break-inside: avoid; margin-bottom: 4pt; }
</style>

What breaks when it is built the obvious way

Faking footnotes by pinning a block to the bottom of the page with position: fixed. It repeats on every page, so note four appears on page one, and the text block is not shortened, so the note sits on top of the last two lines of body copy.

How to prove it survived pagination

Put a marker on the last line of a page and render. If the note is at the foot of that page, the mechanism works. If it is at the foot of the next page, or missing, switch to endnotes rather than trying to force it.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The multi-page report template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.