EPUB reading on the iPad 3

The search for an EPUB reading app #

For the past couple of years I have been waiting for an ebook reading device to tug at my wallet. It had to support e-ink, and EPUB formats, and not be locked down … and I ended up never buying one.

Four months ago, I finally caved and bought an iPad 3. If I were to use a tablet as an ebook reading device, I might as well get the one with the best screen, I figured.

I am happy to say that the iPad makes a fantastic reading device. It handles font catalogues (bold colours, sharp outlines), journal articles (with their typically tiny font sizes), PDFs, EPUBs, and just about everything I’ve thrown at it with ease*.
*with the right apps/software installed.

EPUB test #

While I’ve tried the iPad with a variety of ebook formats, my interest still lies primarily in EPUB. This post is a look at the iPad as an EPUB reading device, a follow-up to my previous post on EPUB reading software on the desktop and web browser. I will not be working on a similar comparison for Android EPUB reading devices, since I do not have an Android tablet, nor have I found any EPUB reading app in Android comparable to Aldiko as yet.

The test file used here is Fate/Zero Volume 1downloadable here. This is the same file I used in my previous comparison. However, I will not be focusing so much on rendering accuracy this time round, but rather on readability and other issues that editors/typesetters might care about. None of the three EPUB reading apps support @font-face embedding; all three have a variety of fonts for the reader’s picking instead, with font-shrinking/-enlarging options and night-reading mode. As such, I leave the exercise of picking on typeface availability and selection to other more typographically discerning sites.

This comparison takes a look at the following reading apps. Relevant sections of CSS are displayed where appropriate. All three apps are tested with their default themes (although with varying font settings; I no longer remember what the default font is on each).

iBooks #

iBooks is the built-in EPUB-reading app on the iPad, and is arguably the most fully-featured reading app of the three here. It is well integrated with Apple’s online bookstore.

Readmill #

Readmill is a social reading app and a reading community, with an iPad reading app (and apps for other platforms to come). Your Readmill account tracks your reading progress and your text highlights, and allows you to search for other readers’ highlights as well. More guarded readers can choose to read privately and disable these social features.

Stanza #

Stanza is an EPUB reading app with support for a wide variety of ebook formats. It also has desktop versions for Windows and Mac OS, although these are no longer being actively developed.

Reading interface #

The reading interface is arguably the most important part of the app, and is the interface that the reader will be looking at the most. No doubt, each reader will have their own preferred balance between information density and clutter here, so I leave the images to do the communicating.

The images below change on mouse-over to show how the interface changes when the iPad screen is tapped. On mobile devices without hover capability, this will not work; view the images in the gallery to see them. Click the images for a full size view.

iBooks reading interface
iBooks reading interface

Readmill reading interface
Readmill reading interface

Stanza reading interface
Stanza reading interface

Interface #

Stanza has the most distraction-free interface, followed by Readmill, and iBooks. Stanza shows chapter/section progress in the info view, and book progress in the reading view, while iBooks instead shows the number of pages to the end of the chapter in info view.

In iBooks and Readmill, ebooks can be read in either reading view or info view. In Stanza, ebooks are clearly meant to be read only in reading view.

<p> CSS #

Paragraphs are formatted with the following CSS code:

p {
margin: 0 0;
font-size: 14pt;
line-height: 18pt;
text-indent: 18pt;
text-align: justify;
hyphens: auto;
hyphenate-resource: url("../Misc/hyph_en.dic");
}

Line height and text indent are obeyed by iBooks and Readmill, but not Stanza. Auto-hyphenation is noticeably supported by iBooks and Stanza, but not Readmill.

<hr> section divider #

A hr::after {content: '~ ? ~';} section divider is used between sections. This is unsupported in Readmill. The glyph substitution required for the dotted cross (U+205C) mark clearly does not work in iBooks and Stanza, although <hr /> is supported.

First line indent #

A p:first-child {text-indent: 0pt;} selector is used after the section divider to set zero indent on the first line of the section. Again, this is unsupported in Readmill, but supported in iBooks and Stanza.

