The tangled toolchain" /> PagetoScreen - Footnotes in Fixed Layout ePUB PagetoScreen - Spacing my Guillemets PagetoScreen - Roundtripping InDesign and ePub re-flowable PagetoScreen - Oh! Please Avoid Those Page Breaks After PagetoScreen - Small Caps in Headings, Titles and Proper Nouns. PagetoScreen - Page Numbers and Progress Bar PagetoScreen - Add a unique Class Name to the Body Tag in your ePub Chapters PagetoScreen - InDesign CC for print and ePub from the Same File? PagetoScreen - Skeuomorphic eBooks - do you miss them? PagetoScreen - Non-Linear Content in Fixed-Layout ePub PagetoScreen - Balancing Long Lines in Headings PagetoScreen - Hello, I’m hosted with a new ISP PagetoScreen - eBook Typography at the London Book Fair 2013 PagetoScreen - Embedding Fonts in eBooks PagetoScreen - High Five for Hyphens PagetoScreen - Character names in a re-fowable Shakespeare Play PagetoScreen - Find / Change in InDesign PagetoScreen - Page Breaking in the eBook PagetoScreen - Please don’t Justify me! PagetoScreen - iBooks3 - spotting some differences PagetoScreen - InDesign experts; Re-Learn InDesign to make eBooks PagetoScreen - Using CODA to edit ePUBs PagetoScreen - eBook Typography - a couple of tweaks PagetoScreen - eBook Typography is in the iBooks Store PagetoScreen - Font Formats for iPad eBooks PagetoScreen - eBooks on iPad - Space available for the content PagetoScreen - The play’s the thing PagetoScreen - From iWeb to Weebly PagetoScreen - ePUB3 Special Effects PagetoScreen - Flowable eBooks: My book on Typography in progress PagetoScreen - Readium testing PagetoScreen - eBook Typography. I’m working on it. PagetoScreen - My ‘Creating eBooks’ seminar at the London Book Fair 2012 PagetoScreen - The Missing Semi-Colon PagetoScreen - Hidden Characters PagetoScreen - Using Dreamweaver to Edit ePUB eBooks PagetoScreen - eBooks or APPS; the publishing choice PagetoScreen - Using BBEdit for ePUB PagetoScreen - HTML5 Validation and the rel tag PagetoScreen - Dear Adobe, why did you drop PDFXML Inspector? PagetoScreen - InDesign to ePUB Problems: Some symptoms and their remedies PagetoScreen - Using Google Fonts PagetoScreen - Using PIE to deliver CSS3 PagetoScreen - I am using HTML5 therefore I am PagetoScreen - iBooks ePUBS now keeps Navigation History PagetoScreen - Adventures with the now Famous HTML5 PagetoScreen - Screencasts are up on iTunes PagetoScreen - If books are part of the web PagetoScreen - Rethinking the Publishing Company PagetoScreen - Adobe Releases Its Own HTML5 Video Player PagetoScreen - O’Reilly Ebook Bundles now include DAISY Talking Book Format PagetoScreen - A Drag-n-Drop App for ePub Files PagetoScreen - How iPad Usage is Shaping Up PagetoScreen - iPad grows in online e-book community PagetoScreen - Oxford English Dictionary ‘will not be printed again’ PagetoScreen - iFactory: Oxford University Press Chooses PubFactory to Develop Oxford English Dictionary PagetoScreen - Why Metadata Matters for the Future of E-Books PagetoScreen - Adobe Digital Magazine Solution Coming in Late Summer PagetoScreen - Flash and the HTML5 tag PagetoScreen - Do It Yourself eBooks PagetoScreen - Adobe Dreamweaver CS5 HTML5 Pack Released PagetoScreen - eBook Indexes & User Interface Features PagetoScreen - First look: Safari 5’s extensions PagetoScreen - Book design is not ebook design PagetoScreen - Create EPUB eBooks with Adobe InDesign PagetoScreen - The iPad needs its HyperCard PagetoScreen - Apple Rolls Out iBooks Feature Page (Eric Slivka/MacRumors) PagetoScreen - E-Book Giveaways Correlate to Higher Print Sales PagetoScreen - New Tool for Rewriting E-Textbooks PagetoScreen - The Wired Tablet App: A Video Demonstration PagetoScreen - AAUP members: ebook output formats PagetoScreen - Javascript ePub Readers PagetoScreen - Applying Mathematics To Web Design PagetoScreen - How to Create ePub Files for Free PagetoScreen - Make Your eReader Look Like a Real Book PagetoScreen - HarperCollins to Sell Enhanced Ebooks for New Apple Tablet PagetoScreen - Apple And eBooks: A Horror Story PagetoScreen - Textbook Firms Ink E-Deals For iPad (Wall Street Journal) PagetoScreen - What Are Enhanced Ebooks? PagetoScreen - Gallery: E-Readers Push Boundaries of Books PagetoScreen - Power Web Site PagetoScreen - eBook appliances at Foyles in London PagetoScreen - University Trial implies that the Kindle is useless PagetoScreen - Vodafone enters UK iPhone market PagetoScreen - Adobe Flash Catalyst Now Available on Labs PagetoScreen - Facebook Now the Internet’s Ultimate Time Waster PagetoScreen - Rumor: Barnes and Noble eReader Coming Soon? Could It Be Called the BNindle? PagetoScreen - World’s first colour e-book reader PagetoScreen - Major Book Publishers Start Turning To Scribd PagetoScreen - Norwegian Websites Declare War On IE 6 PagetoScreen - Announcing the Open Library PagetoScreen - Digital Da Vinci Codes: Thousands of Leonardo’s Papers Go Online PagetoScreen - Current Mashup and API Trends PagetoScreen - Want to be part of a collaborative authored project?  Penguin is asking for you. PagetoScreen - Reuters Issues Guidelines on Photoshop Use PagetoScreen - UK Government to shut 551 websites PagetoScreen - Adobe Photoshop CS3 Released on Labs PagetoScreen - Flipping Hannibal Pages

