Footnotes are used in print layouts to move a note or reference out of the main content with the objective of increasing readability. Typically footnotes are placed at the bottom of a page and flagged with a superscript number followed by the text of the footnote.
The following is an illustration showing how two footnotes on a page could look like:
And this is the same document fragment realized using CSS:
Both footnotes are placed inside the footnote area at the bottom of this page.
In XHTML, transforming an element into a footnote can be achieved using only one style:
.footnote {
float: footnote;
}This rule declares all elements with the class "footnote" to be floated boxes of the type "footnote". Such boxes will be automatically moved to the footnote area which will be discussed in the following chapter.
The footnote area is the area on each page where all footnotes will be placed. It is usually located at the bottom of the page. Every page can have a footnote area, however if there are no footnotes on a page, the footnote area will be left out to increase the available space for the main content of the document.
In CSS, a footnote area represents a page area. Such areas can be addressed by so-called at-rules ("@" followed by the name of the area). Thus a footnote area can be addressed by the following at-rule:
@page {
@footnote {
border: none;
}
}This at-rule disables the border of all footnote areas.
When a document is laid out and the layout engine reaches a position inside the main text at which a note should occur, a so-called "footnote call" is placed at this position. The footnote text of the current note is inserted into the footnote area of the current page and a so-called "footnote marker", which obtains the same value as the call, is placed before this text.
In CSS terminology footnote calls and markers are pseudo elements which can be addressed using pseudo element declarations. The following example demonstrates, how to change the appearance of calls and markers:
.asterisksfootnote::footnote-call {
content: counter(footnote, asterisks)
}
.asterisksfootnote::footnote-marker {
content: counter(footnote, asterisks) " "
}The result looks like this:
The numbering of footnotes is realized by a predefined CSS counter named "footnote". By default, footnotes are numbered continuously throughout the document. Restarting the numbering on every page can be accomplished using the following style:
@page {
counter-reset: footnote;
}This rule is also used inside this document to force footnote numbering on a per page basis.