EPUB image formatting

In an earlier post, I popped Aladore’s illustrations into the EPUB using Sigil with out any clever formatting.  If we take a peak at the HTML contained in the EPUB, each image looks like this:

<p><img alt="aladore_01" src="../Images/aladore_01.jpg" /></p>

The HTML is just like a web page, the img tag tells the ereader to display an image and gives the relative location for the file.  In the example above, the ereader looks for an image called “aladore_01.jpg” in the “Images” directory of the EPUB package.  However, you will notice that there is nothing in this set of tags to tell the ereader how how to handle the image.  For example, how big should the image be?  Does the text wrap?  Does it get its own page? etc.

Now, for many ereader devices and applications, illustrations inserted this way will display just fine–the application automatically resizes all images to fit on the screen.  But, unless you actually put something in the tag you can not be sure… Since the average ereader screen is only around 600 x 800 pixels, many of the illustrations I added will likely run off the screen, looking something like this:

badly sized image

Instead, we want the image to flexibility resize to fit any screen.

This is slightly more complicated than it sounds, since it is not just about using the correct HTML tags–you also have to ensure that ereader devices will play nice with them.  Getting it right across platforms is complicated.  For example, EPUB formatting expert Liz Castro explains intricacies of the img tag in relation to iBooks in a post from 2011.

I read a lot of information about how to deal with this issue, but I had trouble finding anyone who clearly and definitely communicated a solution.  So I decided to look inside professionally published EPUBs to see what they were doing–reverse engineering!

This task could be done using Sigil, but there is another tool uniquely suited to browsing through multiple EPUBs and checking out their inner workings–allow me to introduce Calibre:

Calibre, http://calibre-ebook.com

Calibre is a Free software ebook management system–basically it does everything you could possibly want to do with an ebook…  It manages your library and metadata, converts formats, syncs with devices, and has a built in reader and online book search.  But wait there’s more!  Calibre also has a built in feed reader that can download news and RSS feeds and convert the content into an ebook (and send it to your device automatically).  Additional features and modifications can be added via an extensive plugins system. And now, it even has a built in, full featured ebook editor to rival Sigil!

I have used Calibre for many years to manage my ebook collection.  It sounds like a ridiculous number of features… so practically speaking what does Calibre do?  Basically, I would say its like an ebook version of the mp3 “media center” applications we are all familiar with (i.e. like iTunes or Windows Media Center, but open and awesome). When I download a new ebook, I add it to Calibre.  Calibre copies the ebook and puts its into a directory called Calibre Library (in a sub directory for the author and title).  When I plug in my ereader, Calibre recognizes it.  It shows me what books are currently on the reader.  I can copy, delete, or add books.  If I have a ebook that is not in the correct format, Calibre will specially convert it for the device.

The main developer Kovid Goyal started Calibre back in 2006 after he purchased a SONY PRS-500 e-ink reader.  Maybe this is why I like it so much–I am also an SONY reader-reader!  The “libre” in the name stands for Free software, so I have always called it “ca-libre”–but I found out from the history page that this is wrong!  Kovid wants it pronounced “cali-ber”.  I kind of like the wrong way better…

Anyway, back to the purpose of this post: I browsed through my Calibre library and took a look at some well done commercial EPUBs.  Find a nicely formatted book, then click Edit Book to open the built in editor:

calibre editor

Calibre Editing Aladore.

The features and interface are similar to Sigil.  By default, the code view is in the center with a WYSIWYG preview in the right panel.

Surveying my commercial ebooks, it seems there was two main approaches:

1) use small images that will fit on any screen (less than 300 px) and use css styling to center them.

2) nest the img tag inside a div tag and use styles to set the image to a size relative to the div and the div size relative to the screen.

Option one is basically what we already have in the draft Aladore EPUB–except the images I added are slightly too large to fit on many ereader screens.  The advantage of the smaller images is simplicity, smaller file size, and quicker load time on weak devices.  The disadvantage is that it will not look as good on more advanced ereader devices (as screens get higher and higher resolution) or tablets with larger screen dimensions.

Option two is a bit more complex, but is ultimately more flexible.  It removes the risk that images will be partly cut off on smaller screens and ensures that all devices will handle the images in the same way.  It allows us to add larger images providing better quality on devices that support it.  Here is an example of option two looks like in HTML tags:

<div style="text-indent:0;text-align:center;margin-right:auto;margin-left:auto;width:99%;page-break-before:auto;page-break-inside:avoid;page-break-after:auto;"><div style="margin-left:0;margin-right:0;text-align:center;text-indent:0;width:100%;"><p style="display:inline-block;text-indent:0;width:100%;"><img alt="aladore 1" src="../Images/aladore_01.jpg" style="width:99%;"/></p></div></div>

Looks crazy, but it works… We will revisit this soon!

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s