Academia and end notes - Remix

Long, long ago, in a galaxy far, far away...

Ok, not that long ago, right here on Terra, I published a short tutorial about how to create in-line references with a hover tool-tip. You can read that tutorial at http://gettingpaidtothink.blogspot.com/2013/08/academia-and-end-notes.html (this link will open in a new tab or window). In fact, if you haven't read it, do so now because this post is updates to that approach that will correct a few errors.

Use of the SUP tag
In the first post, I suggested that you go with the superscript tag because it's widely recognized among readers as indicating a note. While that may be true in some cases, it's not semantic, and it's not as accessible or as functional as it could be. Since we're linking the note number with an actual note, the semantic thing to do would be to use an anchor tag and describe it as a note. Doing this offers a few other advantages, namely that we can fix validation issues and accessibility issues, because we're still going to use the aria-describedby attribute as well as the href attribute. Instead of having something like

...we're going to add an ARIA attribute - aria-describedby<sup aria-describedby="note-info" class="tooltip endnote" id="note-indicator-3">3</sup> - to identify that it's not just content.

...we will have something like

...we're going to add an ARIA attribute - aria-describedby <a aria-describedby="note-info" class="tooltip endnote" href="#note-indicator-3">3</a> - to identify that it's not just content.

Note that because we're linking it to the actual note, we can use the # sign and set the ID on the note, closing the reference loop.

Adjusting for the change in tags
Next, since we're abandoning the SUP tag, we have to add CSS to give the link the note reference look we're used to, otherwise it just looks like a number in the middle of the document.

First, we need to move the number into the superscript position. We do that with position and top statements, specifically setting position to relative and the top to a negative number to shift it above top of the line. By the way, this approach automatically compensates for the varying line-height that the SUP and SUB tags give you.

Next, we adjust the size of the number so that it is offset even more, emphasizing the appearance of being superscript.

Finally, I also add a cursor statement and a text-decoration statement to the CSS rule. I do this because I don't want the number underlined the way a link is usually displayed. It's a nit, I suppose, but it makes the number easier to read, especially when using a serif font, and it gives the tool-tip that appears a more 'finished' look, but these statements are entirely optional. The other CSS statements in the rule really aren't optional, because without them the link loses some of it's contextual meaning.

In the end, we have a CSS rule something like

.endnote {
  cursor: pointer;
  font-size: .7em;
  position: relative;
  text-decoration: none;
  top: -0.5em;
}

I hope this clears up things.