-
Notifications
You must be signed in to change notification settings - Fork 360
Footnotes
danfickle edited this page Sep 14, 2021
·
3 revisions
NOTE: Page footnotes, which became available (in beta) in version 1.0.10, were implemented in PR#711. Please report any issues with footnotes. You can try footnote support online in the footnotes sample on the sandbox.
Footnotes are content moved to the bottom of the current page, leaving behind a footnote call which links to the page footer content.
<html>
<head>
<style>
@page {
@footnote {
/* Style the footnote area (which can contain multiple footnotes) for each page.
* If you don't need special styles for the footnote area, can be omitted. */
width: 100%;
border-top: 1px solid green;
padding-top: 20px;
/* Footnotes typically look better without constraints. */
orphans: 0;
widows: 0;
}
}
.footnote {
/* Mark an element to be removed from normal flow and placed at
* the bottom of the current page. */
float: footnote;
}
::footnote-call {
/* This is what is left in normal flow.
It is linkified to target the footnote itself. */
counter-increment: footnote 1;
content: "[" counter(footnote) "]";
}
::footnote-marker {
/* This is inserted at the start of the footnote. */
content: counter(footnote) ". ";
}
</style>
</head>
<body>
Lorem ipsum...
<div class="footnote">This is a footnote.</div>
Lorem ipsum...
<div class="footnote">Another <strong>footnote</strong>!</div>
</body>
</html>- The layout will try to keep the footnote call on the same page as the footnote body.
- If a footnote area goes over multiple pages, the final page of footnote area will be empty except for footnotes.
- Footnotes can not be in
position: fixedcontent or page margin content such as@top-centerorposition: running(...). - Footnotes must be block elements such as a
<div>but can contain most other content such as images or tables. - Paginated tables can not be used in footnotes.
- Footnotes can not contain other footnotes.
- If possible, line boxes (at any depth) will avoid the footnote area.
- Block box borders and backgrounds (but not textual content) may intersect with the footnote area. If this is a problem, the footnote area can have a
background-colorset and will sit over the normal flow content. One may also avoid intersecting with the footnote area by usingpage-break-inside: avoid. - For
position: fixedcontent thebottomproperty will refer to the top of the footnote area. - The footnote area is implemented as a
position: absoluteso may intersect with otherabsoluteboxes. Thez-indexproperty may be used on the footnote area to determine which box sits on top.
- There is currently no way to reset a counter on each page.
- Footnotes are not PDF/UA compliant.
- Footnotes in Java2D single page mode are interleaved throughout the document at virtual page breaks.