Footnotes: Best Practices?

[enuddleyarbl]

I'm not sure where to post this question. But, since I was in the Calibre Editor when I messed things up, I figured this forum might be acceptable.

Anyway, I managed to destroy the footnote links in an epub and thought it wouldn't be a problem to re-create them. Unfortunately, I can't seem to figure it out. From what I can see, roughly speaking, the book puts the footnote text down at the bottom of the chapter/file, prefaces it with a paragraph id and a link back to the place in the text where it's called. With most of the extraneous stuff stripped out, that footnote text looks like:

<p id="footnoteid"><a href="#returnfootnoteid"><sup>*</sup></a>the note</p>

Up in the text, the call to the footnote is simply a link to the spot:

<a id="returnfootnoteid" href="footnoteid"><sup>*</sup></a>

But, when I look at W3C's information on footnotes, I find:

https://www.w3.org/MarkUp/html3/footnotes.html

which uses an <fn> element to do the same thing and doesn't have a return function. The equivalent of the above is:

<fn id="footnoteid"><sup>*</sup>the note</fn>

and

<a href="#footnoteid"><sup>*</sup></a>

Of course, I've found other ways to do the same thing:

https://stackoverflow.com/questions/...otnote-in-html

And some references to even more ways that seem to require epub3 which I can't even understand:

https://github.com/kobolabs/epub-spe...kobo-platforms

and

https://www.w3.org/publishing/epub3/...type-attribute

But, for Calibre and my Kobo Forma, what would be the best way to do footnotes? Note that the footnote behavior is different in Calibre's Viewer between the <fn> element version and the supposed original way the book did it (the <fn> "window" seems to show the whole screen from the footnote text up, while the "original" way seems to just show the footnote text.

[enuddleyarbl]

After trying various ways of footnoting, I ran EPUBCheck against the epub. It didn't like any of the <fn> elements: "...element "fn" not allowed anywhere...."

So, I'll be changing those out for the original type of footnote.

[Karellen]

Originally Posted by DaveLessnau

But, when I look at W3C's information on footnotes, I find:

https://www.w3.org/MarkUp/html3/footnotes.html

If you go up a level in that link, you will see that html3 is "Expired"... https://www.w3.org/MarkUp/html3/
I think we are using html5.

As for how to fix the footnotes, I'll leave that for the guru's in the forum

[enuddleyarbl]

I didn't even notice that html3 bit of the URL. Thanks. That explains why I couldn't find anything else on using <fn> elements for it. I found oodles of people complaining about the lack of an easy, one-stop footnote capability in HTML, but it doesn't seem to have been implemented.

[Karellen]

I tend to add my footnotes in the flow of the text, usually directly after the paragraph that requires the footnote. I know, I'll probably be laughed off the forum for doing it this way, but it works for me, and I don't need to be jumping around my novel trying to read references. Plus, general fiction novels that require footnotes are an exception, rather than normal, and there aren't many of them.

But no reason you couldn't place the footnotes elsewhere using the same code.

For the example in the image, this is how I code it...

PHP Code:

Greenland.<a id="p01c06" href="p01c06.xhtml#p01c06a"><sup>1</sup></a> The <em>reality</em> 


PHP Code:

<p class="footnote"><a id="p01c06a" href="p01c06.xhtml#p01c06">1</a> P. Chylek, et al. 2004 


[retiredbiker]

Originally Posted by Karellen

I tend to add my footnotes in the flow of the text, usually directly after the paragraph that requires the footnote. I know, I'll probably be laughed off the forum for doing it this way, but it works for me, and I don't need to be jumping around my novel trying to read references. Plus, general fiction novels that require footnotes are an exception, rather than normal, and there aren't many of them.

If there is anything I can't stand, it is getting to the end of a chapter's actual content and finding page after page of footnotes clogging it up before the next chapter. I much prefer them as endnotes in a separate file at the end of the book. Either non-fiction, or the rare fiction with lots of notes.

But for the odd short footnote in fiction, I really like your approach! I've recently done a few almost like this, but without even coding the <a and <href -- I just stuffed it in after the paragraph. There were, I think, two short footnotes in the whole book.

On paper, you would just glance down at the bottom of the page. So sticking it below the paragraph in an epub worked pretty much the same. Next one I run into, I'll try coding it it your way. No laughter at all.

[Karellen]

Originally Posted by retiredbiker

