title: Printed HTML per-page footnotes
body: <p>The <a href="https://drafts.csswg.org/css-gcpm-3/" rel="nofollow noreferrer">CSS3 GCPM spec</a> defined the following</p>
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
   .footnote { float: footnote }
  &lt;/style&gt;
  
  &lt;p&gt;A sentence consists of words. &lt;span class=&quot;footnote&quot;&gt;Most often.&lt;/span&gt;.
  </code></pre>
  <p>rendering as</p>
  <blockquote>
  <p>A sentence consists of words. ¹</p>
  <p> ¹ Most often. [at the end of (each) page]</p>
  </blockquote>
  <p>when printed (also works  for the screen media type, but as long as it works for print I am happy).</p>
  <p>Which is <em>exactly</em> 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 <em>any</em> 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.).</p>
  <hr />
  <p>And just in case you're wondering, notes are</p>
  <blockquote>
  <p>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.</p>
  </blockquote>
  <p>and footnotes are</p>
  <blockquote>
  <p>... 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.</p>
  </blockquote>
  <p>For more information I refer to the <a href="http://en.wikipedia.org/wiki/Note_%28typography%29" rel="nofollow noreferrer">wikipage on notes in typography</a>.</p>
  <hr />
  <p>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 <code>29.7cm</code> and the trial&amp;error height (at least on my system) of <code>26.1cm</code>, this can be observed using the following code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
      @page{
          margin:0px;
          padding:0px;
      }
      html,body,*{
          margin:0px;
          padding:0px;
      }
      p{
          border:1px solid black;
          height:26.1cm;
      }
  &lt;/style&gt;
  </code></pre>
  <p>and a couple of empty <code>&lt;p&gt;</code>'s. I would consider an explanation of this disparity (thus allowing it's control) to be enough of a solution.</p>