Image inserts #

iBooks - insert images
iBooks

Readmill - insert images
Readmill

Stanza - insert images
Stanza

The image inserts are nested in a &lt;div&gt; with the following CSS properties:

.inline_img {
float: right;
width: 250px;
max-width: 33%;
border: 1px gray solid;
padding: 8pt;
margin: 0.2em 0pt 8pt 16pt;
}

The <div> borders should not exceed a third of the full text body width; this seems to be respected in Readmill and Stanza, but not iBooks.

Again, here we see that auto-hyphenation is supported in iBooks and Stanza, but not in Readmill, resulting in gaping whitespace between long words in the latter.

Sidenote inserts #

iBooks - sidenotes
iBooks

Readmill - sidenotes
Readmill

Stanza - sidenotes
Stanza

Sidenotes were formatted with the following CSS code:

.footnote {
text-align: left;
font-size: 10pt;
line-height: 14pt;
float: right;
width: 250px;
max-width: 33%;
border: 1px gray dashed;
padding: 8pt 8pt 8pt 8pt;
margin: 0.2em 0pt 8pt 16pt;
}

Once again, max-width is not obeyed in iBooks. We also see that Readmill does not support font-variant: small-caps used for the sidenote header and chapter leader, yet is also the only app that obeys text-align.

Headers #

iBooks - headers
iBooks

Readmill - headers
Readmill

Stanza - headers
Stanza

No text-align property is set for both h1 and h2 in the CSS. Stanza seems to set them with centre alignment, while both iBooks and Readmill use left alignment as default.

Chapter cover images #

Chapter cover images are inserted in a &lt;div&gt; with the following properties:

.img-wrapper {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
max-height: 100%;
max-width: 100%;
}

The inserted image is styled with height: 95%.

The max-width attribute is probably unnecessary, but I typeset this with only a web browser window for validation and wasn’t sure how reading apps would render this back then. In any case, interesting results follow.

A little more info on the images: Act 1 cover image is 342×500px, while Act 2 cover image is 700×1024px. The images below change on mouse-over to show differences between Act 1 and Act 2 cover image rendering. On mobile devices without hover capability, this will not work; view the images in the gallery at the bottom of the page to see them. Click the images for a full size view.

iBooks - Act 1 cover image
iBooks

Readmill - Act 1 cover image
Readmill

Stanza - Act 1 cover image
Stanza

Among the three apps, Readmill is the most consistent in the treatment of full-page images, stretching them to their maximum allowable size. iBooks respects horizontal alignment but does not stretch images. Stanza neither respects alignment attributes nor stretches images.

Contents page #

Typesetting the contents page for Fate/Zero was an exercise in float and text-align support for various desktop readers, and unsurprisingly all of them handled it pretty well. I wasn’t so sure how reading apps would handle them, but it turns out that they do a decent job of it as well. These should be compared to the reference rendering by Calibre.

iBooks - contents page
iBooks

Readmill - contents page
Readmill

Stanza - contents page
Stanza

The contents page is laid out in two columns, with the left column right-aligned (ragged left), and the right column left-aligned (ragged right). Only Stanza fails to follow the required alignments.

Additional features #

There are a couple of features in iBooks and Readmill that I really like, which were absent in Stanza.

Landscape view #

iBooks - landscape view
iBooks

Readmill - landscape view
Readmill

In landscape view, iBooks shows a two-page spread. Readmill shows a single column with the same width as the portrait view.

Return to page #

iBooks - return to page
iBooks

Readmill - return to page
Readmill

If you click away to another page/section through Bookmarks, iBooks and Readmill offer you a link (bottom-left page corner) to return to the page you were previously at.

Conclusion #

I will avoid commenting on which app is the best solely on the basis of which CSS features they support, since the reading experience is much more than a mere checklist of supported features. My personal favourite is Readmill, although reasons for this choice extend beyond rendering concerns. Perhaps a post on this in future.