«

»

Fancy Footnotes for the Fearless

Back in February, I implored you to stop using unlinked footnotes in your blog posts. The intrepid Stephen Heard [1] of Scientist Sees Squirrel fame, not the 18th century governor of Georgia pointed out that that linking is a little kludgy. The return anchor can only be at the beginning of a paragraph, so it’s not an exact jump. And in my browser, my WordPress banner overhangs the link, so I don’t actually see the line I’m jumping to. Yes, a little kludgy. But so much better than no link.

Then Stephen wondered whether it would be possible to do pop-up footnotes, like in Randall Monroe’s [2] of XKCD fame, not the former NASA roboticist “What If?” series. When you click these links, a little box pops up and displays the footnoted text. It’s slick and has a more modern feel. It doesn’t require any scrolling and is less kludgy than linked footnotes. So I looked into it, and the answer is yes! [3] Well, the answer is yes! if you host your own blog. If you’re using a free blog hosted on wordpress.COM, you’re out of luck. You get what you pay for, I guess. Sorry, Stephen.

It’s not even that hard. You have to manually add a couple pieces of code to your blog website, but doing so is a one-time deed and takes less than five minutes. Then you simply add a little HTML around your footnotes and voila! Stunning pop-up footnotes.

Here’s how on WordPress:

  1. In your WordPress control panel, go to “Appearance” and then “Editor.” You can now manually edit your blog pages. Careful here.
  2. The first file to edit is your style sheet. It will be called “style.css”. Somewhere in it (at the end is fine), add the following code [4] stolen borrowed from Randall’s “What If?” site:
    .ref {
    position: relative;
    vertical-align: baseline;
    }
    
    .refnum {
    position: relative;
    left: 2px;
    bottom: 1ex;
    font-family: Verdana, sans-serif;
    color: #005994;
    font-size: .7em;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    }
    
    .refbody {
    font-family: Verdana, sans-serif;
    font-size: .7em;
    line-height: 1.1;
    display: block;
    min-width: 20em;
    position: absolute;
    left: 25px;
    bottom: 5px ;
    border: 1px solid;
    padding: 5px;
    background-color: #fff;
    word-wrap: break-word;
    z-index: 9999;
    overflow: auto;
    }
  3. You can play with the values in here to customize the look to your liking. Save your edits.
  4. Then you want to edit your header template. It will be called “header.php”. In the header part of the file (right before the </head> tag is good), you want to paste in the following code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <script>
    jQuery.noConflict();
    jQuery(function() {
    jQuery(".refbody").hide();
    jQuery(".refnum").click(function(event) {
    jQuery(this.nextSibling).toggle();
    event.stopPropagation();
    });
    jQuery("body").click(function(event) {
    jQuery(".refbody").hide();
    });
    });
    </script>
    
  5. Save those edits.
  6. Now you’re ready to write a post with a pop-up footnote. To do so, type the link you want (such as “[5]”) and the text you want to pop up.
  7. Switch to “Text” mode from “Visual” mode. There’s a little tab to do this in the upper right, when you’re composing a new post.
  8. Before the link, add these tags: <span class="ref"><span class="refnum">
  9. Between the link and the text you want to pop up, add these tags: </span><span class="refbody">
  10. And after the text you want to pop up, add these tags: </span></span>
  11. So, for example, my HTML for this [5] One, two, five! footnote reads <span class="ref"><span class="refnum">[5]</span><span class="refbody"> One, two, five!</span></span>

That should do it. If you blog on a non-WordPress platform and you have edit access to your blog’s files, the steps should be virtually the same. You’ll need to add CSS code to your stylesheet and the javascript function to whatever template your blog pages are derived from. The HTML tags will be the same.

And now, your readers will be delighted by their ease of reading and you will be the footnote envy of all of blogdom. [6] Until someone tells you your page looks crappy on their browser or device. Or blog posts look crazy when they arrive as email. Or… well, go ahead and tell me. That’s what the comments are for.

Permanent link to this article: http://ecologybits.com/index.php/2016/04/20/fancy-footnotes-for-the-fearless/

5 comments

Skip to comment form

  1. Simon Leather

    Interesting – I am only just getting to grips to linking my footnotes (as advised by you), but will see if I can manage to rise to this new challenge in my next post (or maybe the one after that…)

  2. Steve Heard

    Very slick, Margaret! Sadly, looks like my platform won’t allow it. I will have to remain green with envy.

    1. Jeremy Fox

      Yes, if your blog is hosted for free by WordPress, they don’t give you access to the .css files. That’s my recollection, anyway.

      I leave it to others to decide if Steve and I are being admirably frugal or eye-rollingly cheap in failing to shell out the cash for access to our .css files. 🙂

  3. Albin Blaschka

    Hi!

    If you have access to the – Part of the template of your site, you have two possibilities:
    You create your own CSS-File and include as an additional style

    or you insert the CSS within – Tags

    .ref {
    position: relative;
    vertical-align: baseline;
    }

    Maybe a little help: http://www.w3schools.com/tags/tag_style.asp

    regards,
    Albin

    1. Albin Blaschka

      In my commemt above, the html – tags have been filtered out, which are quite essential… so I’ll try again…

      If you have access to the > head <– Part of the template of your site, you have two possibilities:
      You create your own CSS-File and include as an additional style like shown here:
      http://www.w3schools.com/tags/tag_link.asp

      or you insert the CSS within > style < – Tags

      > style <
      .ref {
      position: relative;
      vertical-align: baseline;
      }

      >/style <

      regards,
      Albin

Leave a Reply

Your email address will not be published. Required fields are marked *