Footnotes in Articles
A quick word about how footnotes are implemented on this site…
In a recent post, The Case For a Demagogue, I used footnotes on this site for the first time, but I was not completely satisfied with the result. By using the HTML <sup> tag surrounding a hyperlink, it’s easy enough to format the footnote reference as a superscript and jump to it:
<ul>
<li>The 2016 election was the second of the last five in which the
winner won while losing the popular vote (Bush #43 in 2000 was the
other), and only the fourth in U.S. history
<sup><a href="#footnote1">1</a></sup>.
</li>
</ul>The problem is getting back to where you were in the text. A quick search revealed a good solution from John Gruber at Daring Fireball. He suggests 1) adding an ID for the footnote reference (I’ve used id="ref-footnote1" in the superscript), and 2) at the end of the footnote text, adding a link back to the footnote reference using its ID, along with a Unicode character often used to represent a carriage return. The way I’ve done it looks like this:
<ul>
<li>The 2016 election was the second of the last five in which the
winner won while losing the popular vote (Bush #43 in 2000 was the
other), and only the fourth in U.S. history
<sup id="ref-footnote1"><a href="#footnote1">1</a></sup>.
</li>
</ul>
<!-- And the footnote section... -->
<div class="footnotes">
<ol>
<li id="footnote1">
From <a href="http://www.pewresearch.org/...">Pew Research</a>:
<em>In the 1824 election, which was contested between rival
factions of the same party, Andrew Jackson won a plurality of the
popular and electoral vote, but because he was short of an
Electoral College majority the election was thrown to the House of
Representatives, which chose runner-up John Quincy Adams.</em>
Some sources refer to this as the <em>fifth</em> time the winner
did not get a plurality of the popular vote, but for the purpose
of this blog post, I consider this a special case since Congress
intervened to pick the candidate. <a href="#ref-footnote1"
class='footnoteBackLink' title="Jump back to footnote 1 in the
text.">↩︎</a>
</li>
</ol>
</div>I like the way this works, so this will be the convention I follow going forward.
Categories Technology Meta