Friday, January 14, 2011

Expandable Photo Blocks in iBooks on iPad

I am working on a project for a photographer that has a lot of beautiful photographs set up in tables. I've been trying to figure out how to get them to display all on the same iBooks page, AND shrink to a smaller width page, AND expand when I double-click them, all while not messing up the surrounding flowable text, so that the book can still be read.

I thought about using non-linear objects, and it almost works. And I also copied the use of maps and areas from the Discover travel series, but I realized that they only work when the iPad is held vertically. The map rectangles don't work when held horizontally. So that, while clever, was out.

But a combination of iBooks' new appreciation for page breaks along with the display:inline-block property, and a careful application of image sizing did the trick. If I do say so myself, it's quite lovely and I think would be an asset to any image-heavy ebook on the iPad, iPhone, or iTouch.

Here's what a block of photos looks like, both in vertical, and horizontal orientations of the iPad:
photo table - horizontal orientation

Photo table - vertical orientation iBooks 1.2

Then, the reader just has to double-click a photo to view the full size:
Expanded photo from photo table in iBooks

A second double-click returns them to the regular page.

The cool thing is that thanks to iBooks' support for page-break-inside, the photos stay together, and form a coherent and attractive block.

There are a number of things to keep in mind while coding.

1. Because iBooks doesn't support changing the size of an image directly, you have to enclose each img tag in a separate div. I gave each of these divs the class of "imgshrinker" since that's what they do.

The HTML code looks like this:
<div class="tablephoto">
    <div class="imgshrinker"><img src="images/sign.jpg" alt="" /></div><div class="imgshrinker"><img src="images/sitemarkers.jpg" alt="" /></div><br /><div class="imgshrinker"><img src="images/moreview.jpg" alt="" /></div><div class="imgshrinker"><img src="images/stones.jpg" alt="" /></div><br /><div class="imgshrinker"><img src="images/stone.jpg" alt="" /></div><div class="imgshrinker"><img src="images/housesite.jpg" alt="" /></div><br /><div class="imgshrinker"><img src="images/viewfromsite.jpg" alt=""/></div><div class="imgshrinker"><img src="images/wenttowoods.jpg" alt="" /></div>

Note that because I'm creating a grid of two columns and four rows I have nothing between the first two divs and a line break between the second and third. Nothing between photos three and four. Line break between four and five. And so on.

There is also a wrapper div for the entire table, with a class of "tablephoto". I'll use this to keep the photos together on the same page. (See step 3.)

