HTML Support for PDF Landing Pages

Footnotes

Footnotes consist of two parts:

• The reference to the footnote in the document itself, the "footnote call". This is usually a little number appearing in the text flow, marking the footnote. In the context of a PDF, this little number is also supposed to be clickable, where a click sends you down to the bottom of the page and the corresponding footnote.

• The footnote itself, i.e., what appears at the bottom of the page. It consists of the footnote number (the "footnote marker"), followed by the actual footnote content.

To add a footnote in a certain location of your document, insert an element (for example a <span>) at the location where you want the footnote call (i.e. the little footnote marker number) to appear. Then give this element the style "float:footnote" and put the actual footnote content, that is supposed to appear at the bottom of the page, inside of the body of this element.

<p>
	This text is a bit complicated, so it may require some additional explanation as a footnote to this sentence.
	<span style="float:footnote;">
		The footnote content goes here.
	</span>
	More of the complicated text follows...
</p>

In addition, you must also supply styles for the footnote call (that appears in the text flow) and the footnote marker, i.e. the number that precedes the footnote content at the bottom of the page. These styles are supplied as the following pseudo element styles:

::footnote-call {
	counter-increment: footnote 1;
	content: counter(footnote);
}
::footnote-marker {
	content: counter(footnote);
}

The above shows the absolute bare minimum declaration for these pseudo elements. With this bare minimum, you get simple numbers both as the footnote call and footnote marker. It may however be advisable to style both the footnote call and marker for better readability.

For example, the following formats the footnote call with the number enclosed in brackets, in a smaller font, slightly raised above the line in superscript and with a blue color (do better denote its clickability).

Like this number three[3] here.

::footnote-call {
	counter-increment: footnote 1;
	content: "[" counter(footnote) "]";
	font-size: smaller;
	vertical-align: super;
	color: blue;
}

And this declaration formats the footnote marker with a bold font and a colon (and trailing space) after the number.

::footnote-marker {
	content: counter(footnote) ": ";
	font-weight: bold;
}

Finally, you can also style the footnote area itself, i.e., the area at the bottom of the page where all footnotes are collected. This is done with the @footnote at-rule inside of the page rule for the pages that you want to be affected. Of course, this formatted footnote area appears only on pages that actually have any footnotes.

For example, the following creates a footnote area with a thin line at the top.

@page {
	@footnote {
		width: 100%;
		border-top: 1px solid black;
		padding-top: 20px;
	}
}