float: footnote pulls an element out of normal flow entirelyfloat: footnote is the only footnote float value css-gcpm-3 defines; inline-footnote is a PrinceXML extension, not a CSS feature., leaving a numbered in-flow reference behind and routing the element's own content to a note area at the bottom of the page the reference landed onThe note area's height is reserved dynamically, based on how many footnotes actually land on a given page - not a fixed-height margin box..
Because the reservation is dynamic, content already flowing down the page correctly stops above it even when a paragraph asks to stay together as one unit:
This paragraph carries break-inside: avoid. Once the footnote area above claims room at the foot of the page, this whole paragraph is kept together and, if it no longer fits, moves to the next page as a unit rather than splitting across the reserved stripA third footnote, to show the reservation composing across every footnote that lands on the same page..
The footnote counter is a real, cascaded counter: the UA stylesheet declares @page { counter-reset: footnote } and @footnote { counter-increment: footnote }, so by default each page starts back at 1.
A fresh page, a fresh footnoteThis is footnote 1 again, not 4 - the UA stylesheet's own per-page counter-reset is what does that..
Declaring counter-reset yourself on an applicable @page replaces the UA declaration outright, so a set that never mentions the footnote counter - counter-reset: none here - leaves nothing to reset it and numbering simply runs on through the document. This page also declares @footnote { height: 70pt }, a fixed band for the bodies rather than one sized to them: the divider sits at the same place whatever lands below it, and the slack falls under the last note.
These two notes carry on from wherever the counter already stood instead of restarting at 1Numbered by the document-wide counter, because this page's own counter-reset never names it - the previous page ended at 1, so these are 2 and 3.. The number reaching the page is a real counter value, so content: counter(footnote, lower-roman) on ::footnote-call renders it as a roman numeral, and counter-increment on @footnote changes the stepBoth the call and the marker resolve counter(footnote) to the live, pagination-resolved value..
The element carrying float: footnote can be block-level too. It is replaced by the numbered call, which is inline, so among block siblings the call gets a line of its own.
The paragraph after the source carries on below that call, and the note sits at the foot of the page like any other.
float-reference: column (CSS Page Floats) routes a note to the bottom of the column its own reference landed in, rather than the bottom of the page. Each column gets its own divider, its own width and its own reserved strip; the notes are still numbered across the page, because float-reference decides placement and says nothing about counters.
The first column carries this noteScoped to the first column, so it sits at that column's own foot., and the column's own content stops above the strip that note reserves rather than running into it.
Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second. Ordinary column prose, repeated to fill the first column so that what follows begins the second.
The second column carries its ownScoped to the second column - a separate area, with its own divider, beside the first rather than below it., numbered 2 because numbering runs across the page.
footnote-display, set on the float: footnote source element itself, controls how a footnote's body stacks in the note area. compact places a short body inline, packed beside the previous one, and gives a body that needs more than one line its own full-width row instead:
A short noteShort., another short noteAlso short., then a much longer oneThis footnote's own text is deliberately long enough that it wraps onto more than one line at the page's full content width, so compact falls back to giving it a full-width row of its own rather than trying to pack it beside its neighbors., and a short one againShort once more..
A footnote body is its own box, so overflow: hidden clips its content at the body's width, and text-overflow: ellipsis ends a one-line note in an ellipsis instead of running on. The first note below is clipped, the second is truncated, and the third is truncated with an underline that stops where the ellipsis begins:
A clipped note, a truncated note, and a truncated underlined note.
footnote-policy controls what happens when a page's note area can't hold everything that landed on it - here, because the note body itself is long enough that its note area alone would exceed this whole page's content band. block forces the whole paragraph carrying the call onto the next page; line forces only the specific line carrying the call, leaving earlier lines of the same paragraph on this page:
This paragraph's own footnote-policy is blockThis note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. Because footnote-policy: block is set, the whole paragraph carrying this call - not just this line - moves to the next page so the call and its note land together there instead., so once its note doesn't fit, the whole paragraph moves to the next page.
This paragraph is long enough to wrap across several lines before reaching its own footnote reference, which is exactly the point: footnote-policy: line only pushes the specific line carrying the callThis note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. This note's own body text is repeated enough times that its note area alone is taller than this whole page's content band. Because footnote-policy: line is set, only the line carrying this call (and whatever follows it in the same paragraph) moves onward - the lines before it, earlier in this same paragraph, stay right here. onward, while every line before it - including the start of this very paragraph - stays exactly where it already was.