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.

Beauty is in the eye of the beholder, and the weal or woe of a tale is in the ear of the listener (Robert's Rule #9)

[Tweeted 2011-05-06]

I'm not the best designer...I do OK, but I'm certainly not the best. I can say that without regret or remorse or any sense of self-deprecation...it's an honest, realistic analysis, and one that comes after quite a bit of study and practice.

I spent several years in secondary school taking art classes as electives and have sketched live models, created my share of ceramics, and even painted a 5 meter mural for the school, and of course there were the (nearly obligatory) art appreciation courses. After all that, I'm familiar with a color wheel and perspective and how form should follow function. I still don't consider myself the best designer or artist. I'm just not that interested in it. I guess you might say it's a little like how most people experience music. They may play a couple of musical instruments and enjoy listening to music while they're in the car or cranking out some serious code, but they're not going to be anyone's rock god...ever.

From that being said, however, it should be relatively easy to see that I have a mildly educated palate when it comes to artistic pursuits, and I know what I like and sometimes I know what others like...but not always. I've had some people request designs that made little (or no) sense to me and I'm sure an inverse of that situation has applied at various points...and we have a saying, that "beauty is in the eye of the beholder", that seemingly covers this difference in taste.

One day I was interviewing for a position at an advertising firm. In describing the position, they told a tale that had baffled and even discouraged some candidates. When asked for my input, I responded that this appeared to me to be an opportunity, and by addressing it in a specific way they could easily turn the situation around. (I even described the pseudo-code necessary to address the situation, which in hindsight may not have been the best idea...I perhaps should have waited for the job offer first...but, lesson learned.)

That situation, and a few others like it, have led me to amend the idiomatic expression in what is my ninth rule, beauty is in the eye of the beholder, and the weal or woe of a tale is in the ear of the listener (Robert's Rule #9). Not everyone will hear the woe in your tragedies, nor will everyone hear the joy in your celebrations. Just as you wouldn't expect everyone to appreciate Picasso or Dali as you do, don't expect them to appreciate a story as you do, even if that story is a major career event.