Footnotes in Fixed Layout ePUB

Image for Footnotes in Fixed Layout ePUB

This works best for our Shakespeare Play

Image for Footnotes in Fixed Layout ePUB

The footnotes are now endnotes on their own page at the rear of the book

If you are an InDesign (CC 2014) user planning to export a fixed-layout ePUB and you have footnotes in your document, you might be dissapointed to notice that there is no option to make these footnotes become popup notes using the ePUB3 standard epub:type.

In the export to ePUB(reflowable) options we can select the popup type, but not for the fixed layout. Your footnotes will remain exactly where they are – on the page. Dissapointing no?

InDesign will expect the footnotes to be in the same XHTML file where they are referenced. There are some settings in InDesign, but nothing will help us convert them to invisible notes that are only seen in a popup. Is there a solution while we wait for Adobe to release another version of InDesign?


Move the Footnotes

We need our references to come off the bottom of the page and be on theor own page at the end of the book.

InDesign does not have any configuration that provides this so we need to use a script. There is one available from Peter Kahrel. On his site he credits others too, but the one you need is called ‘Footnotes to Endnotes’. You can grab it here:

Locate the References in the text

If you locate one of your references in the text you will find an empty hyperlink and no mention of the correct epub:type for the ePUB3 format. We will need to go to the last page in the ePUB to add the correct ePUB3 signals for the eBook format to get the correct message!

So, in the final page we need to have a look at the destination references and where we find this:

<li class="footnotes-numbered"><a id=“_idTextAnchor032"></a>

We need to add the <aside> block inside the list item like this:

<li class="footnotes-numbered"><a id="_idTextAnchor032"></a>
<aside id="footnote-001" epub:type=“footnote">

Not forgetting to close the </aside> tag before the </li>

You will need to number all of your references footnote-001, footnote-002 etc. Yes, I don't know an easy way to do this yet.

The next step is to locate the hyperlinked references in the text. If you have correctly exported a reliable tag name from InDesign, then you can use you editor (I use Dreamweaver) to search for

<span class="reference 

We now need to go through this markup in turn and add the following:

<a epub:type="noteref" href=“dream-116.xhtml#footnote-001">

in the place of the empty <a> tag.

The footnote reference has a number; you need to increment this appropriately.

Finger Friendly Hyperlinks

You may find that removing the superscripted reference number (traditional in book design) and making the whole line into a hyperlink, would improve usability.

So, doing the following:

Instead of this:

<p>To death, or to a vow of single life.<a href=""><span class=“reference">1</span></a></p>

We do this:

<p><a class=“reference” epub:type="noteref" href=“dream-116.xhtml#footnote-002">To death, or to a vow of single life. </a></p>

With some further adjustments to the CSS for the reference class of hyperlink, we can see the result. 

This really is much better that our original superscript numbers. What we have done here could equally apply to the reflowable form of the ePUB3 format.

Note: It is not possible currently to modify the style of the popup text in Apple iBooks.

In other eReaders such as Adobe Digital Editions the hyperlink works as expected, by taking the reader to the notes page.

Posted on 22 Feb around 7pm


Extra words from Obi-wan Kenobi:

Hi Chris,

You can take a look to:

If the InDesign file is correctly prepared (with words underlining char style well applied), after Peter Kahrel’s very clever script launching, I think it’s possible to do something like you explain and like I show in my epub example launching then a second JS. With a personalized pop-up window (maybe probably much more complex than in my “Fanfan la Tulipe” small book).

Obviously, we’ll only need 2 keyboard shortcuts to play the game!

Posted on  02/22  at  09:22 PM

Extra words from Chris Jennings:

Thanks for sharing!
Yes, I see what you mean. If we build our own javascript popup then it may be possible.

My focus is on ‘from Print to eBook’ and so, if a book has many footnotes, then we definitely would need some tools to automate the process. We may also find that Adobe have something happening in future versions.

Posted on  02/23  at  08:52 AM

Commenting is not available in this channel entry.