Footnote image with the word note written on the bottom of the foot

There are a lot of different methods for adding a footnote to non-fiction ebooks. None of them are elegant.


Because most methods require the reader to click on a hyper-linked footnote number, go to the footnote and then press either the back button or another hyperlink to go back to where they were reading.

This totally interrupts their reading experience.

So, when I was formatting an ebook for an Author that had 58 footnotes in his non-fiction ebook, I thought, “There has to be a better way.

It made no sense to me to do the extra work of putting in hyperlinks – one to the footnote and another back to where the person left of reading.

I mean lets get serious, this is the one area where we should not follow the norm of print publishing where footnote(s) can be placed at the bottom of the page.

Helloooooooooooothere are no pages in ebooks

Frankly, having them at the end of the chapter or even at the end of your ebook is a bad idea because if you use a hyperlink, your reader will see some of them before they should.

Not an elegant solution.

So what is the better way?

I came up with having the footnote be immediately under what was being read like this:

This paragraph is talking about something important and I really want to show I know what I’m talking about so I will reference a book, newpaper article or a magazine article.20

20Judith Tramayne, in her ebook “How to Format a Non-Fiction eBook” June 2012.

And then you would continue on with what you’re writing. By doing it this way your reader does not have to take time away from their reading.

Now the code is done in your .html file and your style.css file. The code is below.

The footnote code you put in your ebook’s .html file is…

<h4 />
<p class=”note”><sup>20</sup>Your footnote here.</p>
<h4 />

You will, of course, change the number of your footnote based on how many you have in your ebook.

And this is what you put in your style.css…

.note { font-size: small; text-indent: 0em; margin-right: 15mm; margin-left: 15mm; margin-top: 5pt; margin-bottom: 5pt; }

The above code is telling the ebook reader software, you want the footnote to have a small font, no indentation of text and what margins you want this footnote to have. Now these numbers can be changed to whatever you wish but I found them to look good in my original Kindle, Fire and iPad.

For the Horizontal rule, you put this in your style.css…

hr {width: 75%;}

And that’s it for my elegant solution.

The very best solution would be for e-Readers to have a text alert pop up open with the number and the information. But for now, that’s just wishful thinking.

But if you’re hooked into Amazon, Apple or Barnes and Noble, you might want to tell them about the text alert pop up. I’m mean really, it can’t be that hard to add this ability. It sure would be appreciated by ebook readers and Authors.

P.S. And if you want step by step videos showing you how to EZ-ily format your ebook, please go to my Kindle and ePUB Fiction eBook Course.

P.P.S. If you liked this footnote post, please share it with your Author friends.