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:




Then, the reader just has to double-click a photo to view the full size:


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>
</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!

Printing Notes from iBooks on iPad

One of iBooks 1.2 new features is the ability to print or email notes that you've made. There was a bit of interest in notes on Quora this morning (with which I've been experimenting) so I thought I'd talk a bit more about them here.

First, how do you insert a note? Simple. Just select some text with your finger, and then click Note in the pop-up menu that appears.



If you're reading a non-DRM protected book, you'll also have the option of copying the text. I like to copy the referenced text first and copy it into the note so that when I email or print the note, I can remember where the note came from. I have found that if you first copy the highlighted text and then press very close to the beginning of the selection, you'll be offered the opportunity to create a note as well, where you can then paste the copied selection. (Click anywhere else and you'll have to select the text again.)



Click outside of the note to close it. The referenced text is highlighted and a little post-it note with the date appears in the margin. If you click the note, you can change the highlight color or delete the note entirely.




To email or print notes, go to the table of contents by clicking the bulleted list icon next to the Library button in the upper-left corner.



You can preview the notes (and bookmarks) by clicking the Bookmarks tab, but it's not required.

And then click the "Away" button in the upper-right corner. You'll have the choice to either email or print the notes.



But what if you have an oldish printer like me? Can you really print? I was under the impression that you could share a printer with any computer on your network, simply by choosing the appropriate option in Print Preferences. But that doesn't work automatically from an iPad.

And Apple has released a technology called Airprint, but it only works with a select few HP printers. I talked to Epson and they just have a little app that lets you print photos from the iPad, and only if you have a wifi-enabled printer, which I don't.

Then I asked on Twitter, and within minutes, Gabriele Alese quickly pointed me to a tool called Airprint Activator. It somehow links up the printer sharing and Airprint capabilities and gave me access to my oldish Epson R200 from the iPad. Absolutely brilliant!



Thanks so much to Gabriele and to the folks at Netputing for making this possible!