[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;}