Footnotes

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

Further reading:

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  ERROR
improper counters
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

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

Stylesheet

@import url("../styles/a5.css");

@page {
    counter-reset: footnote 0;
}

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

span.footnote { 
    float: footnote; 
}

.footnote::footnote-call {
    content: counter(footnote, decimal) " ";
    color: green;
    vertical-align: super;
    font-size: 0.8em;
}

.footnote::footnote-marker {
    content: counter(footnote, lower-roman);
    font-size: 14pt;
    color: red;
    display: inline-block;
    width: 2em;
    padding-right: 1em;
    text-align: right;
}