HTMLWriter: Improve footnote rendering

- add return link from footnote definitions -> footnote reference
- wrap footnote definition content in div for easier styling
- class rather than id bc idk consistency
This commit is contained in:
Niklas Fasching 2018-12-03 15:45:57 +01:00
parent 8f06883ec5
commit 4348505ada
2 changed files with 29 additions and 16 deletions

View file

@ -259,25 +259,26 @@ Bar paragraph
<ul>
<li>
<p>
normal footnote reference <sup class="footnote-reference"><a href="#footnote-1">1</a></sup> <sup class="footnote-reference"><a href="#footnote-6">6</a></sup>
normal footnote reference <sup class="footnote-reference"><a id="footnote-reference-1" href="#footnote-1">1</a></sup> <sup class="footnote-reference"><a id="footnote-reference-6" href="#footnote-6">6</a></sup>
</p>
</li>
<li>
<p>
further references to the same footnote should not <sup class="footnote-reference"><a href="#footnote-1">1</a></sup> render duplicates in the footnote list
further references to the same footnote should not <sup class="footnote-reference"><a id="footnote-reference-1" href="#footnote-1">1</a></sup> render duplicates in the footnote list
</p>
</li>
<li>
<p>
inline footnotes are also supported via <sup class="footnote-reference"><a href="#footnote-2">2</a></sup>.
inline footnotes are also supported via <sup class="footnote-reference"><a id="footnote-reference-2" href="#footnote-2">2</a></sup>.
</p>
</li>
</ul>
<div id="footnotes">
<div class="footnotes">
<h1 class="footnotes-title">Footnotes</h1>
<div class="footnote-definitions">
<div class="footnote-definition">
<sup id="footnote-1">1</sup>
<sup id="footnote-1"><a href="#footnote-reference-1">1</a></sup>
<div class="footnote-body">
<p>
<a href="https://www.example.com">https://www.example.com</a>
</p>
@ -320,36 +321,47 @@ and tables
</li>
</ul>
</div>
</div>
<div class="footnote-definition">
<sup id="footnote-3">3</sup>
<sup id="footnote-3"><a href="#footnote-reference-3">3</a></sup>
<div class="footnote-body">
<p>
<a href="http://example.com/unused-footnote">example.com/unused-footnote</a>
</p>
</div>
</div>
<div class="footnote-definition">
<sup id="footnote-4">4</sup>
<sup id="footnote-4"><a href="#footnote-reference-4">4</a></sup>
<div class="footnote-body">
<p>
another unused footnote
</p>
</div>
</div>
<div class="footnote-definition">
<sup id="footnote-5">5</sup>
<sup id="footnote-5"><a href="#footnote-reference-5">5</a></sup>
<div class="footnote-body">
<p>
another unused footnote
</p>
</div>
</div>
<div class="footnote-definition">
<sup id="footnote-6">6</sup>
<sup id="footnote-6"><a href="#footnote-reference-6">6</a></sup>
<div class="footnote-body">
<p>
Footnotes break after two consecutive empty lines - just like paragraphs - see <a href="https://orgmode.org/worg/dev/org-syntax.html.">https://orgmode.org/worg/dev/org-syntax.html.</a>
This shouldn&#39;t happen when the definition line and the line after that are empty.
</p>
</div>
</div>
<div class="footnote-definition">
<sup id="footnote-2">2</sup>
<sup id="footnote-2"><a href="#footnote-reference-2">2</a></sup>
<div class="footnote-body">
<p>
the inline footnote definition
</p>
</div>
</div>
</div>
</div>