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:
parent
8f06883ec5
commit
4348505ada
2 changed files with 29 additions and 16 deletions
13
org/html.go
13
org/html.go
|
@ -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) {
|
||||
|
|
32
org/testdata/example.html
vendored
32
org/testdata/example.html
vendored
|
@ -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'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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue