Page Numbers and Progress Bar

Image for Page Numbers and Progress Bar
Image for Page Numbers and Progress Bar

This is what page numbers and a progress bar looks like in a re-flowable eBook on the iPad.

Image for Page Numbers and Progress Bar

Adding the symbolic page numbers in InDesign. These will NOT be present when exporting to ePub

Image for Page Numbers and Progress Bar

Here are the default page numbers in a fixed-layout eBook with iBooks on the iPad.

Image for Page Numbers and Progress Bar

Export Tagging in InDesign for the object - use 'footer'

Image for Page Numbers and Progress Bar

Page numbers and progress bar on the double spread view

Image for Page Numbers and Progress Bar

Page numbers and progress bar - single page view

Image for Page Numbers and Progress Bar

Page numbers and progress bar on iBooks for MAC

We all expect page numbers in our printed publications, but what about eBooks?

Page numbers in a re-flowable eBook, are kind of odd things, because if we (as readers) increase the font size, the page numbers need to change. Page numbers in a re-flowable eBook need to be dynamic and their display is under the control of the eReader software.

iBooks on the iPad displays the page numbers in a re-flowable eBook in the centre at the bottom of the page with the total number included - like this: '9 of 14'. An indicator bar also provides a clue as to how far along in the book we have reached and this will be visible when we tap to view user-interface elements.

But, what happens in a fixed-layout eBook? Do we get an indication of the current page location? And can we control this within the markup or metadata for the ePub3 standard.

furthermore...

When we view a fixed-layout ePub on the iPad the page numbers are displayed when we tap over the page. The number we are shown is provided from a count of all pages from the cover through to the end. Remember, in a fixed-layout eBook each page is an HTML file.

InDesign to ePub

In Indesign, we create a page numbers by placing a Current Page Number Symbol on the master page. Master page items are ignored when we export to ePub. But even if we bring the page number to the foreground, this will not be transferred to the HTML markup in the ePub package. This means that we need to find another way to put a page number on the footer of each page.

Let's Play Footer

Here is what we are trying to achieve at the bottom of each HTML file in the ePub3 package:

<footer><p class="footertext">12 of 130</p></footer>

Where '12' is a current page and '130' is the total number of pages. We want to avoid adding this by hand, and, it turns out that InDesign adds the name of the HTML file to the title tag. This file name has a number added incrementally, so the fist has no number and then 1 is added for each HTML file in turn. We have already used this information in the previous post here (Add a unique Class Name to the Body Tag in your ePub Chapters).

InDesign and Export tagging

In our work with InDesign we need to pay great attention to how we deal with Export Tagging. Rather than leave InDesign to choose the tag for an object, we should choose one ourselves. Although a suggestion of <div> is given we can choose <footer>. See the image hereabouts. This is an HTML5 element. There may be device compatibilty issues here, so I will attend to this later.

We will need to bring the master page item(s) to the page with 'Override all Master Page Items'. Please see this screencast for a detailed explanation of how to do this.

The result is that each HTML file will have the following mark-up:

<footer>
</footer>

Yes, this is empty, because InDesign will not export the page numbers even if you have brought the master page items on to the page.

Within the head element the title tag will look something like:

 <title>msnd_fl_ex_nv-12</title>

Grepping

We can grab the number within this tag with some GREP. I use BBedit and so here is my GREP to search through all files in the ePub package and add this number into the <footer> tag.

(?s)(<title>.+?)(\d+?)(</title>.+?<footer>)

Here is an explanation of the search syntax:

(?s) - this is a modifier that makes the search regard spaces and breaks the same as any other character. This is followed by 3 bracketed sections which are then stored for us to use in the replace.

(\d+?)- The second bracketed area locates and stores the digits before the end of the title tag.

(</title>.+?<footer>) - this is everything else until we reach the opening of the footer tag.

Here is an explanation of the replace syntax:

