htmlspan { float: footnote }
...
<p>Lorem ipsum<span>Lorem Ipsum is a placeholder text, commonly used in graphic design</span> dolor sit amet...
Many books and articles have footnotes. This guide will show you to create footnotes in Prince, and we invite you to download and try formatting for yourself. Prince is a HTML-to-PDF-via-CSS converter which offers advanced layout features so that you can create books from HTML.
We start with a simple HTML document, with one footnote inside a span element:
htmlspan { float: footnote }
...
<p>Lorem ipsum<span>Lorem Ipsum is a placeholder text, commonly used in graphic design</span> dolor sit amet...
Footnotes appear inside the footnote area
at the bottom of the page. You can style the footnote area with normal CSS properties. Here, a red border is added:
html@page {
size: 80mm;
margin: 10mm;
@footnote {
border-top: solid red thick;
background: beige;
}
}
span { float: footnote }
It is customary to have a shortened line above the footnote area, this is achieved with the border-clip property:
html@page {
size: 80mm;
margin: 10mm;
@footnote {
border-top: thin solid black;
border-clip: 3em;
}
}
A footnote consists of the footnote itself, a marker
which identifies the footnote, and a footnote call
which is left in the main text. Here's how to give the marker a red background:
html::footnote-marker {
background: red;
}
The footnote call has been given a red background so that it can be more easily spotted. Also, the font-size is reduced, the vertical aligment is set to superscript, and the line-height is set to none to avoid that the footnote call increases the height of the line.
The footnote area is often indented:
html @footnote {
border-top: solid black thin;
border-clip: 3rem;
padding-left: 2rem;
}
Footnote markers are sometimes positioned inside the footnote, and not in the margin:
html::footnote-marker {
background: red;
}
span {
float: footnote;
footnote-style-position: inside;
}
The footnote call can also be painted red:
html::footnote-call {
background: red;
font-size: 0.8;
vertical-align: super;
line-height: 0;
}
The footnote call has been given a red background so that it can be more easily spotted. Also, the font-size is reduced, the vertical aligment is set to superscript, and the line-height nulled to avoid upsetting the line.
There are many counter styles that can be used to number footnotes. In this eample you see decimal (which is the default), asterisks, and lowecase roman numbers.
htmlspan {
float: footnote;
footnote-style-position: inside;
}
span.one::footnote-marker, span.one::footnote-call {
content: counter(footnote);
font-size: 0.7em;
vertical-align: super;
line-height: 0;
color: red;
}
span.two::footnote-marker, span.two::footnote-call {
content: counter(footnote, asterisks);
color: green;
}
span.three::footnote-marker, span.three::footnote-call {
content: "[" counter(footnote, lower-roman) "] ";
color: blue;
}
If none of the predefinded number styles suit, you can also define your own symbols.
htmlspan {
float: footnote;
footnote-style-position: inside;
}
span::footnote-marker, span::footnote-call {
content: counter(footnote, symbols('*', '†'));
font-size: 0.8em;
vertical-align: super;
line-height: 0;
color: red;
}
When the list of symbols is exhausted, decimal numbers will appear.
In a multi-column environment, footnotes will – by default – end up at the bottom of their respective columns:
htmlbody { columns: 2 }
.joke {
float: footnote;
footnote-style-position: inside;
}
You can also tell footnotes to appear at the bottom of the page (as opposed to the column):
html.joke {
float: footnote page;
}
It is possible use both column and page footnotes on the same page:
html.pagejoke {
float: footnote page;
}
.columnjoke {
float: footnote column;
}
If you have several types of footnotes, you may want to use different counters for them:
htmlbody {
columns: 2;
counter-reset: cj pj;
}
.pagejoke {
float: footnote page;
counter-increment: pj;
}
.pagejoke::footnote-marker, .pagejoke::footnote-call {
content: "[" counter(pj) "] ";
}
.columnjoke {
float: footnote column;
counter-increment: cj;
}
.columnjoke::footnote-marker, .columnjoke::footnote-call {
content: "[" counter(cj, lower-alpha) "] ";
}
Footnote calls/markers can be constructed from several counters. In this example, footnotes are numbered by a compound made from the page number and the footnote counter. Additionally, the footnote counter is reset on every page.
html@page {
counter-reset: footnote;
}
::footnote-marker {
content: "[" counter(page) "." counter(footnote) "] ";
}
::footnote-call {
content: "[" counter(page) "." counter(footnote) "]";
vertical-align: super;
font-size: 0.8em;
}
By default, footntes are block-level. But they can also be turned into inline elements:
html.joke {
float: footnote;
-prince-float-reference: page;
footnote-display: inline;
footnote-style-position: inside;
}
By default, the footnote area is found where you expect it: at the bottom of the page. However, the foonote area can be absolutely positioned somewhere else on the page.
html@page {
size: a4;
margin: 10vw;
@footnote {
position: absolute;
top: 0;
right: 0;
width: 35vw;
background: beige;
padding: 2vw 2vw 2vw 8vw;
box-sizing: border-box;
}
}
By treating elements like page floats instead of footnotes, some new formatting options appear. In this example, all footnotes on a page will be displayed in the last column. However, page floats are not real footnotes and you will need to create the footnote calls and markers yourself. Or, you can let a script do the job, like here:
html.joke {
background: beige;
padding: 0.3em 0.6em;
float: bottom;
float-policy: in-order;
-prince-float-defer-column: last;
text-indent: 0;
}
.joke::before {
content: "[" counter(sn) "] ";
}
.snc {
counter-increment: sn;
content: "[" counter(sn) "] ";
}
...
<script type="text/javascript" src="../charms.js"></script>
<body onload="addSidenoteMarks('span','snc')">
Another option when using page floats instead of footnotes is that your notes can be deferred to later page with the -prince-defer-page property:
html.joke {
background: beige;
padding: 0.3em 0.6em;
float: bottom;
float-policy: in-order;
-prince-float-defer-column: last;
-prince-float-defer-page: right;
text-indent: 0;
}
<script type="text/javascript" src="../charms.js"></script>
<body onload="addSidenoteMarks('span','snc')">