[Jellby]

Originally Posted by SBT

How do you style the foot/end-note list?

Simple markup with backlink, no lists:

<div class="footnote" id="note2">

<p><span class="mark">*</span> Son of Azog. See chapter 1.</p>

<div class="backlink">
<a href="Chapter-17.xhtml#note2b">Back</a>
</div>
</div>

div.footnote {
  margin: 1em 0 1em 0;
  page-break-before: always;
}
div.backlink {
  text-align: center;
  margin: 2em 0 0 0;
}
div.footnote p {
  text-indent: 0;
}
span.mark {
  font-weight: bold;
  margin: 0 1em 0 0;
}

If CSS is unsupported, fallbacks are unpredictable anyway...

How do you style the references?

Bolg<a class="call" href="Notes.xhtml#note2">*</a> of the North is coming

a.call {
  font-size: 60%;
  vertical-align: text-top;
}

It's sometimes difficult to select with a touchscreen, but my reader let's me select link by using the up/down keys. If footnotes are numbered rather than symbols, I just use the number (no parentheses) instead of the asterisk

How do you convert the notes to links?

I add the code using ¬ (or other unusual character) instead of the note number, that makes the code the same for all notes. Then I number the notes with vim, something like:

: let n=1 | g/¬/s/¬/\=n/g | let n+=1

What happens if you include the note itself in the note reference in a TITLE attribute?

As you say, nothing. I don't think it will cause any reader to fail, but the real problem (to me) is that you cannot style the title attribute: no paragraphs, no italics, no links...