<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Footnotes Sample</title>
<link href="../common.css" rel="stylesheet" type="text/css" />
<style rel="stylesheet" type="text/css">
@page {
counter-reset: footnote;
}
@page styledfootnotepage {
/* Styling the footnote area */
@footnote {
content: "Footnotes:";
border-left: 2pt solid #003399;
border-top: none;
padding-left: 5pt;
}
}
@media print {
.footnote {
float: footnote;
}
.asterisksfootnote::footnote-call {
content: counter(footnote, asterisks)
}
.asterisksfootnote::footnote-marker {
content: counter(footnote, asterisks) " ";
}
.rofootnote::footnote-call {
content: counter(footnote, -ro-footnote);
}
.rofootnote::footnote-marker {
content: counter(footnote, -ro-footnote) " ";
}
.footnoteLowerLatin::footnote-call {
content: counter(footnote, lower-latin);
}
.footnoteLowerLatin::footnote-marker {
content: counter(footnote, lower-latin) " ";
}
.footnoteLowerGreek::footnote-call {
content: counter(footnote, lower-greek);
}
.footnoteLowerGreek::footnote-marker {
content: counter(footnote, lower-greek) " ";
}
.styledfootnote {
float: footnote;
footnote-display: inline;
margin: 7.5pt;
}
.styledfootnotepage {
page: styledfootnotepage;
}
.multicolumn::-ro-footnote-area {
border-left: 2pt solid #003399;
padding-left: 5pt;
margin-top: 7pt;
}
.reset {
/* Resetting the counter for the multi-column area */
counter-reset: footnote;
}
}
@media screen {
.footnote {
display: none;
}
.classicfootnote {
display: none;
}
}
p {
break-inside: avoid;
}
hr {
margin: 0pt 14% 25pt;
}
.multicolumn {
columns: 2;
}
.multicolumn h3 {
margin: 0.2cm 0;
}
.grid {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 25pt;
}
</style>
</head>
<body>
<h1>Footnotes Sample</h1>
<h2>Introduction</h2>
<p>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.</p>
<p>The following is an illustration showing how two footnotes on a page could look like:</p>
<div class="result">
This text<sup>1</sup> is marked with two footnotes<sup>2</sup>.<br/>
<br/>
...<br/>
<br/>
----<br/>
<sup>1 </sup>This is the first footnote.
<br/>
<sup>2 </sup>And this is the second footnote.
</div>
<p>And this is the same document fragment realized using CSS:</p>
<div class="result">
This text<span class="footnote">This is the first footnote.</span> is marked with two footnotes<span class="footnote">And this is the second footnote.</span>.
</div>
<p>Both footnotes are placed inside the footnote area at the bottom of this page.</p>
<h2>How to Create Footnotes Using CSS</h2>
<p>In XHTML, transforming an element into a footnote can be achieved using only one style:</p>
<div class="code">
<code>.footnote {
float: <b>footnote</b>;
}</code>
</div>
<p>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.</p>
<h2>The Footnote Area</h2>
<p>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.</p>
<p>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:</p>
<div class="code">
<code>@page {
<b>@footnote</b> {
border: none;
}
}</code>
</div>
<p>This at-rule disables the border of all footnote areas.</p>
<div class="styledfootnotepage">
<p>The footnote area of pages can also be styled via this at-rule.</p>
<div class="code">
<code>@page {
@footnote {
border-left: 3px solid blue;
padding-left: 7px;
}
}</code>
</div>
<div class="result reset">
The footnotes<span class="footnote">This is the styled footnote.</span> on this page have a left<span class="footnote">This is the styled footnote.</span> border that is blue:
</div>
<p>Content that is independent can be added to the footnote area with the "content" property.</p>
<div class="code">
<code>@page {
@footnote {
content: "Footnotes:";
}
}</code>
</div>
<h2>Footnotes in Regions/Multi-Column</h2>
<p>Footnotes set in regions and multi-column layouts will appear at the end of the region/column they are
set in, rather than appearing on the bottom of the page. The footnote area inside regions and multicolumn layouts
can also be styled by using the ::-ro-footnote-area pseudo element on the multi-column element or the region.</p>
<div class="code">
<code>.multicolumn::-ro-footnote-area {
border-left: 3px solid blue;
padding-left: 7px;
}</code>
</div>
<div class="result reset">
<p class="multicolumn">Lorem ipsum dolor sit amet,<span class="footnote">This is a styled footnote in a multicolumn element</span>
consectetur adipiscing elit. Ut vel ipsum eu mi sodales gravida eu vel mi.Nulla congue elit at lorem bibendum,
sed pharetra mi laoreet. Aliquam tincidunt<span class="footnote">This is a styled footnote in a multicolumn element</span>
nunc sit amet risus lacinia efficitur. Sed ac sagittis felis, in rhoncus justo. Nulla dictum ante ut auctor dapibus.
Sed semper viverra turpis, et dictum mi eleifend a. Integer nulla elit, pharetra in convallis nec, luctus quis neque. Nulla a fermentum metus.
Maecenas pharetra, neque ac pretium consequat, ipsum quam hendrerit erat, vestibulum maximus mi enim id ligula. Aliquam
sollicitudin erat et dui vulputate imperdiet sodales et arcu. Proin volutpat, dolor a accumsan aliquam, elit ex convallis
risus, vitae placerat sapien orci a est. Proin suscipit lorem lorem, ut fringilla ante pretium ut. Curabitur lacinia
placerat quam et aliquam. Nam cursus, sapien ac tincidunt egestas, dolor justo iaculis nisi, sit amet sodales dolor erat
vel urna. Sed placerat hendrerit felis. Nam lorem elit, vulputate eu laoreet at, volutpat id velit.
Phasellus eu sagittis elit, ac auctor metus. Morbi non pulvinar purus, at euismod tortor. Cras vel magna dignissim,
semper arcu ut, tincidunt mi. Nullam ac massa a mauris blandit malesuada. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Aenean scelerisque vitae orci et rutrum. Pellentesque quis sapien mauris.
Integer id est eget nisl tempus sodales nec nec neque. Aliquam interdum aliquam nulla in sodales. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Morbi tincidunt tincidunt augue, viverra lacinia magna efficitur ac. Nulla pulvinar
varius neque, fringilla iaculis tellus consequat vitae. Fusce cursus enim sed nibh pellentesque posuere. Sed at metus non
ex venenatis dapibus vitae vitae libero.</p>
</div>
</div>
<h2>Footnote Calls and Markers</h2>
<p>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.</p>
<p>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:</p>
<div class="code">
<code>.asterisksfootnote::footnote-call {
content: counter(footnote, asterisks);
}
.asterisksfootnote::footnote-marker {
content: counter(footnote, asterisks) " ";
}</code>
</div>
<p>The result looks like this:</p>
<div class="result">
This text<span class="footnote asterisksfootnote">This is the first footnote.</span> is marked with two footnotes<span class="footnote asterisksfootnote">And this is the second footnote.</span>.
</div>
<p>Other common counter style used for footnotes look like this:</p>
<div class="grid">
<div class="multicolumn reset">
<h3>Lower Latin</h3>
<p>
Lorem ipsum dolor sit amet,<span class="footnote footnoteLowerLatin">First</span>
consectetur adipiscing elit. Ut<span class="footnote footnoteLowerLatin">Second</span>
sed pharetra mi laoreet. Aliquam tincidunt<span class="footnote footnoteLowerLatin">Third</span>
nunc sit amet risus lacinia efficitur<span class="footnote footnoteLowerLatin">Fourth</span>.
</p>
</div>
<div class="multicolumn reset">
<h3>Asterisk</h3>
<p>
Lorem ipsum dolor sit amet,<span class="footnote asterisksfootnote">First</span>
consectetur adipiscing elit. Ut<span class="footnote asterisksfootnote">Second</span>
sed pharetra mi laoreet. Aliquam tincidunt<span class="footnote asterisksfootnote">Third</span>
nunc sit amet risus lacinia efficitur<span class="footnote asterisksfootnote">Fourth</span>.
</p>
</div>
<div class="multicolumn reset">
<h3>-ro-footnote</h3>
<p>
Lorem ipsum dolor sit amet,<span class="footnote rofootnote">First</span>
consectetur adipiscing elit. Ut<span class="footnote rofootnote">Second</span>
sed pharetra mi laoreet. Aliquam tincidunt<span class="footnote rofootnote">Third</span>
nunc sit amet risus lacinia efficitur<span class="footnote rofootnote">Fourth</span>.
</p>
</div>
<div class="multicolumn reset">
<h3>Lower Greek</h3>
<p>
Lorem ipsum dolor sit amet,<span class="footnote footnoteLowerGreek">First</span>
consectetur adipiscing elit. Ut<span class="footnote footnoteLowerGreek">Second</span>
sed pharetra mi laoreet. Aliquam tincidunt<span class="footnote footnoteLowerGreek">Third</span>
nunc sit amet risus lacinia efficitur<span class="footnote footnoteLowerGreek">Fourth</span>.
</p>
</div>
</div>
<h2>Numbering of Footnotes</h2>
<p>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:</p>
<div class="code">
<code>@page {
counter-reset: footnote;
}</code>
</div>
<p>This rule is also used inside this document to force footnote numbering on a per page basis.</p>
<h2>Inline Footnotes</h2>
<p>Normally, footnotes are laid out as block elements, which means that they are stacked on top of each other.
When having several short footnotes, it can make sense to place them next to each other, as if they were inline
elements. This can be achieved by using the footnote-display property, which can either be set to block or inline:</p>
<div class="code">
<code>.styledfootnote {
float: footnote;
footnote-display: inline;
}</code>
</div>
<div class="result">
This text<span class="footnote styledfootnote">This is the first footnote that is set to inline.</span> is marked with three<span class="styledfootnote">This is the second footnote that is set to inline.</span> inline footnotes<span class="styledfootnote">This is the third footnote that is set to inline.</span>.
</div>
</body>
</html>