Footnotes/Endnotes & Blogs

I’ve noticed that several academic bloggers have expressed an interest in using footnotes in their posts and wondered about a plug-in. I’m not aware of any plug-ins (and wouldn’t have a clue how to write one), but an endnote/footnote can be done with CSS.

Scroll down to the end of the post to see an example of endnote or footnotes that are supescripted.

My blog application of choice is TypePad, but this will work in any self-respecting blog application that allow file uploading. I’ve tried to make this as easy as possible; to be sure, there are a dozen ways to tart up this technique. Be aware, however, that the background color serves a “usability” purpose. By using a background color and giving it a little padding, the mouse “strike zone” becomes larger and easier for users to access; the rollover and visited states are also easier to perceive. If you want more variations, see Scholarship on the Web: Managing & Presenting Footnotes & Endnotes; for a good color picker, see WellStyled. Note that a more subtle color choice than the ones in the example would be more effective. The eye is distracted by bright colors in a run of text. I am using a color that is a bit too bright for the purposes of illustration.

The Code

In a plain vanilla editor (avoid MS Word for this) or a lite html editor, copy and paste the code appearing in the bottom of this section, the bits in a different typeface. These lines of gobbedy-gook are CSS class styles that can be used anywhere in the your blog posts that you want a endnote/footnote; the resulting file is a CSS stylesheet. Save the file locally on your computer as blog.css. Note that the file must have three-letter—.css—file extension. The text between the asterisks are comments, showing where you might want to make changes or alter color choices. If your line leading is too tight (in other words, you don’t have much space between the lines of your post text), you may find it more effective to place your reference mark on the text baseline. The comments indicate the lines to be deleted to move the reference mark to the baseline. It’s so very 90s, but it works and is moderately attractive. Finally, beware of making your font-size too small; Firefox tends to make superscripted text much smaller than normal; I've found .7em to be a good compromise.

.refbox a:link
{
vertical-align:super; /* Delete this line to put the reference mark on the text baseline */
line-height:0; /* Delete this line ALSO to put the reference mark on the text baseline */
font-weight: bold;
color: #346784; /* Change the color of the REFERENCE MARK TEXT by changing the number */
background-color:#99FF99; /* Change the color of the REFERENCE MARK BKGD by changing the number */
margin-right:0.1em;
margin-left:0.1em;
padding: 0.1em 0.3em 0.1em 0.3em;
font-size:0.5em; /* You may need to play with the size to get a good proportion */
text-decoration: none;
border:none;
}

.refbox a:visited
{
background-color: #cccccc; /* Change the VISITED color by changing the number */
}

.refbox a:hover
{
background-color: #99CC66; /* Change the ROLLOVER color by changing the number */
}

Uploading the File

Upload the file to your blog area. This process will vary from blog application to blog application. In TypePad, choose Control Panel and then choose Files. In the Upload File dialog box, browse to blog.css, the file that you saved previously, choose it, and click upload.

Notes in the Post

For this part of the process, you’ll need to access your blog from a browser or application that allows you to work with the HTML. There are a lot of different applications that can accomplish this process, but probably the most accessible is Firefox for TypePad users. (Safari does not have a separate HTML window. Although you can put the HTML right in the window, it’s a bit confusing.) Enter the text of your post as usual. Switch to the HTML window. At the very beginning of your post, enter the following—caret marks and all:

<link type="text/css" rel="stylesheet" href="http://nameofblog.typepad.com/blog.css" />

Note that you must replace “nameofblog” with the name of your blog.

OK, now we’re cooking. Time to put in the reference marks for the endnotes/footnotes as well as the anchors in the text of the post. Copy the following:

<span class="refbox"><a href="#fn1text">1</a><a id="fn1ref" name="fn1ref"></a></span>

Place your cursor where you want your first reference mark in the text and paste. Save your post and publish. To view your work, click View Weblog. Looking at it in preview will not give you an accurate idea of your reference mark.

To insert the the second reference, place your cursor at the second location and paste again. This time, however, go back and change all the number 1s to 2s. Your code should look like this:

<span class="refbox"><a href="#fn2text">2</a><a id="fn2ref" name="fn2ref"></a></span>

To insert a third reference, repeat the previous step, changing the 1s to 3s. The code should look like this:

<span class="refbox"><a href="#fn3text">3</a><a id="fn3ref" name="fn3ref"></a></span>

OK, time to place the reference marks in the individual endnote/footnotes. Copy the following:

<span class="refbox"><a href="#fn1ref">1</a><a id="fn1text" name="fn1text">

To place the endnote/footnote reference marks in the note text, place your cursor at the beginning of your first endnote/footnote and paste. Again, to view your work, click View Weblog. Looking at it in Preview will not give you an accurate idea of your reference mark or its operation. To test the anchor, make sure that your endnote/footnote text is not visible and click the reference mark in the text of your post; the bowser window should hop down to the note. Click the endnote/footnote mark in front of the first note; the browser window should pop up to the line of text containing the first note.

