One of the reasons I’m somewhat dismissive of all the fancy HTML5 based stuff in KF8 and ePub3 is because we’re still having problems implementing basic functionality across platforms. (This is more of the kind of thing I mentioned back in this post about details.)
I’m not talking about between file types; I’m talking about the exact same file rendering differently on different devices. That means this issue pertains to you regardless of how many (or how few) platforms you support. Folks buying from Amazon may read the same book on the PC, a tablet, or a phone in addition to the various resolutions and sizes of Kindles. The problem isn’t any better with ePub, even though ePub is supposed to have a consistent standard.
I’ve mentioned my issues with full-page images with Stanza on iOS before, but the same thing applies here. For example, Jim Hines’ Sister of the Hedge and Other Stories (AMZ | B&N).
Let me take a second to say that not only is the writing top-notch (I was a fan of Jim’s writing before we became friends, and I’m glad to say that I’m still a total fanboy of his work), but the interior is extremely well-done. And the cover art is also quite cool – I’d thought it was spiffy when I first saw it on his blog. So I bought it from B&N, downloaded it to my phone via the nook app, and…
WTF? I mean, it’s a nice closeup, but that’s not really the right way to present the cover. And that’s the store’s actual app. So I figured I better be able to tell Jim (which I have, by the by) what was up with his book, so I took at look at it in my Sony Pocket Reader. That’s my default “proofing” reader, because it’s completely lacking in bells and whistles.
This is quite a bit better (the weird distortion is angulation from me trying to hold my phone and reader at the same time), but the bottom of the cover is still being cut off. Strange. Since I was already sideloading it around, I moved it over to iBooks back on the phone…
And it shows up perfectly. Exactly the same file in all three cases, but the three readers all displayed it differently.
The problem, in case you were wondering, was this bit of code:
<p class="center"><img alt="Cover" src="../Images/Cover.jpg" /></p>
Why is that a problem? Because the height and width aren’t explicitly defined. You could do the (relatively complex) SVG code I explained in this post, or skip to the end and just have this:
<img height="100%" src="../Images/Cover.jpg" alt="frontcover"/>
While not perfect (unless your image’s aspect ratio is exactly the same as the eReader’s), it’ll solve the problem in 99% of the cases. And I’d personally prefer having the whole thing on the screen than an unintentional zoom.
Folks, aside from the research, writing this post and formatting it for the blog took about an hour. While these posts are going to be incorporated into the next edition of “So You Want to Make an eBook?”, I’m also sharing these tips and refinements as I come across them. If you find these posts useful, toss a donation into the coffee cups or buy the current edition. Thanks!