Article: Accessible Footnotes with CSS

Extract from SitePoint article “Accessible Footnotes with CSS” by Hugo Giraudel

I was playing with CSS counters the other day and thought about using them to deal with footnotes. According to Plagiarism which has a surprisingly long entry on the matter, footnotes are:

[…] notes placed at the bottom of a page. They cite references or comment on a designated part of the text above it.

You often see them in papers when the author wants to add a piece of information or cite a reference without doing it in the middle of the content or using parentheses. Usually, footnotes are represented with a number according to the position of the footnote in the document, then the same numbers are present at the bottom of the document, adding extra content.

The problem with footnotes on the web is that they can be a pain to maintain. If you happen to work on the same document often, changing the order of sections, adding references along the way, it might be tedious to have to re-number all existing footnotes. For example, if you have 3 existing references to footnotes in a document, and you want to add another one, but on a piece of content that occurs before all the others, you have to re-number them all. Not great…

We could use CSS counters to make this whole thing much easier. What if we did not have to maintain the numbering by hand and it could be done automatically? The only thing we would have to pay attention to, is that the order of the actual notes in the footer respect the order of appearance of the references in the text.

Creating a sample document

Let’s create a sample document so we can get started.

<article>
  <h1>CSS-Powered Footnotes</h1>
 
  <p>Maintaining <a href="#footnotes">footnotes</a> manually can be a pain. 
  By using <a href="#css">CSS</a> <a href="#css-counters">counters</a> to add 
  the numbered references in the text and an ordered list to display the actual 
  footnotes in the footer, it becomes extremely easy.</p>
 
  <footer>
    <ol>
      <li id="footnotes">Footnotes are notes placed at the bottom of a page. They 
      cite references or comment on a designated part of the text above it.</li>
 
      <li id="css">Cascading Style Sheets</li>
 
      <li id="css-counters">CSS counters are, in essence, variables maintained by 
      CSS whose values may be incremented by CSS rules to track how many times 
      they're used.</li>
    </ol>
  </footer>
</article>

Our example is lightweight: we have some content in an <article> element, which contains some links (<a>) pointed at in-document IDs, mapped to the notes in the <footer> of the article.

With a few styles, it might look like this:

Continue reading article on SitePoint …

I’m interested by this because I write a few articles with reference links like this, and it is tedious to set up manually. I have started using a bit of php to take some of the donkey work out of it, creating an array of sources at the start of the page, which then creates an array of links and then builds the list at the bottom. Still, it could be easier to do.
The problem I have with using counters though, is that I often re-use the same reference in more than one place in the article. So they are not 1, 2, 3, 4, etc. It may be 1, 2, 1, 3, 4, 2, 5 (for example). So I have to number each one where I insert it into the body text like this <?php echo $src[1];?>
I also like the idea of the backlinks to take people back to the text, but I don’t see how that will work in my case where a source is referred to in more than one place on the page.

I believe that you are not supposed to alter the order of the numbers even when citing the same reference. You should use consecutive numbers.

University of Bristol

Notes should be numbered sequentially (1,2,3 etc). Do not use the same number more than once to refer the reader to an earlier note.

University of Dundee

Make sure your footnote numbers are consecutive

I did play around with CSS counters about 6 months ago but used js to find the link backs. It’s not as neat as Hugo’s example but was in answers to a forum question.

Of course the order is consecutive in the list at the bottom, its an <ol> but some numbered links in the text are repeated. It would seem strange to me to have the same item repeated in the list two or three times.
In my earlier example, source #1 is “The Mercantile Navy Lists.” then I refer to the same source again in section 3 when describing the Tyne Queen, so a #1 appears after #5. I’ve also seen it done this way in Wikipedia (so it must be right :laughing: ) For example in this article ref #2 appears twice. I also notice in the ref they have backlinks (a & b) to both links.
It may seem the right thing to do to conform to a system like MHRA, but since I’m not an academic, this doesn’t belong to any university and I don’t have some professor breathing down my neck, I’m of the opinion that I can pretty much make my own rules. I just think that having a repetitive list at the end would look more shoddy than repeating the numbered links in the text.

On the other hand, it may of advantage to do it that way, because I could then use a counter system to automate the numbering. Though I’m thinking that since I’m already using php to generate the list and links, it may be as well to let php do the counting too, instead of a css counter.
And I like the target highlight thing too.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.