But for the odd short footnote in fiction, I really like your approach! I've recently done a few almost like this, but without even coding the <a and <href -- I just stuffed it in after the paragraph. There were, I think, two short footnotes in the whole book.

On paper, you would just glance down at the bottom of the page. So sticking it below the paragraph in an epub worked pretty much the same. Next one I run into, I'll try coding it it your way. No laughter at all.

Thanks @retiredbiker

Sometimes trying to click on those tiny links with my sausage fingers causes me to call up the dictionary, highlighting, context menu... everything but the footnote, then when I eventually jump to the footnote, I realise it was nothing worth reading and have lost the flow of reading.

Having it right there as shown in the image, I can quickly glance/read the footnote without fuss and then continue reading without lifting a finger And it does in a small way replicate the pbook treatment of having the footnote at the bottom of the current page.

My CSS if it helps anybody...

Spoiler:

PHP Code:

.footnote {
  display: block;
  font-family: sans-serif;
  font-size: 0.7em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 4em;
  margin-right: 4em;
  text-indent: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  page-break-inside: avoid;
  text-align: justify;
} 


[enuddleyarbl]

It's interesting how changes in book delivery can change book structures. With a dead-tree book, having the footnotes at the foot of the page is really nice. I used to complain about books with endnotes where they were at the back of the book. With an ebook, having endnotes is less distracting than footnotes (as retiredbiker said). But, especially for fiction (few footnotes), I like your solution. And, if I'm going to be messing with the book's code anyway, I might as well put the footnotes where I want them.

EDIT: Also, I like the structure of your actual footnote links. In mine, the <a... parts are structurally different from each other at source/destination. By keeping the id= part in the <a part at both places (as you do), it makes it easier to change the id= and href= points (by moving the appended "a" in each around).

[enuddleyarbl]

So far, the CSS/HTML structure talked about above has been working fine for me. But, I'm playing around with the formatting of a book (Brandon Sanderson's "Warbreaker") and every chapter has a link to a "footnote" chapter about that chapter. So far, that link acts simply as a link. I can't force it to act like a footnote and bring up the pop-up footnote window in either Calibre or on my Kobo Forma. I've reformatted his links to follow the same structure as what we talked about above. But, no joy. I've even tried using an <aside> type of thing (again, no good).

My guess is the "footnotes" are just too big for the pop-up window to handle, so it reverts to just linking. Does anyone know how to force a link to come up in a pop-up windows like regular footnotes?

[enuddleyarbl]

In terms of what was discussed here (on_page footnotes in a pop-up), it looks like I've got things working with <aside> (epub3 only). I found a post that led me to:

<p><a href="file#mynote" epub:type="noteref">footnotesymbol</a></p><aside id="mynote" epub:type="footnote">footnotetext</aside>

Specific to the book I'm working on, that comes out to:

<p class="annotations"><a href="acknowledgements.html#mynote" epub:type="noteref">Annotations</a></p><aside id="mynote" epub:type="footnote" class="footnote"><p>blahblahblahblahblah</aside>

Breaking that up for readability here:

<p class="annotations">
<a href="acknowledgements.html#mynote" epub:type="noteref">Annotations</a>
</p>
<aside id="mynote" epub:type="footnote" class="footnote">
<p>blahblahblahblahblah</aside>

The problem is that the <aside> text is visible in the chapter. As noted before, for one or two short footnotes in a book, that's fine. But, this book has 58 chapters full of "footnote" material.

I can't find a way to hide that <aside> text (I tried "hidden" in various places in the code, but it didn't work). Does anyone know of a way to hide that? If not, I'll work on the <aside> material remaining in its own chapters.

EDIT 1: One site I found said the epub:type="footnote" bit should automatically hide the <aside> stuff. But, it doesn't. Another site said the "hidden" attribute can be used to hide it (i.e., <aside hidden ...), but it also doesn't.

EDIT 2: it looks like I tried testing the hidden attribute with a class= style applied. The class= overrode hidden. I'll play around with it some more.

[Tex2002ans]

Originally Posted by DaveLessnau

I'm not sure where to post this question. But, since I was in the Calibre Editor when I messed things up, I figured this forum might be acceptable.

E-Book Formats > ePub is where you'd post EPUB-specific questions.

People are more likely going to see it there compared to this subforum.

But, many of the people who check that also check here every so often. :P

Originally Posted by DaveLessnau

Anyway, I managed to destroy the footnote links in an epub and thought it wouldn't be a problem to re-create them. Unfortunately, I can't seem to figure it out.

