Printed HTML per-page footnotes

Question

The CSS3 GCPM spec defined the following

<style>
 .footnote { float: footnote }
</style>

<p>A sentence consists of words. <span class="footnote">Most often.</span>.

rendering as

A sentence consists of words. ¹

 ¹ Most often. [at the end of (each) page]

when printed (also works for the screen media type, but as long as it works for print I am happy).

Which is exactly what I want to do, no matter how complex, but as far as I am aware no modern browser implements this spec, nor the css-paging spec. Is there any way at all to achieve this effect if I am willing to use javascript. At the very least it would be possible to generate a pdf using some libraries, but if possible I would like to not lose the power of html (things like floats etc.).

---

And just in case you're wondering, notes are

A note is a string of text placed at the bottom of a page in a book or document or at the end of a chapter, volume or the whole text.

and footnotes are

... notes at the foot of the page while endnotes are collected under a separate heading at the end of a chapter, volume, or entire work.

For more information I refer to the wikipage on notes in typography.

---

One possible direction a solution can be sought is figuring out the height of a single page, in that case a disparity is noted between the expected height of 29.7cm and the trial&error height (at least on my system) of 26.1cm, this can be observed using the following code:

<style>
    @page{
        margin:0px;
        padding:0px;
    }
    html,body,*{
        margin:0px;
        padding:0px;
    }
    p{
        border:1px solid black;
        height:26.1cm;
    }
</style>

and a couple of empty <p>'s. I would consider an explanation of this disparity (thus allowing it's control) to be enough of a solution.

Answer 1

I hope this is what you're looking for... It is loosely based off of this answer with some adjustments for the specific use case.

In my opinion the css counter is the fun part.

Full Screen Result <-- Try print preview on this one
Working Example

HTML:

<div id="pagewrapper1">
    <p>Zombies<sup>1</sup> reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit, morbo vel maleficia? De Apocalypsi undead dictum mauris brains<sup>2</sup>. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.<sup>3</sup>

    </p>
    <ol class="footnotes">
        <li>This is a foot note about Zombies.</li>
        <li>This is a foot note about Brains.</li>
        <li>This is a foot note about Horror.</li>
    </ol>
</div>
<div id="pagewrapper2">
    <p>Zombies<sup>4</sup> reversus ab inferno... and so on...

CSS:

*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-size: 1em;
    padding:0;
    margin:0;
    height:100%;
}
#pagewrapper1, #pagewrapper2 {
    position:relative;
    border: 1px solid #000;
    min-height:100%;
    -webkit-region-break-inside: avoid; /* added these bits to work out print issue */
    page-break-after: always;
    page-break-inside: avoid;
}
p {
    margin:20px;
}
sup {
    font-size: .6em;
}
ol.footnotes {
    list-style-type: none;
    margin-left: 3em;
    position: absolute;
    bottom:0;
}
ol.footnotes > li {
    counter-increment: customlistcounter;
}
ol.footnotes > li:before {
    content: counter(customlistcounter)" ";
    position:relative;
    top:-4px;
    font-size: .6em;
    width: 3em;
}

jQuery for position and counter:

$('#pagewrapper1, #pagewrapper2').css({
        'padding-bottom': $('.footnotes').height()
});

$('#pagewrapper2 ol.footnotes').css({
    'counter-reset': 'customlistcounter ' + $('#pagewrapper1 ol.footnotes li').size()
});

I've played with this a bit more, the print preview looks good in Firefox, Chrome, and IE10, but seems to have issues in Safari.