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.

Answer 2

First to answer your question about page height 27.9cm vs 26.1cm. This can be attributed to a few causes including at least the following:

1. Your current printer may impose it's own non-printable margins caused by its printing mechanism.
2. Your current browser adds its own margins for page headers and footers etc and may or may not suppress these depending on whether the user has chosen to suppress page headers and footers. Some browsers suppress, some retain the space and blank it out.

Neither of these two sources are available to the page author to interrogate.

But...

I have managed to develop a JQuery solution that will get footnotes to behave as they should.

1. The embedded footnote is extracted, automatically counted and replaced by a superscript number. Ie:

   <div>My first sentence consists of words<span class="footnote">My first footnote.</span></div>
   

   becomes

   <div>My first sentence consists of words<sup>1</sup></div>
   

   with the text

   1 My first footnote.

   at the bottom of the current print-size "page".

2. The document content is formatted into "pages" by using inserting the current page footnotes at the end of each print-sized "page". No special manually inserted <div> per page is needed.
3. The solution does not split a text block, rather inserts the footnotes between existing text blocks (the solution supports scanning top level <div> or<p> elements).
4. I've tested this on Safari, Firefox and Chrome (Mac only).

See fiddle for working example. The Javascript is a bit more complex than I would like (92 lines) and works by temporarily getting the browser to layout the page based on your instructed pageHeight and pageWidth before reverting to normal layout.

UPDATED:

I have produced an easier to follow version that merges the technique @apaul34208 used to achieve full page size independent of browser but retains the concepts of embedded footnote extraction and automatic paginating of the correct footnotes for each page to suit the printer. This now works for Safari, Chrome and Firefox (only tested on Mac) without change on both A4 and US Letter. Page breaks are confined to a <div> or <p> boundary. Thanks to Paul.

Updated working example is here: fiddle

or full screen for page preview here: result page only

Answer 3

I've been using PrinceXML to do exactly what you're talking about, the downside to it is that you have to install it on your computer with a shell script.

A colleague and I are working on a simple app that is basically an html text editor but can export the html as a PDF, with a table of contents, footnotes running heads and all.

Prince is the best we've come across so far. Let me know if this is not something that will work for you.