Footnotes

Footnotes are especially important in books with a lot of references and annotations. To mark an element as being a footnote, you should use the float: footnote property.

Suppose that you have the following document fragment:

<p>Changing the oil <span class='fnote'>This should be done 
by a specialist in a controlled environment</span> in your car.<p>

To mark the span with the class footnote as an actual one:

span.fnote {
  float: footnote;
}

There is a counter named footnote that is incremented automatically by the formatting processor each time it encounters an element with float: footnote set on it. Sometimes it makes sense to reset this counter at each of the chapters or sections of the document.

section {
  counter-reset:footnote 1;
}

Styling the Footnote Call

The number that remains in the content is called footnote call. To style it, use the footnote-call pseudo element:

span.fnote:footnote-call{
  color: red;
}

Note: By default, Oxygen PDF Chemistry considers all the :footnote-call pseudo elements to have the content to be the value of the footnote counter, a smaller font size, and to be aligned at top of the line. You can change these properties if you need something different:

:footnote-call {
  content: counter(footnote);
  vertical-align: super;
  font-size: 0.8em;
}

Styling the Footnote Marker

The footnote marker is the number that is shown at the left side of the footnote text, in the lower part of the page. It has the same text as the footnote call. To style it, you can use the footnote-marker pseudo element:

span.fnote:footnote-marker {
  font-weight: bold;
}

Note: Oxygen PDF Chemistry considers all the :footnote-marker pseudo elements to have the content to be the value of the footnote counter, followed by a dot, and to be aligned to the right, towards the footnote text. You can change these properties if you need something different:

:footnote-marker {
  content: counter(footnote) '.';
  list-style-position: outside;
  text-align: right;
}