Paperwhite & footnote pop-ups

[eFTy]

Hello. I've recently started to work on ebooks and stumbled into the mess that is footnotes.

So, after a lot of browsing and a lot more trial and error I came up with a decent but not perfect solution to making pop-up footnotes work on the Paperwhite.

For reference, I'll list here what I've found to work:
-footnotes are stored in a separate file at the end of the book;
-each has its own paragraph, with custom styling set up in the main css file;
-each footnote needs to have a link back to the main document which may contain the id;
-in the main document where the link to the footnote is found, the anchor text must be in a separate a tag;
-between the anchor tag and the link tag there may not be any other code (like i or span);
-between the two tags there has to be more than just space (whether it's &nbsp or * - doesn't matter). A single letter will suffice.
-between the two tags you may not have too much text. It usually stops working if you have a full sentence between them, but I've also had a couple of times when, despite placing the anchor tag at the beginning of the phrase, it didn't work because the phrase was too long;
-in order for the pop-up to display -only- the one footnote linked to (instead of a massive wall of text with all of them), you need to style in a page break after each footnote (page-break-after:always);
-formatting inside the pop-up footnote works (you can italicise words, for instance), BUT embedded fonts will NOT work.

This works fine and dandy so far on all the ebooks I've made and tested on my paperwhite.

Unfortunately, however, if you view these ebooks on other readers, you get unnecessary spreading of footnotes over multiple pages, and this becomes a problem when you have more than just a few (for instance if you want to look for a particular footnote and then go to its location in the book).

Thus I come to the reason of my post here: what am I missing? I really hope there is a way to work in these pop-up footnotes without using that page-break code. And since I've seen that this forum has a metric ton of knowledgeable and helpful people, I'm hoping you guys can help me out.

edit: May as well add some sample code that I use:

<p>Main text that contains footnote link. <a id="note-X-loc">This is</a> how it looks. <a href="../Text/footnotes.xhtml#note-X"><sup>X</sup></a></p>
<p>This is what happens when there's <i><a id="note-Z-loc">ita</a>lics <a href=""><sup>Z</sup></a></i>.</p>

<p class="note"><a href="../Text/chapter-Y.xhtml#note-X-loc" id="note-X">X</a> - footnote text</p>

.note {page-break-after:always;}

[odedta]

Isn't that the only way to go if you're having footnotes on epub these days?

aside is not working on most devices as far as I know.

[Tex2002ans]

Welcome welcome. Fantastic first post! I like you already! (Large, detailed posts are my cup of tea!).

I also see you have done your homework, and not just posted "How do I do XYZ topic that has been covered about a thousand times and beaten to death about once a week".

Keep up the great work!

Originally Posted by eFTy

Hello. I've recently started to work on ebooks and stumbled into the mess that is footnotes.

We also had a huge chat on Footnotes here:

https://www.mobileread.com/forums/sho...d.php?t=225045

Just a few weeks ago, I also expanded my footnote examples in this topic to include two more "explicit" footnote naming conventions:

https://www.mobileread.com/forums/sho....php?p=2950664

My usual (footnotes at the end of each chapter) (Advantages: really easy to read, really easy to edit, easily copy/pastable to a website):

<a href="#fn9" id="ft9">[9]</a>

[...]

<a href="#ft9" id="fn9">[9]</a>

Slightly more explicit (this would ensure that a conversion to another format using Calibre/other tools, or merging/splitting chapters, will most likely not break links):

<a href="../Text/01.xhtml#fn9" id="ft9">[9]</a>

[...]

<a href="../Text/01.xhtml#ft9" id="fn9">[9]</a>

or an even more explicit naming convention like this:

<a href="../Text/Footnotes.xhtml#fn01.9" id="ft01.9">[9]</a>

[...]

<a href="../Text/01.xhtml#ft01.9" id="fn01.9">[9]</a>

Originally Posted by eFTy

May as well add some sample code that I use: [...]

Hmmm... any specific reason why you split the return link into two parts? Why not just encompass the href and the id all in one <a>?

This also seems like it would avoid all of your problem of "having too much text" between the tags, or having italics or spans in between the links and having them break.

Unless I am just going crazy. (Which could be entirely possible!)

Other Note: I am a proponent of the non-superscript footnotes, surrounded by brackets: "^##" -> "[##]". This allows people on touch devices to much more easily press on a footnote than trying to press a tiny superscript number. There is also the argument that it makes it more readable (think of someone with poor eyesight. A tiny font will be harder to read). Also, you won't get any of those dastardly line-height problems that occur with superscripts.

We had a nice chat about that here:

https://www.mobileread.com/forums/sho...d.php?t=241177

Originally Posted by eFTy

.note {page-break-after:always;}