For everything Footnotes, I'd highly recommend reading through the topic:

• 2021: "Big margins in Kindle footnote pop-up"

especially my posts where I:

• break down simple code (that works everywhere)
  
  • Post #11 + Post #9
• describe the EPUB2 + EPUB3 methods
  
  • Post #9 + 2019: "Epub3 Foot- Endnotes"
• describe the advantages of bottom-of-file footnotes vs. separate-file endnotes
  
  • Post #13

Originally Posted by DaveLessnau

So far, that link acts simply as a link. I can't force it to act like a footnote and bring up the pop-up footnote window in either Calibre or on my Kobo Forma.

I haven't tested "popup footnotes" in a while, but the standard/simple code will work.

But how the footnotes are displayed? It's all device-/app-dependent:

• On some devices, the popup may only show the 1st paragraph, you may have to click to jump to read the rest.
• Others use heuristics to guess when footnote 1 ends and 2 begins.
  
  • Kindles
• Others display footnotes in a "footer". (Similar to a printed book.)
  
  • KOReader
• [...]

If I remember correctly, to detect popup footnotes, Calibre's Viewer looks for at least one of these:

• EPUB3 footnote code
• a back/forth link
  
  • <sup>
• and/or a few specific class names.

(I haven't tested/dug into the code in a very long time.)

Originally Posted by DaveLessnau

But, when I look at W3C's information on footnotes, I find:

https://www.w3.org/MarkUp/html3/footnotes.html

which uses an <fn> element to do the same thing and doesn't have a return function. The equivalent of the above is:

<fn id="footnoteid"><sup>*</sup>the note</fn>

and

<a href="#footnoteid"><sup>*</sup></a>

Eh? I've never heard or seen <fn> in my life.

(Seems like it was a part of the never-accepted + never-to-be-used HTML 3.0, back in 1995.)

I would strongly recommend NOT using such "HTML" tags, since it's completely non-standard.

Best to just:

1. KISS (Keep It Simple, Stupid) with basic links back/forth.

2. Use EPUB3 footnote code:

<aside epub:type="footnote">

(For more details, see the topics linked above.)

- - -

Technical Side Note: Soon after the transition from EPUB2->EPUB3, the IDPF merged into the W3C, and began working together to create CSS3 Paged Media.

The problem (back during EPUB2) is HTML is mostly focused on Web content (which can infinitely scroll down), NOT Print (which has pages).

Print / Books have things which make no sense in a scrolling, web-based presentation, like:

• Headers/Footers
• Page Numbers
• Widows/Orphans
• Left/Right pages (Two-page spreads)
• [...]

And books + Desktop Publishing (DTP) programs, for decades, have had lots of advanced functionality like:

• Hyphenation
  
  • See 2022: "Help with strange use of span tags" where I described some of the latest CSS4.
• Top/Bottom floats
  
  • 2020: "Kindle Previewer 3.40 - 64bit, SVG text, snap-block"
    
  • 2020: "Remove empty space at the bottom of page before figure"
    
• [...]

Publishers were coming up with all sorts of markup and workflows, which were completely incompatible with each other + the larger web/browser ecosystem.

Getting this stuff merged into HTML5 + CSS3/4 will allow it to be more compatible across all sorts of browsers/programs.

If you want to read a lot more about that + the bleeding edge HTML+CSS stuff, you can read:

• PagedJS.org
  
• CSS3 Paged Media
  
  • Dealing with left/right pages, widows/orphans, etc.
• CSS3 Generated Content
  
  • Dealing with headers/footers, footnotes, etc.

Side Note: This is one of the reasons why IDPF decided to merge into W3C, making EPUB3 follow closer and closer to HTML5 + CSS3.

(Instead of tackling all these book-/print-specific things in crazy, non-standard ways... as was happening from the 1980s->late-2010s.)

Side Note #2: But be warned, a lot of the bleeding-edge stuff described there isn't even supported yet.

This is stuff that will take many years to even trickle down to a portion of the devices out there.

In reality, there are still a ton of older devices, so you'll have to keep in mind code that works well across everything.

For example, just last month, I wrote about horrible footnote code (Google Docs) + auto-generating numbers via CSS3 counters:

• 2022: "Footnote numbers have gone AWOL"

Instead, for maximum compatibility, it's probably best to just bake the numbers into the HTML itself...

[Tex2002ans]

Originally Posted by DaveLessnau

In terms of what was discussed here (on_page footnotes in a pop-up), it looks like I've got things working with <aside> (epub3 only).

Ahh, I was in the middle of typing my entire behemoth before you posted this.

Originally Posted by DaveLessnau

The problem is that the <aside> text is visible in the chapter. As noted before, for one or two short footnotes in a book, that's fine. But, this book has 58 chapters full of "footnote" material.

I can't find a way to hide that <aside> text (I tried "hidden" in various places in the code, but it didn't work). Does anyone know of a way to hide that? If not, I'll work on the <aside> material remaining in its own chapters.

