CSS for Aladore

With the new and improved markup in place (detailed in the last post), I started prototyping CSS to style the ebook.  After exploring many variations, I decided to approximate the style of the original print edition.

First page of Chapter 3.

First page of Chapter 3.

For example, the chapter headings appear about one third down from the top of a new page. This white space reinforces the break and gives space for the large headings. I followed the same pattern, adding a margin-top to the <h2> that marks the chapter headings.  Getting more detailed, you can see in the print edition that compared to the chapter titles, the chapter numbers are slightly larger, have slightly exaggerated character spacing, and have a bit of extra line space. I approximated this in the CSS with font-size: 1.35em, letter-spacing: 0.1em, and line-height: 2.5.

Chapter 3 rendered by the Readium app.

Chapter 3 rendered by the Readium app.

To decide on a font, I balanced what is commonly available, is considered good for reading, and resonates with the original print. I selected Georgia, because it seems very close to the print edition, is very readable, and commonly available on reading devices. The common sans-serif fonts, such as Arial, look too modern and utilitarian for Aladore.

After creating a full set of CSS for the content, I added the style sheets to the EPUB using Sigil. Since the title page and TOC use totally separate styling from the rest of the content, I gave them separate CSS.  This minimizes the file size and simplifies things overall.

We tested this prototype on the three reading devices. Readium on the laptop was the only one that rendered all of the CSS styling. The Nook and Sony Reader did not support some of the details, such as letter-spacing.  The testing quickly identified issues to tweak, setting off repeated rounds of prototyping.

Readium was especially helpful for this process, since it did not involve sending the file to a separate device. However, it is not much different from looking at the XHTML in a narrow browser window and it has the widest CSS support of any current reading app—so I felt like it was not a true test of the ebook. However, one issue that Readium had was splitting the illustrations in two. Both Nook and Sony automatically limit the images to the height of one screen, breaking the text before and after. Image handling is complex and frustrating, CSS styles such as page-break-inside:avoid are not well supported. One approach could be to do the equivalent of what the print edition did when inserting the plates: put each illustration in its own XHTML file, ensuring that there is a page break before and after the image. This would decrease the chance that devices will break the image in half, although it would not guarantee it! I am not satisfied with the solution in the old print edition—its kind of an ugly way to integrate the illustrations, the same for ebooks.

After some more testing, we settled on one version (for now), I will show you some details in the next post.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s