Hmmm... what occurs when you have footnotes that are multiple paragraphs long? Wouldn't this sort of code page break after the first paragraph?

IF you wanted each footnote on its own page, wouldn't it be better to go with a page-break-before (and come up with a different class, like a "note2" for subsequent footnote paragraphs?)?

Side Note: I don't understand this whole mentality of each footnote on its own page, it makes zero sense to me. What is the big deal with seeing a "large wall" of text... isn't that what you are doing when you read a book? Or are we going to now split each paragraph into its own page (because people have small attention spans nowadays)?

Originally Posted by eFTy

Thus I come to the reason of my post here: what am I missing? I really hope there is a way to work in these pop-up footnotes without using that page-break code. And since I've seen that this forum has a metric ton of knowledgeable and helpful people, I'm hoping you guys can help me out.

Hmmmm... well I don't have a paperwhite to test on, so I haven't seen these pop-up footnotes in person, but I always just believed they were heuristically detected (using magic only known to Amazon). As long as you keep your footnote code nice, clean, and consistent, you shouldn't run into any problems with it.

I don't believe you even have to use any of that page-break stuff to get the pop-up footnotes to work on Amazon's devices.

Originally Posted by odedta

aside is not working on most devices as far as I know.

Yep yep, aside is EPUB3 functionality. I am not too sure how well many of the EPUB3 functions transfer over through -> KindleGen -> KF8.

Anyone have any test results for that?

[eFTy]

Thanks for the long & interesting reply, Tex.

I think my post may have been unclear, however. I don't mind having all footnotes on the same page (though I do prefer separate footnote file to having them at the end of each chapter; I'd rather they be seen only when the user wants to see them, and if there's a lot of them it'd be disruptive I think). I don't want more than one footnote to be displayed in the pop-up when the user 'clicks' a footnote link. Without that page break the pop-up simply displays as many paragraphs (from as many footnotes) as it can possibly fit in there (without even a page-break between them). When the page-break is added, the footnote work perfectly, even the little window is only as big as the text requires it to be (instead of covering most of the screen).

The problem is Kindle's guessing approach to determining what is a footnote (and thus gets displayed in the nice pop-up that everyone seems to love). That's also why I move the anchor tag back from the link (otherwise it will just function as a regular link, it won't activate the pop-up).

I was hoping someone here could help with a way to avoid using that page-break between footnotes.

[eFTy]

I felt I should probably add to the initial post that formatting (like italics) does work inside pop-ups, however embedded fonts will NOT work. The font used is whichever device font was last chosen by the user.

So if you open the book and set your font to Palatino, for instance, everything will be Palatino. You then switch to Publisher font, the book will work normally but the pop-up text will still be Palatino. If you then switch to Futura, both the book and the pop-up text will be rendered in Futura. If you then switch again to Publisher font, the pop-up text will remain Futura.

[colinsky]

Originally Posted by odedta

Isn't that the only way to go if you're having footnotes on epub these days?

There is an advantage for epub in keeping footnotes within/at the end of each chapter rather than in a separate file at the end of the book, as there may be a loading time penalty when switching between those files and back to the original location; within the same file is basically instantaneous on most readers.

[eFTy]

While that is true (and I'm starting to think I'll probably end up making epub & mobi different with the footnotes), that doesn't really help me with the paperwhite pop-ups. Since I've yet to find a solution that doesn't involve the page-breaks, the footnotes have to be at the end of the book, otherwise after a chapter with 10 notes you'd have to annoyingly turn 10 extra pages before you get the next chapter.

[odedta]

Originally Posted by eFTy

While that is true (and I'm starting to think I'll probably end up making epub & mobi different with the footnotes), that doesn't really help me with the paperwhite pop-ups. Since I've yet to find a solution that doesn't involve the page-breaks, the footnotes have to be at the end of the book, otherwise after a chapter with 10 notes you'd have to annoyingly turn 10 extra pages before you get the next chapter.

@colinsky: What eFTy wrote is exactly the reason I'd opt for footnotes at the end of the book. Personally I don't like those old and slow devices and I think that who ever has one should get a new one, it's not like they are expensive and they are much more capable.

[eFTy]

Another interesting tid-bit I've found with pop-up footnotes.

Sometimes, Kindle adds a line break in the middle of the footnote text instead of a regular blank space (and I've made sure it's just a white space and not some random invisible character by deleting and retyping).

I've found this can be solved by replacing the troublesome space with &nbsp; or * - both seem to work.

[Hitch]

Originally Posted by eFTy

Another interesting tid-bit I've found with pop-up footnotes.

Sometimes, Kindle adds a line break in the middle of the footnote text instead of a regular blank space (and I've made sure it's just a white space and not some random invisible character by deleting and retyping).

I've found this can be solved by replacing the troublesome space with &nbsp; or * - both seem to work.

I don't mean to be dense, but we haven't had to add anything "special" to make pop-up footnotes work with Mobi format on the PPW. We make the footnotes the same way we've always made them, with two-way linking, and they work fine on my PPW.

Here's the coding for this footnote (in context):

The messenger pressed on, carrying letters from the Virginia Colonel to Cherokee headmen in Chota.<sup><a href="../Text/end.html#aa1" id="bb1">1</a></sup>

And here's the coding for the footnote itself:

<p class="note1"><a href="../Text/chap01.html#bb1" id="aa1">1.</a> Chapter title taken from Dragging Canoe, speaking through loyalist William Thompson to Alexander Cameron, November 14, 1776, CO 5/94.</p>

...and I've attached screenshots of the results. There's no fancy here. Just footnotes. Nothing more.

Hitch

[eFTy]

Thanks for the help, Hitch, but I've just tried making the code exactly like yours and I still get the text from multiple footnotes inside the pop-up. I even added that period after the footnote mark. The only difference are the tags - I use note-X-loc for location and note-X for the note itself.

I'm using a PW2 with fw 5.4.5.1, if that has any relevance.

What's your styling for 'note-1'?

edit: On the other hand, once I add the page-break back in, the footnote seems to work perfectly. Without moving the anchor tag ahead of the footnote link. This is weird. It wasn't working before and now it does because the <sup> tag is outside the link and I added a period? :/

[Hitch]

Originally Posted by eFTy

Thanks for the help, Hitch, but I've just tried making the code exactly like yours and I still get the text from multiple footnotes inside the pop-up. I even added that period after the footnote mark. The only difference are the tags - I use note-X-loc for location and note-X for the note itself.

I'm using a PW2 with fw 5.4.5.1, if that has any relevance.

What's your styling for 'note-1'?

edit: On the other hand, once I add the page-break back in, the footnote seems to work perfectly. Without moving the anchor tag ahead of the footnote link. This is weird. It wasn't working before and now it does because the <sup> tag is outside the link and I added a period? :/

Y'know, you're the third person that's asked me for assistance on this--folks that have notes that don't pop-up--and I wish I had a great answer. Here's my super-secret answer for the CSS for note1:

.note1
{
margin-top: 0em;
padding-left: 25px;
text-indent: -25px;
text-align: left;
}

Seriously. That's it. Note, note1 and note2 all have the identical coding; in that book, they existed as multiple levels of indented footnotes. That's it. No breaks, no fancy coding. They simply work. That particular book, I chose because it has everything under the sun--fonts, sidebars, images, captions, footnotes, you-name-it. I can only assume that there's something, generally, that we do--and seriously, I don't know what it is--in the CSS or...? that somehow makes Amazon's devices simply work. I'd love to be the end-all be-all of eBook-making, and say "here's the answer," but...we just make them the way I think that they ought to work (as simply 2-way footnotes, that's it), and they do.

Sorry: I wish I could be more helpful.

Hitch

[eFTy]

My footnotes DO pop-up, they just garble together text from multiple footnote <p> tags if there's no page-break. Something like this:
"1 - footnote text 1X - footnote text XIII - footnote text III"

The problem with popping up was when I kept the <sup> tag inside the <a> tag. At least, I think that's it, as I don't see any other difference between my code and yours.

I thought I'd try contacting amazon support, but after all the stories I've read on that, I have a feeling it'll be worse than useless...

[DaleDe]

Originally Posted by eFTy

My footnotes DO pop-up, they just garble together text from multiple footnote <p> tags if there's no page-break. Something like this:
"1 - footnote text 1X - footnote text XIII - footnote text III"

The problem with popping up was when I kept the <sup> tag inside the <a> tag. At least, I think that's it, as I don't see any other difference between my code and yours.

I thought I'd try contacting amazon support, but after all the stories I've read on that, I have a feeling it'll be worse than useless...

You missed what hitch said. When you have footnotes that are near each other and might appear on the same page assign them to different but identically coded CSS class entries.

Dale

[Hitch]

Originally Posted by DaleDe

You missed what hitch said. When you have footnotes that are near each other and might appear on the same page assign them to different but identically coded CSS class entries.

Dale

Dale:

Actually, that's not what I meant, although I thank you for making the effort to speak Hitch. I realize it can be challenging. We have different classes of footnotes, not to cause the correct breaks, but because this client did--she had footnotes with different levels of indent (don't get me started).

As far as I know, what I said is true: we don't do anything fantastic. At this moment, all I can say is...I promise to use this footnoting superpower only for good?

Seriously, are you SURE you are doing your FN the same as we are?

Hitch