Edit online

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

Edit online

How to Add a Separator Above the Footnotes

The @footnote part of a @page declaration controls the style of the separator between the page content and the footnotes. For the content, you should set a leader. The leader uses a letter or a line style to fill the entire width of the page.

@page {
  margin:0.5in;
  ...
  @footnote {
    content: leader(solid);
    color:silver;
  }
}

To create a dotted line, you can use the dot character: leader('.'). Other commonly used characters are: "-" (dash) and "_" (underscore).