Lesson: lesson-footnotes

This example explains how to generate footnotes from HTML markup and how to style the marker and the footnote text itself

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
ERROR
Download
Footnote counters not incremented properly

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url("../styles/a5.css");

@page {
    counter-reset: footnote 0;
}

@page {
    @footnote {
        border-top: dashed red 1px;
        float: bottom;
    }
}

span.footnote { 
    float: footnote; 
    counter-increment: footnote;
}

.footnote::footnote-call {
    content: counter(footnote, decimal) " ";
    color: green;
}

.footnote::footnote-marker {
    content: counter(footnote, lower-roman);
    font-size: 14pt;
    color: blue;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <p>Though the body was erect, the head was thrown back so that the
        closed eyes were pointed towards the needle of the tell-tale that swung
        from a beam in the ceiling.<span class="footnote">The cabin-compass is
            called the tell-tale, because without going to the compass at the
            helm, the Captain, while below, can inform himself of the course of
            the ship.</span>
        </p>
        <p>Though the body was erect, the head was thrown back so that the
        closed eyes were pointed towards the needle of the tell-tale that swung
        from a beam in the ceiling.<span class="footnote">This is another footnote</span>
    </body>
</html>