Footnotes, Endnotes, Sidenotes and Popup Notes

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

Here we see the example of the first footnote in the chapter and the reference number in the text.

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

InDesign dialogue for controlling the display of the footnotes

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

The layout of the footnotes is controlled through the second tab

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

Here we see an enlargement of the page in InDesign. The numbers are now outdented from the left edge of the body text.

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

Endnotes at the end of this chapter.

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

A spread with side notes. You see that the text alignment (left or right), is automatic depending on recto or verso achieved by the paragraph style using Towards the Spine.

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

Pop-up notes using Apple iBooks on the MAC

Image for Footnotes, Endnotes, Sidenotes and Popup Notes

Showing both pop-up and list of notes at the end of the chapter.

I start with a quote from Robert Bringhurst in his The Elements of Typographic Style:

“...the academic habit of relegating notes to the foot of the page or the end of the book is a mirror of Victorian social and domestic practice, in which the kitchen was kept out of sight and the servants were kept below stairs. If the notes are permitted to move around in the margins – as they were in Renaissance books – they can be present where needed and at the same time enrich the life of the page.”

In The Elements of Typographic Style, the notes are held in the side margins – thus putting the information near and even alongside the reference in the text. Robert Bringhurst doesn't need to bother with those little superscript numbers because the supplementary information is very much nearby for the reader.

Still, tradition dictates that in some books, there are footnotes and some there are endnotes (either at the end of the chapter or the end of the book). Putting notes in the side margins is nice if you can afford the space. Let's face it, book design and usability does not often win-out over commercial considerations. Robert Bringhurst's book is exceptional and – it is a beautiful thing. Lots of space for the text to breath.

How I dislike some books that give me less than a centimetre of margin.


Notes: Attention to detail - for Print


These need to be separated from the main body of the text, and are best set with a smaller size and possibly event a different typeface and colour. The idea of any notes is that it is supplementary information and it is entirely optional that the reader even bothers to look, so setting in a style that does not distract from the flow of the reading experience is important.

Footnotes are best numbered with an outdented figure, although (for technical reasons) the numbers are most often aligned to the main text block. These numbers refer to the superscript number within the text itself. Most publishers will favour the numbers to begin again for each chapter, otherwise the numbers could get unweildy (superscript numbers of more than two digits could look ugly). If there are very few references in the text, symbols can be used instead of numbers (* or †).

The listed footnotes will look best when separated from the main body with a partial line; giving the reader a strong clue that these notes are not following on from the text above. Where footnotes are long, they can be split across more than one page, although this will compromise the usability somewhat.


Notes are often placed at the end of the chapter or even at the end of the book (before the index). This approach means that the reader will need to 'hunt down' the note referred to in the text. This usually means that the endnotes will be sectioned by chapter or section.

The advantage of endnotes is that the page composition in the vertical plane is not compromised for the sake of the note space. Where there are lots of references in the text, this must be the best approach. Ridiculous as this seems, we have seen books with footnotes that take more page space than the main text itself!

Sidenotes (sometimes called Margin Notes)

Clearly the page layout needs to provide the space in the margins for this to be an option. Unless this is a large-format book, the measure of the notes (width of the text), is likely to be narrow, so don't design for this option if the notes are long or there are lots of them – and, the book is small.

Sidenotes fall outside the text block – unlike footnotes that will be inside the text block.

Sidenotes do not neccasarily need superscript numbers within the text (and they themselves do not need to be numbered), if it is obvious what the sidenote refers to.


Footnotes with InDesign

InDesign will help us build footnotes and the software will even import the footnotes from Microsoft Word. InDesign users get their very own configuration panel seen in the image alongside here. In this we can set the way the references are displayed in the text (superscript etc), and how the footnotes appear at the bottom of the page. We need a paragraph style set up for the display of the footnotes themeselves and we can (optionally), use a character style for the reference figure in the text.

