Stop treating eBooks like paper books

As part of my never-ending quest to banish this skeuomorph from the world…

I was reading a fascinating eBook recently which was, sadly, designed to mimic a legacy / paper book. To the point where the authoring software had hard-coded in page numbers and forced them to be displayed.

Here's what it looked like:

There are two abominations here. There's no need to interrupt the reading experience by bisecting a page and displaying the page numbers. And there's no need to put footnotes at the actual foot of the artificial page.

The whole point of an eBook is to free the reader from the tyranny of the publisher's choices. If the reader wants to justify the text, change the font, hide all footnotes, or has strong opinions about widows and orphans - they can choose a reading experience which suits their needs.

Let's take a look at the code behind the page and how it should been written.

Page numbers

The HTML the book uses to show the page numbers is:

 HTML   ...

   <div class="page-break">end p.16</div>

   <div id="page_16"> </div>

</div>

<div class="page-bounds">

   <div id="acprof-0195171276-div1-8c">

      <div class="para">

         ...

The CSS is:

 CSSdiv.page-break {

    text-align: right;

    line-height: 1px;

    font-size: 10px;

    color: #aca368;

    border-bottom: 1px solid #706650;

    padding: 3px 4px 8px 0px;

    margin: 0px 2px 10px 0px;

}

So, what should it be? I've previously written about the support ePub has for page numbers. And the answer is well documented in the specification.

It's simply this:

 HTML<span epub:type="pagebreak" id="page_123_a" title="123" />

That inserts an invisible pagebreak. The reader can choose to render one page per physical screen. Or they can choose to display a page number. Or they can choose to ignore the suggestion.

Footnotes

Here's the code as presented in the ePub:

 HTML   <div class="para">Not only was that result in disagreement with the other trials made by the committee but also it was the direct opposite of the observations by Adams and De Luc, </div>

</div>

<div class="footnote-inline">

   <div>15. See <span id="xref-acprof-0195171276-bibItem-84c"><a href="content9.html#acprof-0195171276-bibItem-84">De Luc 1772</a></span>, 1:219-221, §408.</div>

</div>

<div class="footnote-inline">

   <div>16. See ...</div>

</div>

<div class="page-break">end p.16</div>

...

There's no need to put footnotes alongside the text. If you do that, you're basically telling the reader that you know better than them how they want to read the book. Most eReaders will pop-up a footnote, making it easy to read and easy to close:

The footnote link should have a specific ePub type, and the footnote itself is semantically represented as an <aside> with it's own type:

 HTML<p>The use of dilithium crystals was discouraged<a epub:type="noteref" href="#n1" id="fn1">1</a>.</p>



<aside epub:type="footnote" id="n1">

    <p><a epub:type="noteref" href="#fn1">1.</a> Scott, M (2257).</p>

</aside>

The footnote text can be placed at the end of the chapter or the end of the book. No need to force it into the reader's eyeline.

There's also similar advice from Kindle.

What have we learned today

Books are magical. And, in my humble opinion, eBooks are better than legacy paper books. I can boost the font size of my eBook rather than having to buy an expensive large-print version. I can navigate by searching, or by semantic features, rather than grubbing around with page numbers. And I can choose to follow a footnote or ignore it as the whim strikes me.

But all that requires the publishers actually understanding how to take advantage of the format.