search

jgm / pandoc

Universal markup converter
https://pandoc.org
Other
33.14k stars 3.3k forks source link

Markdown -> Epub: Footnotes don't work on Kobo readers #9851

Open jfmdev opened 3 weeks ago

jfmdev commented 3 weeks ago

Pandoc version: 3.1.2 (for Windows 11)

Explain the problem: I noticed that on Epub files generated by newer versions of Pandoc, the footnotes don't work when reading the file on a Kobo device (I use Kobo Clara HD): clicking the footnote number/reference don't takes you to the footnote itself, it's like the link it's broken.

Proposed solution

After comparing Epub files generated with different versions of Pandoc, I noticed that older versions used to put the id attribute on the <li> element, like:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat<a href="#fn1" class="footnote-ref" id="fnref1" epub:type="noteref"><sup>[1]</sup></a>.</p>
<section id="footnotes" epub:type="footnotes">
    <ol>
      <li id="fn1" epub:type="footnote"><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
      deserunt mollit anim id est laborum.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a>
      </p></li>
    </ol>
</section>

And newer versions put the id attribute on the <aside> element, like:

<section id="footnotes" class="footnotes footnotes-end-of-document" epub:type="footnotes">
  <aside epub:type="footnote" id="fn1">
    <p><a href="#fnref1" class="footnote-back" role="doc-backlink">1</a>. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </aside>
</section>

But Kobo devices seems to don't play nice with <aside> elements, so a solution is to move the id attribute to the <p> element, like:

<section id="footnotes" class="footnotes footnotes-end-of-document" epub:type="footnotes">
  <aside epub:type="footnote">
    <p id="fn1"><a href="#fnref1" class="footnote-back" role="doc-backlink">1</a>. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </aside>
</section>

Note that I'm aware that this is, in fact, a bug from Kobo (since they should handle IDs on <aside> elements), but I assume that the Epub exporter from Pandoc does is best to make the files to be compatible with most readers.