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

@ -134,10 +134,12 @@ func (w *HTMLWriter) writeBlock(b Block) {
}
func (w *HTMLWriter) writeFootnoteDefinition(f FootnoteDefinition) {
n := f.Name
w.WriteString(`<div class="footnote-definition">` + "\n")
w.WriteString(fmt.Sprintf(`<sup id="footnote-%s">%s</sup>`, f.Name, f.Name) + "\n")
w.WriteString(fmt.Sprintf(`<sup id="footnote-%s"><a href="#footnote-reference-%s">%s</a></sup>`, n, n, n) + "\n")
w.WriteString(`<div class="footnote-body">` + "\n")
w.writeNodes(f.Children...)
w.WriteString("</div>\n")
w.WriteString("</div>\n</div>\n")
}
func (w *HTMLWriter) writeFootnotes(d *Document) {
@ -145,7 +147,7 @@ func (w *HTMLWriter) writeFootnotes(d *Document) {
if len(fs.Definitions) == 0 {
return
}
w.WriteString(`<div id="footnotes">` + "\n")
w.WriteString(`<div class="footnotes">` + "\n")
w.WriteString(`<h1 class="footnotes-title">` + fs.Title + `</h1>` + "\n")
w.WriteString(`<div class="footnote-definitions">` + "\n")
for _, definition := range d.Footnotes.Ordered() {
@ -180,9 +182,8 @@ func (w *HTMLWriter) writeLinebreak(l Linebreak) {
}
func (w *HTMLWriter) writeFootnoteLink(l FootnoteLink) {
name := html.EscapeString(l.Name)
w.WriteString(fmt.Sprintf(`<sup class="footnote-reference"><a href="#footnote-%s">%s</a></sup>`, name, name))
n := html.EscapeString(l.Name)
w.WriteString(fmt.Sprintf(`<sup class="footnote-reference"><a id="footnote-reference-%s" href="#footnote-%s">%s</a></sup>`, n, n, n))
}
func (w *HTMLWriter) writeRegularLink(l RegularLink) {

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>