A quick guide to
creating footnotes
in Prince

Footnotes in print, not in history

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.

Starting point

We start with a simple HTML document, with one footnote inside a span element:

html<p>Lorem ipsum<span>Lorem Ipsum is a placeholder text, commonly used in graphic design</span> dolor sit amet...

Styling the footnote area

Footnotes appear inside the footnote area, which you can style with normal CSS properties. Here, a red border is added:

html@page {
  size: 80mm;
  margin: 10mm;

  @footnote {
    border-top: solid red thick;
  }
}
span { float: footnote }

Cropping the border

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: solid red thick;
    border-clip: 3em;
  }
}

Styling the marker

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.

Moving the marker to the inside

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;
}

Styling the footnote call

The footnote call can also be painted red:

html::footnote-call {
  background: red;
  font-size: 0.8;
  vertical-align: super;
  line-height: 0;
}

Footnote number styles

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;
}

Footnotes at the bottom of columns

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;
}

Footnotes at the bottom of the page

You can also tell footnotes to appear at the bottom of the page (as opposed to the column):

html.joke { 
  float: footnote page; 
}

Combining column and page footnotes

It's possible to combine the column and page footnotes:

html.pagejoke { 
  float: footnote page; 
}
.columnjoke { 
  float: footnote column; 
}

Multiple counters

I 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) "] ";
}

Compound counters

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;
}

Inline columns

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;  
}

Positioning the footnote area

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;
  }
}

Deferring page floats to the last column

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="https://princexml.com/howcome/2022/guides/charms.js"></script>
<body onload="addSidenoteMarks('span','snc')">

Deferring page floats to a right page

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="https://princexml.com/howcome/2022/guides/charms.js"></script>
<body onload="addSidenoteMarks('span','snc')">

2022-03-20 Håkon Wium Lie

A quick guide to creating footnotes in Prince