Home > TypePad - Cons > How to make real footnotes

How to make real footnotes

In a recent announcement on Everything TypePad, Ben Trott, the co-founder and Chief Technical Officer at Six Apart, announced that TypePad now had the ability to add footnotes…like this: some text with a footnote 1. Is THAT 1 really a “footnote” function? Of course not. Let me show you how to make footnotes that really are footnotes.

Superscript and Subscript

Looking behind the scenes, as far as I am able to tell, all TypePad has done is to add a text formatting button that turns normal font into superscript , which certainly goes a long way in helping to add footnotes, but that is not a footnote per se. In fact, this behavior is very easy to achieve using HTML code, by enclosing text in HTML tags as below:

<sup>SUPERscript</sup>

which then will appear as such: SUPERscript, but that doesn’t make a footnote, does it? Even if you add a superscript in the post and at the bottom of the post, it still does not connect the two in any way.

Page jump

Making a real footnote requires a little bit more: By using anchored text or “page jump” as WordPress calls it, you can make fully functional footnotes linking back and forth between post and footnotes.

At the bottom of this post I have created a section for footnotes. Using page jump and superscript I can jump back and forth between my footnotes and the post text.

Try yourself by clicking this footnote: [1]. In the footnote section, click the link that says “Back to post”. See what happens…

Now THAT would be a true footnote function, and despite TypePad’s claims, this kind of behavior must still be implemented by hand-coding HTML in your post.

How to make footnotes?

Where you want to make the footnote, write the following in HTML view:

<a href="#X" id="refX"><sup>[FOOTNOTE]</sup></a>

Where you want to link back to the post text, write the following in HTML view:

<a href="#refX" id="X">BACK TO POST</a>

The “X” is only used for internal linking. You can replace that with a code of your own choice, e.g. “footnote1″ or “fn1″ or whatever, just remember to keep the “#” and the “ref”. “FOOTNOTE” can be a number or letter or whichever you use to designate footnotes. “BACK TO POST” can be a text of your own choice.

Now THAT makes a real footnote!

Conclusion

TypePad claiming that they now have footnotes is an exaggeration at best and a lie at worst. Real footnotes still require some coding. This post shows you how to do it.

Acknowledgements

I owe this little tip to a Norwegian site with a crash course in using WordPress.

Share this

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to Ma.gnoliaAdd to TechnoratiAdd to Furl

Footnotes

Back to post 1 An example of a footnote. Note that “Back to post” is placed in front. The reason for this is that we in fact are linking to that textline from the footnote above, and the browser will only display some of the last lines before the “Back to post” link, so if we add that line after a footnote that is several lines long, it may not display the full footnote.

  1. Sam
    August 16, 2008 at 9:23 pm

    Thanks for that! I had seen the superscript button, but was still looking for the footnote function. Now, at least I don’t have to look, anymore. :(

  2. August 16, 2008 at 11:49 pm

    Hi.

    Thank you very much for your acknowledgement of my crash course.

    Unfortunately WordPress.com doesn’t have an automatic footnote function, or rater: endnote function as I’m guessing it formally is. However, I wrote a short message to WordPress.com asking for such a function because it would make WordPress.com an even better and more attractive blog service and I was told that my suggestion had been taken into consideration. So, I would guess that if more people send a note to WordPress.com asking for this function they will make it available. (Yes, please do so!)

    Another way to make endnotes in WordPress.com is to write the whole text in Word (probably Open Office as well) and then paste it into the editor by using the paste Word-function in the WYSIWYG-editor. (You will find an icon with a blue W on it in the extended menu.) If you are writing on a text this is handy because Word automatically keeps track of the numbers on the endnotes where you otherwise would have to rename the endnotes manually if you are writing/editing a text in the WYSIWYG editor and make changes in your text that affects the number of or order of your endnotes.

    (Btw: If you’ve not yet discovered http://lorelle.wordpress.com/ I recommend a visit.)

  3. August 27, 2008 at 1:16 am

    I use Blogger. I tried this, but Blogger added some of their own code and made a mess of my blog. I did not notice this, because their preview page is not a true WYSIWYG. Do you know if footnotes are possible with Blogger by using different html, or is Blogger just not capable of footnoting?

  4. August 27, 2008 at 8:26 am

    That’s odd. This is standard HTML code, so it should work. And it does:

    http://tpvswp.blogspot.com/2008/08/how-to-make-footnotes.html

    I did find out though that Blogger messes up the code if you do a preview before saving, so save first, and then preview.

  5. September 18, 2008 at 7:23 am

    Blogger is odd. I have been using the footnotes for a few posts. The things I have noticed are:

    If I post from Edit Html, Blogger does not alter the footnote. I can look at it in Preview and go back to the Edit Html view and Blogger will not alter the footnote.

    If I look at the post in Compose view, Blogger changes the footnote Html to redirect the footnote to the Compose page for that post. I have not tried this when not signed in, so I do not know if this would allow readers to edit my posts.

    If I have posted something, look at it on an Edit page, and go to the Compose view, I need to close the window before it autosaves, because Blogger will have changed the footnote link.

    My way of dealing with this is to finish everything else, use the superscript Html to mark what and where I want the footnotes to be. The last thing I do before posting is to arrange the footnotes and check to make sure that Blogger has not altered the Html.

    One other problem to watch for is using the same number for the “X” markers as I use in near by posts. I use the footnote number and a letter as the marker, because I found that when you are not looking at just the one post (on my blog 3 posts are open on the page, unless an individual post was selected), the footnote will link to another post with the same marker.

    The whole purpose of the footnotes is to simplify things, but it can make them much more complicated in Blogger. I intend to keep using footnotes in Blogger, so it just takes some getting used to, but it has been very frustrating.

    Thank you for your help.

  6. Teck
    September 26, 2008 at 8:56 am

    Thank you for explaining how to make footnotes I copied the source codes
    you provide and it worked like a charm plus you made it more understandable than
    FAQ page does.

  7. November 17, 2008 at 4:43 pm

    Thanks for this. I was able to use in in Blogger, too. I’ve been trying to figure this out for a while.

  8. June 27, 2009 at 9:16 pm

    The source code shows that the id attribute in your example is just a number.
    According to the w3.org they have to start with a letter.

    http://www.w3.org/TR/REC-html40/types.html#type-name

    “ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).”

  9. July 29, 2009 at 8:37 pm

    nicolas,

    Sorry for my ignorance, but what does this mean exactly? Our footnotes have to be:
    A1
    A2
    etc?

  1. September 9, 2009 at 5:02 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 40 other followers

%d bloggers like this: