Mobileread
Paperwhite & footnote pop-ups
#1  eFTy 10-29-2014, 11:30 AM
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:
Code
<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;}
Reply 

#2  odedta 10-29-2014, 04:11 PM
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.
Reply 

#3  Tex2002ans 10-29-2014, 04:52 PM
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!

Quote 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:

http://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:

http://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):

Code
<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):

Code
<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:

Code
<a href="../Text/Footnotes.xhtml#fn01.9" id="ft01.9">[9]</a>
[...]
<a href="../Text/01.xhtml#ft01.9" id="fn01.9">[9]</a>
Quote 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: "<sup>##</sup>" -> "[##]". 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:

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

Quote eFTy
Code
.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)?

Quote 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.

Quote 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?
Reply 

#4  eFTy 10-30-2014, 05:00 AM
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.
Reply 

#5  eFTy 11-05-2014, 05:08 AM
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.
Reply 

#6  colinsky 11-05-2014, 05:44 AM
Quote 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.
Reply 

#7  eFTy 11-06-2014, 04:45 AM
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.
Reply 

#8  odedta 11-07-2014, 04:45 AM
Quote 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.
Reply 

#9  eFTy 11-07-2014, 10:33 AM
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.
Reply 

#10  Hitch 11-17-2014, 07:01 PM
Quote 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):

Code
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:

Code
<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
Footnote_base_page.png Footnote_Pop-up.png 
Reply 

  Next »  Last »  (1/6)
Today's Posts | Search this Thread | Login | Register