Footnotes multi columns

Display footnotes within a multi column setup. Footnotes are being rendered either across all columns or within the column of their occurrence (depending on the converter).

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  (OK)
no support for footnotes (within the same column) within a multi column environment
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  ERROR
rendering errors
OK OK with issues Error Unsupported

HTML input

<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body lang="en">
    <div class="multicol fill-auto cols-3" lang="en">
        <h1> Multi-column with footnotes (column-fill: auto)</h1>
        <p>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue.
        </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">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>
        </p>
        <p>
            Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies.
        </p>
        <p>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue.
        </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">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>
        </p>
        <p>
            Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies.
        </p>
        <p>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue.
        </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">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>
        </p>
        <p>
            Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies.
        </p>
    </div>
    <div class="multicol fill-balanced cols-3" lang="en">
        <h1> Multi-column with footnotes (column-fill: balance)</h1>
        <p>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue.
        </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">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>
        </p>
        <p>
            Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies.
        </p>
        <p>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue.
        </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">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>
        </p>
        <p>
            Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies.
        </p>
        <p>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue.
        </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">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>
    </div>
</body>

</html>

Stylesheet

@import url("../styles/a4-landscape.css");

div.multicol {
    margin-bottom: 2em;
    text-align: justify;
    hyphens: auto;
    break-after: page;
    border: 1px dashed red;
}


h1 {
    column-span: all;
}


.cols-3 {
    column-count: 3;
    column-gap: 1cm;
    column-rule: 4px solid #ff00ff;
}

.fill-auto {
    column-fill: auto;
}

.fill-balanced {
    column-fill: balance;

}

@page {
}

@page {
    @footnote {
        border-top: dashed red 1px;
        margin-top: 1em;
        float: bottom;
        -ah-float: after column auto-move;
    }
}

span.footnote { 
    float: footnote; 
    -ah-float: footnote;
}

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

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