How do you deal with footnotes?

[SBT]

I'm curious as to how people handle footnotes when converting a text to ebook.

• How do you style the foot/end-note list?
  My personal preference is a <dl> list, formatted so <dt> and <dd> are on the same line. I like it because it has a decent default fall-back if CSS is unsupported.
• How do you style the references?
  I use the number with a right parenthesis, small font, vertical-align top.
• How do you convert the notes to links?
  I tag them as references/notes as they pop up, and then use awk to insert requisite links, numbering, assorted formatting and move the notes themselves to the end of the chapter. What other automated tools exist?
• What happens if you include the note itself in the note reference in a TITLE attribute?
  The TITLE contents are shown as a tooltip box in a browser if you keep the pointer above the element. I know what happens in ePub2 (nothing), but what happens in an iBook or an AZW book? And if I include TITLE attributes in an ePub2 book in an attempt to future-proof it, do I risk readers barfing because of it?

[Toxaris]

I just use endnotes with in the text an anchor to the note (and a link back). I use superscript for the notenumber (both in the reference and in the endnote) and no special formatting otherwise.
Conversion to this is done automatically by the tools I use, I don't have to change anything in most cases.

[John123]

This debate will rage on ...

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

[SBT]

Originally Posted by Toxaris

Conversion to this is done automatically by the tools I use, I don't have to change anything in most cases.

So what tools do you use?

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

[Toxaris]

Originally Posted by SBT

So what tools do you use?

My own.

[DaleDe]

Atlantis will take footnotes and convert them to endnotes including the back links when the ePub is created. This is how I deal with them.

Dale