Citations and bibliographies for HTML

Jan Niklas Böhm

Citations and bibliographies for HTML

While most blog posts are not going into deep scientifical exploration, this one being no exception, they could nevertheless benefit from more advanced citation functionality. As some journals offer improved functionality or interactive articles along the lines of Jupyter notebooksAs an example, eLife is experimenting with Executable Research Articles., HTML publishing is becoming more common.

One of the most elaborate examples is the Distill Research journal, a journal dedicated to publishing academic articles in HTML. They have created a framework for this purpose, including a treatment of citations.

As an example, consider the article titled “Communicating with Interactive Articles”. The citations are encoded as “footnotes” —or rather, the numeric citation style—, but hovering over it with the mouse shows the expanded citation. While on mobile, touching the footnote will have the same effect and reveal the citation. This works reasonably well, but unfortunately requires the use of Javascript in order to parse the citations given in a bibtex-formatted code block.

Let’s look at how we could have citations in HTML, with the help of static site generators. Options are:

The last two approaches differ little in functionality, in essence only the key differs, the footnotes use a numeral whereas the author-year approach uses those two values for its key

Unfortunately, HTML doesn’t offer functionality for creating citations that go over the availability of a <cite> tag. As such, citations have to be implemented by hand, more or less. This resembles the approach that was taken by bibtex and by extension biblatex, as there are no semantic citation structures available in any of the output formats, such as PDF. So would it be sensible to more or less reimplement the existing approaches that have been thought of by the creators of bibtex?