EPUB and Kindle friendly endnotes

This is a series of rough and ready irregular posts on how to get Kindle and EPUB formats to work. These are written as I work on real projects that are being edited to be imported into InDesign as XML and formatted using "Map Tags to Styles", and will also be imported into Sigil where a CSS stylesheet will be added (there will be two ePUBs one with CSS suitable for iBooks, Adobe Digital Editions, Sony Reader, and another with a Kindle friendly CSS to be transformed into .mobi format using KindleGen).

The posts should suit people working with academic books, since that is my profession. However, the posts while helping you to make attractive books won't be pretty, since I'm leaving all that for a later date or another person. These notes are scratched out as I work with little styling, and hand-holding left to a minimum. First up endnotes.

ENDNOTES

Kindle and EPUB respond to hyperlinks leading to anchor points in your book in two different ways. The Kindle jumps to the anchor point and makes it the start of your page, whereas an EPUB defines its "pages" when the book is first loaded or when the font size or type is changed, and this is fixed from here forwards. Hyperlinks do not therefore change the flow of pages at all.

In Kindle if you were to make the anchor point in a book your note referent then the first item on the page would be the note number, not the sentence preceding it as you might expect.

Example of text that will work in KINDLE and EPUB:

<a id="noteref1">This is a sentence NOT a paragraph, because paragraphs can run across two or more pages on Kindle and anchoring them might not return the reader to location of referent.</a><sup id="ref1"><a href="#note1">1</a></sup> [SEE REVISION AT FOOT OF POST]

POINT THE BACK BUTTON IN THE NOTES TO <sup id="ref1"> in EPUB but to <a id="noteref1"> in Kindle tag for the reasons explained above.

NOTE: THIS METHOD WILL REQUIRE TWO SEPARATE NOTES LISTS (ONE FOR EPUB AND ONE FOR KINDLE).

KINDLE NOTE LIST MUST FOLLOW THE FORMAT JOSHUA TALLENT ADVISES IN Kindle Formatting: The Complete Guide to Formatting Books for the Amazon Kindle, or similar:

<p class="noind" height="30"><a id="note1"><sup>1</sup></a> Some text here.<a href="#noteref1"><small>[back]</a></p>

<sup> is not essential and in fact might be better left out AND class="noind" REQUIRES A CORRESPONDING PIECE OF CSS p.noind {text-indent: 0em; text-align: left;} GOOD IDEA TO ADD text-align: left BECAUSE long URLs in notes mess up the justification

TECHNICALLY SPEAKING THIS WILL WORK IN iBooks and ePUB readers BUT ePUB does not reflow when a hyperlink is followed WHEREAS Kindle does as explained, SO a sentence might break across two pages in EPUB and there is a danger that the reader will be sent to the page previous to the one that the note referent is on. To avoid this, link directly to the note referent, like this:

<ol>
<li id="note1">This is note 1. <a href="#ref1">[back]</a></li>
<li id="note2">This is note 2. <a href="#ref2">[back]</a></li></ol>

You will notice that I have used an ordered list tag <ol> here in order to number the references automatically. (KINDLE NOTES LISTS CANNOT BE AN ORDERED LIST IF YOU ARE HYPERLINKING TO IT, BECAUSE IT COLLAPSES WHEN LINKED TO AND TURNS INTO A LONG STRING OF TEXT.) Since we will need two different list of notes anyway. It is much cleaner and amends more of itself automatically if notes are added in or out using <ol>. Conceivably once the Kindle list is created you can use various find and replace/GREP functions to do some of the work for you. (e.g. FIND and REPLACE #ref WITH #noteref, a id="" WITH li, etc.)

Advantage of <ol> tag is that it can be easily converted in InDesign to an automated list using paragraph styles

Revision:

Example of text that will work in KINDLE and EPUB:

<a id="noteref1"></a>This is a sentence NOT a paragraph, because paragraphs can run across two or more pages on Kindle and anchoring them might not return the reader to location of referent.<sup id="ref1"><a href="#note1">1</a></sup>

Note, I discovered with Adobe Digital Editions (ADE) that using an <a id=""> tag across a range of text applied the regular blue text with underline that a href adopts. Therefore, we must use <a id="noteref1"></a> or <a id="noteref1">&nbsp;</a> BUT if you use the latter make sure your CSS contains: a {text-decoration: none}


Comments