So You Want to Make an eBook? : Full Page Images

ebook_cover_200I recently complained about the ability to both provide full-screen cover images and to provide full images, since it appears that Stanza for the iPhone does not – and probably will not – support SVG.

Again, my big thing is cross-platform compliance, and that’s where I’m running into trouble. Putting your image in an SVG “wrapper” will let you zoom it in and fill the screen. That code is pretty straightforward:

<svg xmlns="https://www.w3.org/2000/svg" 
xmlns:xlink="https://www.w3.org/1999/xlink" 
version="1.1" 
width="100%" 
height="100%"  
viewBox="0 0 497 765" 
preserveAspectRatio="xMaxYMax meet">
     <image width="497" height="765" 
xlink:href="images/frontcover.png"/>
</svg>

In this case, it’s for an image 497 by 765 pixels (hence the viewbox size). Do note the differences – it’s image not img, and xlink:href instead of src. The problem is, not all readers support SVG. There is a solution, but it is still slightly flawed. The solution is the switchstatement. (You will find references to the epub:switch statement, but epubcheck doesn’t seem to like it, so I use ops:switch here.) Each line that begins with a < is a new line.

<ops:switch 
xmlns:ops="https://www.idpf.org/2007/ops">
     <ops:case 
required-namespace="https://www.w3.org/2000/svg">
          <svg xmlns="https://www.w3.org/2000/svg" 
xmlns:xlink="https://www.w3.org/1999/xlink" 
version="1.1" 
width="100%" 
height="100%"  
viewBox="0 0 497 765" 
preserveAspectRatio="xMaxYMax meet">
               <image width="497" height="765" 
xlink:href="images/frontcover.png"/>
          </svg>
      </ops:case>
      <ops:case required-namespace="https://www.w3.org/Graphics/PNG/">
           <div id="frontcover2a">
                 <img width="497" height="765" 
src="images/frontcover.png" alt="frontcover"/>                   
           </div>
      </ops:case>      
      <ops:default>
           <p>Front cover</p>
      </ops:default>
</ops:switch>

What is supposed to happen is that the reader only displays the first renderable option. If it can display the SVG, it shows that. Otherwise, it shows the image. Otherwise, it shows the text as a fallback. My Sony Reader does this wonderfully (and usually, if my PRS-300 will do it, so will everything else).

The problem is that the two biggest ePub readers for the iPhone render it incorrectly. Stanza skips over the SVG properly and shows the image… but also shows the text afterward. iBooks is just as bad – it shows all three versions. It is important to note that this behavior is not up to spec.

Unfortunately, that means we still have to cope with it.

So here’s my interim solution. For your front cover, use a simplified version of the switch, like this:

<ops:switch xmlns:ops="
https://www.idpf.org/2007/ops">
     <ops:case 
required-namespace="https://www.w3.org/2000/svg">
          <svg xmlns="https://www.w3.org/2000/svg" 
xmlns:xlink="https://www.w3.org/1999/xlink" 
version="1.1" 
width="100%" 
height="100%"  
viewBox="0 0 497 765" 
preserveAspectRatio="xMaxYMax meet">
               <image width="497" height="765" 
xlink:href="images/frontcover.png"/>
          </svg>
      </ops:case>
      <ops:default>
           <div id="frontcover2a">
                 <img height="100%" 
src="images/frontcover.png" 
alt="frontcover"/>                   
           </div>
      </ops:default>      
</ops:switch>

Two front covers won’t bother most people; we’re used to seeing repetitive front pages (and most of your readers will not see repetition – we’re talking ONLY about these two readers). For interior images, you can either repeat the switch (and risk having some readers wonder why there are multiple copies), or simply substitute this:

           <div id="frontcover2a">
                 <img height="100%" 
src="images/frontcover.png" 
alt="frontcover"/>                   
           </div>

It’s not ideal – you may get whitespace on the edges, but it’ll work in 99% of the cases.
Folks, aside from the research, writing this post and formatting it for the blog took about an hour and a half. 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!

One thought on “So You Want to Make an eBook? : Full Page Images

Comments are closed.