\1\2\3\r<p class="footertext">\2 of 130</p>

We are putting back brackets 1,2 and 3; adding the footer text paragraph and including the digits found in the title tag.

This all worked fine for me, and I went ahead and got page numbers at the bottom of the page. Like this:

<footer>
<p class="footertext">12 of 130</p>
</footer>

But there was a little problem in iBooks on the iPad. In a fixed layout ePub on that device, existing page numbers are shown when the user taps over the page. By default, iBooks counts from the cover, so there is a mismatch between the default and the number extracted from InDesign's numbering.

Page-List to the rescue

I resolved this by adding a page-list section to the <nav> area of the toc.xhtml file. This is a valid ePub3 method to create page numbers and can change the default behaviour.

With such a long list of pages (130 or so in my example), this could prove exhausting - but no! GREP solves it for us again, and we need to look at the .opf file for a clue. In the manifest section, we find a long list of all the HTML files, and here is a small example:

<item id="CoverImage" href="CoverImage.xhtml" media-type="application/xhtml+xml" />
<item id="msnd_fl_ex_nv" href="msnd_fl_ex_nv.xhtml" media-type="application/xhtml+xml" />
<item id="msnd_fl_ex_nv-1" href="msnd_fl_ex_nv-1.xhtml" media-type="application/xhtml+xml" />
<item id="msnd_fl_ex_nv-2" href="msnd_fl_ex_nv-2.xhtml" media-type="application/xhtml+xml" />
<item id="msnd_fl_ex_nv-3" href="msnd_fl_ex_nv-3.xhtml" media-type="application/xhtml+xml" />
<item id="msnd_fl_ex_nv-4" href="msnd_fl_ex_nv-4.xhtml" media-type="application/xhtml+xml" />
<item id="msnd_fl_ex_nv-5" href="msnd_fl_ex_nv-5.xhtml" media-type="application/xhtml+xml" />
.......

What we need in the toc.xhtml file is a new section like this:

<nav epub:type="page-list">
<ol>
<li><a href="CoverImage.xhtml">i</a></li>
<li><a href="msnd_fl_ex_nv.xhtml">ii</a></li>
<li><a href="msnd_fl_ex_nv-1.xhtml">1</a></li>
<li><a href="msnd_fl_ex_nv-2.xhtml">2</a></li>
<li><a href="msnd_fl_ex_nv-3.xhtml">3</a></li>
<li><a href="msnd_fl_ex_nv-4.xhtml">4</a></li>
<li><a href="msnd_fl_ex_nv-5.xhtml">5</a></li>
........
</ol>
</nav>

So we start by getting a copy of this into a new document and using the following GREP:

<item id="(.+?-)(\d+?).+?>

replaced with

<li><a href="\1\2">\2</a></li>

Then for those pages without numbers (cover and the half title page), we add by hand together with the <nav> grandparent and the parent <ol>.

This does the trick and we can now see that the pages are synchronised with the device table of contents showing the correct page numbers.

And finally...

Adding a Progress Bar

Since we are now flying the flag for HTML5 in our ePub3 files, we might like to add a progress bar along the bottom of the page. So here we are, this is the markup on page 129:

<progress max="129" value="109"></progress>

We got that on every page with our clever chum - GREP.

and here is the CSS that styles it:

progress[value] {
appearance: none;
width: 80%;
height: 6px;
color:white;
background: white;
opacity:.7;
}
progress::-webkit-progress-value {
background: #0b3a55;
}
progress[value]::-webkit-progress-bar {
background-color: white;
}

Further Notes:

I am using:

  • InDesign CC version 9.2
  • BBedit
  • Tested on iPad / iOS 7 / iBooks 3.2 and iBooks on MAC

Even Further Note:

According to Apple it is valid to have an empty link in the page-list nav element (such as the cover page), however this breaks validation according to the latest validation checker 3.01.

Posted on 20 Mar around 10pm

Tags: