[ghmerrill]

Originally Posted by Hitch

So, each "back" link option, at the foot/endnote is uniquely and distinctly coded, so that the person using it knows which one to click? Is that right?

Hitch

Caveat: I THINK all the code below is correct -- unless I've made a stupid typo. But I know it works since I tested it thoroughly in Sigil and in the Kindle Previewer. So ...

What you're suggesting in my comment seems to be what was my first idea: have an explicit backlink for each citation to the note. That does have certain advantages (but minimal, I think). Then I realized I didn't need explicit backlinks to make the popups work in Kindle (or Epub more generally).

The person doesn't SEE distinct backlinks. They just work because ... er .. that's how they work, as you'll see. And since it's absolutely vanilla HTML, they work in Kindle with popup notes as well. Here are some example templates for the code:

Here's code for footnote 1 in Chapter 1 (in a file Chapter_1.xhtml). It's referencing a note/citation in a file References.xhtml in the relative ../Text directory:

Here's a citation in Chapter_1.xhtml:

In Chapter_1:

^{<a id="Ch_1" href="../Text/References.xhtml#Div_1_target" epub:type="noteref"></a>1}

Here's a citation (footnote 2 in Chapter_2.xhtml) to the SAME note/reference from a different location (Chapter_2.xhtml):

In Chapter_2:

^{<a id="Ch_2" href="../Text/References.xhtml#Div_2_target" epub:type="noteref"></a>2}

Note the only difference is in the <a> element id and the reference to the (second) <div> in the References file.

Then wherever the footnote/reference text is (In this case in a file References.xhtml in the relative path ../Text), the code will look like this:

In ../Text/References.xhtml:

<p id="MyExampleNote">

<div id="Div_1_target">
<div id="Div_2_target">

Footnote text goes here, and here's the backlink to the CH_1 citation:

<a class="link" href="../Text/Chapter_1.xhtml#Ch_1"></a>
</div>
/* and here's the backlink to the Ch_2 citation: */
<a class="link" href="../Text/Chapter_1.xhtml#Ch_2"></a>
</div>
</p>

The key here is that a <div> is just a block marker which provides you with a distinct ID that you can use as a target of a link. And you can nest <div> elements to your heart's content. Each one has it's own backlink to the specific <a>-reference that went to that <div>. And only the footnote text gets displayed (subject, on the Kindle, to their stripping out of various structure, links, and whatever).

Note that the <p>...</p> is one thing that will work as a note structure, but of course others MAY work as well. However, list elements don't seem to result in the desired behaviors. The best approach is to stick with the <p> elements as illustrated or just go with vanilla <div> elements and any formatting code you may want to throw in between them.