A (terrible?) way to do footnotes in HTML

I've been thinking about better ways to display footnotes in eBooks.

So this is my horrible and hacky way to display inline footnotes in pure HTML and CSS. No Javascript.

Here's how it works:

 HTMLThe most cited work in history, for example, is a 1951 paper

   <details>

      <summary>1</summary> 

      Lowry, O. H., Rosebrough, N. J., Farr, A. L. Randall, R. J. J. Biol. Chem. 193, 265–275 (1951).

   </details>

describing an assay to determine the amount of protein in a solution.

I've use <details> and <summary> to make a collapsible element.

The problem here is that <details> is a block level element. By default, starting a <details> element will display on a new line.

It also doesn't look much like a footnote yet.

Luckily, I bodged some CSS together to make it inline:

 CSSdetails, summary {

  display: inline;

  vertical-align: super;

  font-size: 0.75em;

}

summary {

  cursor: pointer;

}

details[open] {

  display: contents;

}

details[open]::before {

  content: " [";

}

details[open]::after {

  content: "]";

}

• Using display:inline; turns these into inline elements - so a newline isn't started.
• The alignment and font size make it look like a normal footnote.
• The cursor: pointer; just makes it slightly easier for mouse users to see that the element is interactive.
• When the <details> is in the open state, the content will be displayed as a direct descendant of the parent element.
• Add some square brackets to make it more obvious where the footnote begins and ends.

I could have used the <sup> element to make the whole note superscript. But that produces invalid HTML.

The <details> element can contain any HTML. So I can add a fully semantic citation.

Problems

The "normal" way of doing footnotes in an ePub is to place them at the end of a section. Footnote links like ^fn1 are just hyperlinks. They take the reader to that section of the document. So eReaders will display the footnote's contents on the same page as the footnote's link:

That makes it easy for a reader to search through them all, or just read them in order.

Because my style are inline, that makes it hard to see or search for them.

And because my style are interactive elements, they place a physical burden on the user to interact with them.

The main problem is with the rendering engines used by eReaders. I tried a few, but none of them displayed <details> as an interactive element.

I'd love to know how it renders on Kindle, Kobo, and other eReaders. Here's the HTML of the test if you'd like to experiment with it and send me a screenshot.

 CSSdetails, summary {

  display: inline;

  vertical-align: super;

  font-size: 0.75em;

}

summary {

  cursor: pointer;

}

details[open] {

  display: contents;

}

details[open]::before {

  content: " [";

}

details[open]::after {

  content: "]";

}

 HTMLThe most cited work in history, for example, is a 1951 paper<details><summary>1</summary> Lowry, O. H., Rosebrough, N. J., Farr, A. L. and Randall, R. J. J. Biol. Chem. 193, 265–275 (1951).</details> describing an assay to determine the amount of protein in a solution.

<br><br>

Sunlight poured like molten gold<details><summary>2</summary> Not precisely, of course. Trees didn’t burst into flame, people didn’t suddenly become very rich and extremely dead, and the seas didn’t flash into steam. A better simile, in fact, would be ‘not like molten gold.’</details> across the sleeping landscape.

<br><br>

My blog was recently featured in an academic paper

<details>

  <summary>3</summary>

  <span itemscope itemtype="http://schema.org/ScholarlyArticle">

     <span itemprop="citation">

       <span itemprop="author" itemscope itemtype="http://schema.org/Person">

         <span itemprop="name">

           <span itemprop="familyName">Eishita</span>

           <span>, </span>

           <span itemprop="givenName">Farjana Z.</span>

         </span>

       </span>

     <span> and </span>

     <span itemprop="author" itemscope itemtype="http://schema.org/Person">

       <span itemprop="name">

         <span itemprop="familyName">Stanley</span>

         <span>, </span>

         <span itemprop="givenName">Kevin G.</span>

       </span>

     </span>

     <span> and </span>

     <span itemprop="author" itemscope itemtype="http://schema.org/Person">

       <span itemprop="name">

         <span itemprop="familyName">Esquivel</span>

         <span>, </span>

         <span itemprop="givenName">Alain</span>

       </span>

     </span> 

     <q>

       <cite itemprop="headline">Quantifying the differential impact of sensor noise in augmented reality gaming input</cite>

     </q> 

     <span>(</span>

     <time itemprop="datePublished" datetime="2015">2015</time>

     <span>)</span> 

     <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">

       <span itemprop="name">Institute of Electrical and Electronics Engineers (IEEE)</span>

     </span>

     <span>.</span> DOI: <a itemprop="url" href="https://doi.org/10.1109/gem.2015.7377202">https://doi.org/10.1109/gem.2015.7377202</a></span>

  </span>

</details> which pleased me greatly.