To insert the the second reference, place your cursor at the second location and paste again. This time, however, go back and change all the number 1s to 2s. Your code should look like this:

<span class="refbox"><a href="#fn2ref">2</a><a id="fn2text" name="fn2text">

You can go on like this ad infinitum, but it is always best to check your work after a note or two to be sure that you haven’t made any errors. Troubleshooting the code is extraordinarily tedious.

Recap

That’s it. There are essentially five steps: 1) create the CSS stylesheet file; 2) upload the CSS stylesheet to your blog area; 3) reference the CSS stylesheet in the first line of your blog via an HTML window; 4) insert the endnote/footnote reference marks in the text of your post by copying, pasting, and editing the numbers; and 5) insert the endnote/reference marks before the individual endnote/footnotes by copying, pasting, and editing the numbers. Once you get the CSS stylesheet file completed and uploaded, it’s matter of referencing the stylesheet and copying and pasting. So, very elegant!

Prototype Paragraph

By the mid-nineteenth century in the US, most parents and domestic advisors agreed that a “good toy” was educational. By educational, they generally agreed that the toy should impart some intellectual skill (concentration or manual dexterity) or factual knowledge (biographical facts of famous people’s lives, the identification of plants and birds, European capitals, and so forth) conducive to children’s upward or forward progress. In addition to applauding educational toys, parents and observes advocated safe, durable toys and preferred toys that children made themselves to commercial products. While dolls and doll accessories apparently solved the problem of toys for girls, locating toys for boys was a different and difficult matter, and advisors puzzled over the problem of boys and toys. “[T]here seems to be,” one writer baldly wrote, “a paucity of toys suitable for, or rather interesting to, boys.”1 Although authors like Maria Edgeworth and Theodore Dwight suggested the standard, useful remedies—field trips, building models, gardening and carpentry—boys’ toys continued to perplex writers, contradicting their thinking about toys as engendering skills for adult life.2 But as they refined their illustrations and opinions, Dwight and company conceded that toys which promoted mechanic skills no longer applied to the sons of the middle class. In the end, they retreated to advocating manual skills as a hedge against financial misfortune or as an engaging hobby for later life.3

1Mother’s Journal, May 1846, 142; see also Mother’s Monthly Journal, April 1839, 56.

2E. Landells, The Boys’ Own Toymaker: A Practical Illustrated Guide to the Useful Employment of Leisure Hours (London: Griffith and Farran, 1860), vii.

3Paula Petrik, “The Paraphernalia of Childhood: Advice on Toys” from “Playthings for the Republic’s Children: American Culture, Toys, and the Business of Play,” unpublished manuscript.

Comments

[daria]

REu0hr Gra7noI59Unral92Bb7wf

[J. Robert]

I think there should be closing a and span tags around the endnote references lest your whole footnote text be a giant link. You've done this in your source but it was left off the example above for placing the actual endnote text.

[Jeremy]

I put the wrong address. it should work now.

[Paula]

Jeremy, I do think that your CSS solution is more elegant than mine. Much cleaner. And it does get rid of those pesky span tags. Nicely done. I did encounter a problem, however. When I click the endnote text reference to bounce back to the reference in the text, I get a "404 Not Found." Haven't had time to see what's happening in your code.

[Jeremy]

I've used CSS for footnotes by styling only the a tag using an a class="note" to style the foonotes. it uses the same basic CSS that you use, but doesn't require the span tag around the a tag, which means a lot less code. See my example here.
http://clioweb.org/workshop/endnotes/
I also wrote a brief blog post on the technique
http://www.clioweb.org/archives/2005/06/20/css-footnotes/

[Marc]

Fyi, I included this post in History Carnival #10.

[Lisa Roy Vox (The Apocalyptic Historian)]

I must say, looking at the examples over at archiva.net, that, in particular, the CSS pop-up is incredibly artful and really much better than the plugin for Movable Type. I hope that programmers will pay attention to your CSS markup and incorporate it into any plugins that they might create for that purpose.
While the MT plugin serves my purposes for now, I plan to try out your CSS code (for the pop-up) on a longer, more serious post at some point this summer.
I joined the "professional network" on sixapart.com, on the theory that I plan to use blogs in the classroom and am interested in learning more about programming. It gives me access to licenses for Movable Type and free support etc. You might consider doing so as well, if you use MT. Sending this link with the examples and showing the interest in footnotes and endnotes among academic bloggers to Six Apart might result in getting a plugin created by one of their programmers. But just a suggestion obviously.
Thanks so much for sharing this!

[Sherman Dorn]

Thank you!