As you can see from the first example spread the footnote list figure is aligned to the left edge of the text box. You will often see this in the books on your shelves, however, a more attractive arrangement is to 'outdent' these listed figures so that the footnotes are are aligned to the text and the figures are offset from this text box.

InDesign does not provide the means to set footnotes outside the text box, so we need to plan for this by indenting all of the text inside the text box by an amount that we then remove from the left margins. This way we can outdent the footnote numbers. You will see from the image provided here that we are using guides to make sure that these items align. My footnote style is using a 4mm ofset for the numbers and my paragraph styles are using a 4mm indent.

You will notice that there is no option to change these footnotes into endnotes; for this we need a script.

Endnotes with a Script

To do this we need to turn to Peter Kahrel ( who provides many useful scripts. The one that I use here is called 'convert footnotes to (dynamic) endnotes' – meaning that the numbering will change if further notes are added.

As always when using scripts to change content, save your work first! Scripts will often run through a long sequence of actions; you can always use 'revert' (from the file menu), to get back to the previous. You will see from the image here that the endnotes have their own page(s) with a heading that matches other heading styles. You may need to tweak the paragraph styles for the notes and their listed numbers.

Sidenotes with a Script

Once again, Peter Kahrel will help us (please make a donation on his site) with a set of scripts. Using these we can control the width and position as the footnotes are converted to side notes. Each note comes in it's own text fram which is anchored at the reference point. You will see in the example spread given here that I have turned off the numbering. This is an option in the script dialogue. There may be the need to move text boxes vertically, where references are near to one another; some degree of hand crafting will be required.

Notes in eBooks

Footnotes are no good for reflowable eBooks! You don't actually have a page bottom. There are various choices for eBooks depending on the type, the proposed platform and the pBook to eBook workflow.

For the reflowable eBook

When you export from InDesgn to ePub (reflowable), you have an option to convert your footnotes to pop-up notes. This will take the notes from the foot of the page, wrap them in an HTML tag <aside> and add the necessary ePub3 classes in the XHTML code. In fact you will get an attribute added to the hyperlinked number:


and then the footnote reference will be wrapped in the <aside> tag.

The pop-up note reference is supported by Apple in their iBooks app for MACs and iOS on tablets etc. It is also documented that later Kobo devices also support pop-up notes.

Other devices and software that cannot support pop-up notes will simply function as hyperlinks to the list of notes at the end of the chapter or section. InDesign does not do us any favours though, because the list of notes loses it's numbering and the backlink does not work. What can we do about this?

Fixing the ePUB footnotes for all systems

Solving the backlink problem can be done in 2 ways:

We can export from InDesign as for pop-up notes, and then post edit the ePub file by adding the numbers into the notes list. You will find XHTML markup that looks something like the following:

<aside id="footnote-003" class="_idFootnote" epub:type="footnote">
<p class="footnotes"><a class="_idFootnoteAnchor _idGenColorInherit" href="introduction.xhtml#footnote-003-backlink"></a>John Shakespeare’s father, Richard Shakespeare, was a tenant
 farmer, who was in 1550 renting his little farm at Snitterfield,
 four miles north of Stratford, from another farmer, Robert Arden of Wilmcote. 

If you look carefully, you will see that the link tag ends before any content. It should be wrapping around the number. We can add the number before the </a> however, this is not a bulleted list and so we need a space as well. This is a solution, although could be rather an onorous task is you have a lot of footnotes.

Here is another way:

Rather than export from InDesign with the pop-up note option, choose the 'End of Section (Endnotes)' option. This will work properly for those systems that do not support pop-up notes. In iBooks (Apple systems), the hyperlinked number will take us to the notes section at the end of the chapter. If we want to get pop-up notes working on those systems that support it we will need to crack open the ePUB and make some changes.

Editing the ePUB from the Endnotes Version

Once you have unpacked the ePUB (actually I prefer to do this with BBedit – no unpacking required), you can search for:

<a class="_idFootnoteLink

and replace with:

<a epub:type="noteref" class="_idFootnoteLink

If you do this then the pop-up will work BUT you will also see that the notes are still listed at the end of the chapter. Personally I actually prefer this, because we can get a second chance to read through the notes. If you prefer not to see this list of notes, then you will need to wrap each note in the <aside> tag, and we can do this by search and replace but this time using GREP.

Find this:

<div( id="footnote-.+\s+.+\s+)</div>

and replace with


You may also want to remove the horizontal line <hr> above the notes list.

For the Fixed Layout eBook

I did already post an article about this a short time ago. As far as I can tell, later versions of InDesign CC have not provided anything different, so if you have footnotes, then this is what you will get in the fixed-layout ePub, unless you use the 'footnotes to endnotes' script and then follow my instructions to get the hyperlinks.

If you use Peter Kahrel's script to convert footnotes to sidenotes then you will exactly that in the fixed-layout ePub.

Posted on 17 Aug around 9am