2. Next, I use CSS to reduce the size of each img-containing div (the ones with class imgshrinker) to 47% of the width of the page (so that two photos will fit on each row). I add !important just in case. I then set the width of the img tags themselves to be 100% (of their parent element, which is the div set to 47%. The code looks like this:
 .imgshrinker {width:46% !important;
display:inline-block;padding: 1px}
.imgshrinker img {width: 100% !important}

3. I then add a bit of code to the CSS to keep the table together. I'll use the page-break-inside property, which iBooks 1.2 supports, despite its omission from Apple's guidelines.

.tablephoto {page-break-inside: avoid}

4. Also note that I cropped the photos to 1600 x 1200.This might seem excessive since in a table of two by four in a screen area about 600 pixels x 860 the largest width the image might need is about 300 pixels (half of 600) by 215 pixels (a quarter of 860). However, you want to use a larger image so that when the reader double-clicks it, it will fill the iPad screen. It's also important to choose a proportion that fits nicely in the table you create. For example, if you crop your photos to a portrait orientation, they won't work as well in a table shaped like mine.

Finally, Apple's guidelines suggest that photos be no larger than 2 million pixels (multiply height times width to get this figure).1600 x 1200 = 1,920,000 so I'm OK on that account. I also compressed them with JPEG low for this example so they wouldn't take up so much space, but that's up to you. (Apple suggests no more than 10mb of uncompressed image data per chapter.)

You can download the EPUB file to see the code for yourself. The photos are in chapter 2 on the third or fourth page. I have not epubchecked the file, so don't expect it to be totally clean!


  1. No dice in Stanza Desktop (I don't see the photos). Then again, Stanza Desktop doesn't seem to grok your chapter divisions, either.

  2. @jodi Not surprised. Stanza Desktop is about the most rudimentary EPUB reader out there. Curious, because Stanza iPhone is great.

  3. Hi Liz, I just downloaded a copy of your ePub book and am really impressed. What a great resource! I also note that you are spending a year in Barcelona. My wife and I are Spanish residents living in Girona. I'll look in on your Barcelona blog. Welcome to Catalonia! If we can help out in any way contact us at Come up to Girona sometime. It is a lovely town. We'll join you for coffee.

  4. And your page of photos work perfectly on my iPad!

  5. Sorry, I didn't realize that you are a long-time resident of Catalonia!

  6. Not all of us are lucky to have an iPad to play with. Still, it's so worth knowing what is going on with the blog updates Liz, while trying to become an epub developer (or whatever one might call a person trying to convert files for e-readers with some styling.) I am searching other libraries in my area for those that have devices to loan out. I just found out that the library of the college I attend will have Kindles to loan out in two weeks, and several Nook readers coming soon. They will allow me to test the files as I want, so I don't even have to own multiple readers right now. Once I can do the conversions with more confidence and charge something for it, I will perhaps be able to purchase more than one e-reader for my testing, but for now, thank you loaning libraries everywhere!

  7. Hey Liz,

    I asked about the formatting of illustrated epubs for the iBookstore and saw Anon's post that docs are available if you are a part of iTunes Connect. However! I don't have a product with an ISBN yet because the product that I am working on is the very one that I need the info from iTunes Connect to finish. Any shortcuts to get signed up for iTunes Connect without an ISBN? OR is the info for building an illustrated book for iBooks 1.2 included in your epub book?

  8. Liz

    I downloaded the example book and decided to poke around with the CSS.

     I wanted to see if I could separate the eight photos  equally from each other. I added this to the  .imgshrinker CSS line height 0 font size 0 with no padding. All of the photos had equal spacing top, bottom, right and left.

    Then I wanted to see if ePub/iBooks would support text and photos with a drop shadow. I used this on the header CSS:
    text-shadow: 2px 2px 2px #000;
    It's supported...

    I used this added to the . imgshrinker CSS:
    Erbox-shadow: 10px 10px 5px #888;
    This is supported too!

    I'm wondering what other CSS 3 options that ePub/iBooks will support? Boxes with a rounded corners, alpha channels....?

  9. Can we talk about the iBooks generated TOC a bit? Perhaps it needs its own post. I'm really throwing the kitchen sink at my latest ePub, and I'm finding that if you have 1st and 2nd level headers for a directory (many of them, like a section, then A-Z under it), iBooks is slow to generate/display the entries because I think it's trying to determine the page numbers. I have to wait until I can scroll further. They either need to have a preference to turn the page number generation off, or use collapsible headers (like ADE), and only generate pages for what is displayed. In fact, I have a separate TOC with links, and iBooks doesn't even include it in the generated TOC, but ADE does in the bookmark tree. I specified this as a toc in the guide section of the content.opf, so perhaps it is looking at that and deciding to ignore it.

  10. Liz, I apologize if this isn't entirely on-topic with this blog post, but I couldn't find an email link. I'm seeking some advice.

    I'm trying to float images and sidebars alongside text in ePubs. I think I have a handle on usinginline style sheets to force and avoid page breaks so that the floats don't break over pages. However, this generally causes a page break immediately preceding the float if it would break over a page otherwise, which means the preceding page is often half-blank because all of the page content below the float in the HTML data is also forced to the following page.

    Logically, understand why this occurs, and I was hoping you might have some insight into a work around. The only ideas i have are to either find a CSS instruction to somehow relocate the float to below a naturally-occurring page break (which I don't believe exists), or to insert an empty float above the desired image and use "clear: right;" to force the desired image below the empty float. However, I then need to find a way to make the empty float have a height of "remainder of the page", which I also have not yet found a way to do.

    Help? Please?

  11. Hello--This comment has nothing to do with computers, but I found you while looking for information about Gray's Sugarhouse in Ashfield, Mass. Years ago I ate breakfast a few times in sugaring season at their wonderful little dining room, and I wanted to write about that memory. Do you have any recent news about them, if they are still making syrup and if they would ever open their "restaurant" again? If you have any info I'd be so grateful! You could leave it at my blog, if you like. The Gray's site has not responded. Thanks so much! Best, Kassie

  12. @Kassie: I wasn't sure which of your blogs to post to, so I'll answer here... Grays' doesn't do breakfast anymore, but they still do maple syrup. They have one of the most popular stands at Fall Festival. A few years ago, Nan from Elmer's joined up with the Grays to serve breakfast at Elmer's with Gray's maple syrup and their famous tree stump stools. Alas, Willie Gray passed away several months ago.

  13. Hey Liz,
    thanks a lot for this solution! But I still have a problem with images in iBooks. What would you do with images within tables? If I use your solution from your book "epub: straight to the point" with keeping images in div's the images are not display in iBooks 1.2!
    Images within tables are only displayed wihtout any div's around but therefore it's not possible to change the size of the image. Any idea?

  14. @seb: Why do you need them in a table? I ask that because tables are pretty problematic in iBooks, and I wonder if you can achieve the effect you're looking for some other way.

  15. Well, actually it's a kind of hack.
    I need the table-structure to build lists. Sounds odd, I know, but in my case they're necessary.

    I'm working on a law publication and in german law it's possible that list-points are like "1 a) II" with following text in a paragraph. So that's the reason for using 2 column tables instead of normal lists. At the moment I split the hole table to extract the image and build a div structure around it, but only because the actual book contains just a few images in the table structure.

    It's quite frustrating, that iBooks cannot handle images within tables, but I'm looking forward that someday they will fix this problem, like they support fonts now :)

    thanks for your help, keep up the good work and have a nice time in Barcelona!

  16. Liz--Just discovered your blog. Great work! It's detailed, focused on specific problems, and clear. I've placed it prominently on my iGoogle home page now, so I won't miss a post.

    I'm working on the design for a series of epubs, where each epub is a collection of photographs. (Think of it as a coffee-table book.) As far as tools go, I've written my own software that outputs all of code for the epub source files, and I can modify that software as necessary to make the epubs look and behave as I want. The real trick is knowing what needs to be in the epub to achieve the desired effect.

    I want the photos to look good on "full-size" e-readers such as the iPad and Nook color...and look as good as the device will allow on smaller devices such as the iPhone and Android phones.

    I was very intrigued by your approach to photos in a table for the Walden book. But I just tested it with Adobe Digital editions and Nook for PC on my Vista PC, and clicking on the photos did not make them zoom. (Not that you claimed it would: your blog post was clearly oriented to the iPad experience.)

    But I am wondering: do you have a suggestion for making zoomable photos that would work on Nook Color, Adobe Digital Editions--and ideally on most epub readers (including Google books for various devices)? Or is this something where each device will require its own idiosyncratic approach? (Which of course would not be ideal for books intended for publication.)

    More generally, can you advise on designing and formatting books of photography for epub--or point your readers towards some good examples of the form?


  17. Hi Liz, Ken,

    I was wondering if either of you have explored the zoomable photos problem with any success? I'm trying to figure out way to add zoomable photos to an ePub document, particularly an ePub that is created via "Export as ePub" by iWork Pages. Is this something that I'm going to have to code myself? I'm attempting to incorporate a ePub assignment in a course I'm teaching in the digital Humanities at my university, and, unfortunately, I can't realistically expect my students to be able to code these documents themselves.

    Any advice you might have for me would be most greatly appreciated.



More of my books