Give it up.

It's not smart trying to hide footnotes via CSS like:

display: none;

or:

visibility: hidden;

This will cause lots of other bugs/headaches for you. See:

• 2014: "Hidden headings/links don't work in iBooks?"
• 2018: "Hiding endnotes after the last page of an epub2"

* * *

Side Note: A few weeks back, I did run across a DAISY webinar recommending to mark an endnotes file with linear="no", but that has issues as well:

• 2016: "Does *anything* support linear=no?"

See that topic for just one example.

Hint: Not much has changed since 2016.

There are a tiny bit more apps that support linear="no", like Thorium, but it's still a mess and will cause more problems than it "solves".

It would be "better" than messing with display/visibility though...

So this is how I would rank them:

• My recommendation: Don't mess with display of footnotes/endnotes.
• Moderate/Strong against: endnotes file with linear="no"
• DO NOT ATTEMPT AT ALL: display: none; or visibility: hidden;

Originally Posted by DaveLessnau

EDIT 1: One site I found said the epub:type="footnote" bit should automatically hide the <aside> stuff. But, it doesn't. Another site said the "hidden" attribute can be used to hide it (i.e., <aside hidden ...), but it also doesn't.

EDIT 2: it looks like I tried testing the hidden attribute with a class= style applied. The class= overrode hidden. I'll play around with it some more.

Give it up. Trying to do this may "fix" it in some apps but completely break it in others.

This may only be possible if you are targeting a very specific app in a very specific app store. (Or if you are creating this ebook only for personal usage.)

If you're trying to put this EPUB up for sale across the actual stores, this won't work across devices/apps.

Side Note: And again, I will reiterate what I said in 2013...

What's the big deal of footnotes sitting at the end-of-chapter/bottom-of-files?

How the heck do you read physical books? Do you see the footnotes at the bottom of the page and fling the book out the window?

No, you just skim your eyes right over (or turn the page), or jump to the next chapter, and move on.

[enuddleyarbl]

@Tex2002ans: Thanks. I'll look over those links and recommendations you posted. But, I think I'm going to end up following your advice of "give it up" (at least for my playing around with this book's code). I feel like I'm playing whac-a-mole or with Matryoshka dolls. Every time I think I've solved one problem, another pops up.

[davidfor]

Originally Posted by DaveLessnau

So far, the CSS/HTML structure talked about above has been working fine for me. But, I'm playing around with the formatting of a book (Brandon Sanderson's "Warbreaker") and every chapter has a link to a "footnote" chapter about that chapter. So far, that link acts simply as a link. I can't force it to act like a footnote and bring up the pop-up footnote window in either Calibre or on my Kobo Forma. I've reformatted his links to follow the same structure as what we talked about above. But, no joy. I've even tried using an <aside> type of thing (again, no good).

My guess is the "footnotes" are just too big for the pop-up window to handle, so it reverts to just linking. Does anyone know how to force a link to come up in a pop-up windows like regular footnotes?

I don't know about the calibre viewer, but, that is definitely the case for footnotes on Kobo for kepubs. The specs for it are in https://github.com/kobolabs/epub-spe...kobo-platforms. And that includes a maximum of 5000 characters. After that, it gets treated as a link. You might be able to reformat so that only the first paragraph or title or something is seen as the footnote. There has been plenty of discussions about how footnotes work in kepubs in the Kobo forum over the years.

And of course, for epubs, Kobo does not do footnote popups at all. They are all treated as links.

[theducks]

Calibre's Viewer and many others that run on a PC are based upon web browsers.
THEY forgive way too many deviations from EPUB limitations.
All the experts will tell you: Test on the target devices..

Just because it looks fine in Calibre , and it validates, does not mean you did not use something in your code that brand X ignores or gets wrong.

RMSDK was famous for ignoring the whole stylesheet if it had an error in one place.