Making footnotes on AO3

by irrationalpie

Summary:

As a reader, I love it when authors have footnotes, but I know the html can be annoying to put together. So here's my guide to it, including a link to a spreadsheet you can use to generate the html you'll need!

Notes:

• Inspired by how to make a footnote in ao3 by Lucifer111

When I went to post this, I saw that Lucifer111 already has a similar guide, which is awesome! I figured my spreadsheet would still make a useful addition.

If you have any questions about how to use this, or how to modify it to do a related thing, please comment and let me know!

I made some edits here and to the spreadsheet as I was getting ready to post; I think everything's in sync, but if something looks off to you please do let me know and I can fix it! The examples shown here are meant to precisely match the examples in the spreadsheet.

This version of footnotes includes both a chapter number, and a note number within the chapter. This avoids duplicates, which would cause problems for people viewing an entire multi-chapter work at once. In order for links to also work in chapter-by-chapter mode, the footnotes will need to be placed in the same chapter they're linked from, either at the bottom of the chapter or in the chapter end notes. This may mean you'll need to move chapter 1's footnotes when you post chapter 2, since one-chapter works usually only have work endnotes!

Here's the general structure of the link that would go in the text:

<a name="return1-1" id="return1-1" href="#note1-1" title="See footnote 1-1">^1-1</a>

And here's the corresponding footnote:

<p>^1-1<a name="note1-1" id="note1-1"></a> This is the handy dandy footnote explanation. ^{<a href="#return1-1">return to text &#8617;</a>}</p>

Note that in each of those, the "1-1" associated with that particular footnote appears four to five times, which is definitely a copy-and-paste bug waiting to happen. So, here's a spreadsheet template:

Spreadsheet template (this link will prompt you to make your own copy, but you can't see anything if you're not logged in)

Viewable spreadsheet (in case you want to look at it while not logged in to a google account)

The end result^1-1 and another link to prove this wasn't a fluke.^1-2

If you're interested in modifying the numbering system for the footnotes, change the "Display" column of the spreadsheet--the ID column needs to stay unique and has certain restrictions (needs to be letters, numbers, -, _ or .), but if you want footnote 1-1 to look like *, or [1-1], that's where you'd change that.

---

That's all you really need to know, but here's a breakdown of what's happening in the html in case you're interested, starting with the link:

<a name="return1-1" id="return1-1" href="#note1-1" title="See footnote 1-1">^1-1</a>

Anything inside a  sandwich becomes smaller raised text, so the "1-1" between them above is what people will actually see. The <a ...> </a> sandwich signifies a link. The id and name specify that this is where we want to return to later, the href points at the id in the footnote, so that we actually go somewhere when the link gets clicked. The title provides hover text

Similarly, in the footnote itself:

^1-1<a name="note1-1" id="note1-1"></a> This is the handy dandy footnote explanation. ^{<a href="#return1-1">return to text &#8617;</a>}

The first  sandwich lets people know they're at the right footnote. The <a ...> </a> right after it doesn't go anywhere (no href) but the name and id are what sent the link in the text to the right spot. Then comes the footnote explanation, and finally another <a ...> </a>, this time linking us to the id of the original link in the text.

The &#8617; becomes the arrow after return to text: ↩.

Notes:

^1-1 This is the handy dandy footnote explanation. ^{return to text ↩}

^1-2 This is a multiparagraph explanation.

This is the second paragraph of it. ^{return to text ↩}