honekamp.net

Lessons Learned

I am in the software development business for nearly 25 years now but admittedly my exposure to HTML and/or CSS has been next to none so far1. Since I started to run this little blog, however, I have had the opportunity to learn a lot about the way in which web pages are styled2.

I’d like to exemplify this learning process along the usage of footnotes3. At first, I went the plain HTML way of defining an anchor tag and a superscript tag for the footnote rendering: <a href=”footnote-1”><sup>1</sup></a>. This approach is very basic and does not provide any means to navigate from the footnote back to the reference in the text.

A search on the Internet got me to the footnote style preferred by John Gruber. This is a big improvement over the previous state because it very nicely solves the navigation from and to the reference. Speaking of John Gruber, I very much appreciate the fact that tumblr supports Gruber’s markdown syntax for creating blog posts. Markdown truly is fun to use.

And yet, the “canonical” definition of markdown does not foresee any explicit support for the creation of footnotes. Further research got me a big step further, i.e. there is a way to use markdown for “footnoting”, at least on tumblr : [^1] creates a reference to the footnote labeled 1 and [^1]: implements the footnote itself4.

Nearly there! Unfortunately the rendering of footnotes is not as good as I had originally hoped. That is, the line pitch between lines that contain footnotes becomes bigger than between lines without any footnotes. That sure looks ugly.

But wait, I was pretty sure to have come across web sites with beautifully rendered footnotes, for example Marco Arment’s blog. How does it work? Finally, I figured it out5. I hope that Marco does not mind my shameless scrutinizing of his style definitions and I give him full credit for teaching me how to make the footnotes render as intended.

  1. So much for Atwood’s law.

  2. I mean, how can you seriously take over a theme as is without even the tiniest modification? That would be … unthinkable, right?

  3. Needless to say that I like footnotes very much.

  4. Unfortunately MarsEdit’s (which meanwhile became my favorite authoring tool for this blog) preview does not support the extension to the “canonical” definition of markdown. Daniel, please fix it!

  5. Use the source, Luke!

Comments