Resizing images in EPUB

Some time ago, a reader wrote to tell me that I had gotten the code wrong for resizing images in my EPUB Straight to the Point book. At first, I thought he was right, but at second and third glance, I realize that he wasn't.

The problem is that the iPad doesn't recognize when you add width information directly to a img element. That is non-standard behavior (read: a bug) and should be fixed.

First, let's look at how CSS deals with images. An image has an intrinsic size, that is, its actual size in pixels. If you don't apply width or height information to the image, either in the HTML or the CSS, the image will appear at its original size. CSS allows you to set the height and the width of an image explicitly in pixels, or as a percentage of a parent element. This means that if you set the width of an image to 50%, the image should be displayed at 50% of the width of the element in which the image is contained, not 50% of the image's original width.

Here's what it looks like in Firefox. The image takes up half of the window width since its ancestor element is the body. So far so good.



Enter iBooks. Unfortunately, iBooks has a bug that ignores a width explicitly set for an img element. Just completely ignores it:



The first part of the solution, as a I describe in EPUB Straight to the Point, is to enclose the img in a div and then set the width of the div to the desired width, either in pixels or as a percentage.

But observe what happens if you remove the width property from the img and apply it to the div that contains the img. In iBooks it (erroneously) works as you want it to:



But iBooks, as we noted, doesn't follow the CSS spec. However, and this is a big however, Firefox, Safari, and Adobe Digital Editions—and all of the ereaders based on ADE, like the Sony Reader and Barnes & Noble Nook—do follow the spec.

The spec says that, by default, if a replaced element, like an image, is too big for its container (say, a div that you've reduced by half) then the image spills out over the edges. That is, it displays just the same. What the spilled out part (the overflow) doesn't do is affect the layout. Which means that any surrounding text just runs over it as if it weren't there. It's ugly.



As you can see, the div has been reduced to 50% of the width of the window, but the image is unaffected. By default, overflow is visible, but doesn't affect the flow of the page, which is why that text just rolls right over it. Ick.

The second part of the solution, (also contained in EPUB Straight to the Point) is to set the width of the img element to 100% of its parent, in this case, the div. Since the div is 50% of the width of the window, and the img is 100% of the div, then the img will also be set to 50% of the window. This works in both iBooks and more standards-compliant ereaders:





At some point, I had suggested using max-width instead of width but that only works in iBooks, not the other ereaders. In other words, it's no solution.

Bluefire Lets You Read Library Books on the iPad

Woke up to a lovely morning tweet: "@lizcastro Done.  Update available now in App Store that supports library books." from @micahsb, a developer and entrepreneur. He was referring to the fact that the new version of their Bluefire Reader app for the iPad can display Adobe DRM'd EPUB format ebooks that you've taken out of the library.

And it works! I connected to my library, and quickly did a search for Adobe ePUB, “took out” and then downloaded The Mysterious Benedict Society, which we're in the process of reading, and clicked OK when I was asked if I wanted to open the file in Adobe Digital Editions. This converts the download file into a Bluefire-compatible Adobe DRM'd EPUB file and places it in the Digital Editions folder, within the Documents folder (or My Documents folder on a PC).



Next, I opened iTunes, connected and selected my iPad, chose the App panel, selected Bluefire at the bottom of the window in the File Sharing section, clicked Add..., chose the book file from where it was copied—in the Digital Editions folder within the (My) Documents folder—, and then clicked Sync.



I then opened Bluefire Reader on my iPad, and there was my book! Absolutely lovely.

Borrowing library ebooks with a Nook

Update!! You can now borrow library ebooks with your iPad, iPod Touch, or iPhone as well, using the Bluefire Reader software. See Reading Library Ebooks on iPad with Bluefire, the Easy Way for more details. The information below, up to the point where you download the ebook, may still prove useful if you need help figuring out how to take out a library ebook.)

We're in Barcelona for the year, and like any travelers, had a limited amount of space in our suitcases. Instead of bringing lots of books, I was hoping we could download books to our ereaders: a Nook and an iPad. I have a Nook and not a Kindle because I just wrote a book about EPUB, the open format that is compatible not only with the Nook and the iPad but also with Adobe Digital Editions (ADE), which is used by many public libraries, including ours, the Boston Public Library (BPL). Our library does not support copying ebooks over to the Kindle or iPad, I'd be interested if other libraries do.

The BPL checked out 125,000 ebooks last year, 10,000 of which were in EPUB format. There are 741 different titles in EPUB format, and 1014 total copies of those ebooks. The BPL calls it "Adobe EPUB format" because all the EPUB books that it has are protected with Adobe DRM. That's important because it means that you have to use an authorized version of ADE to open the ebook and then copy it to your ereader.

The BPL has ebooks in other formats as well: 2475 Adobe PDF titles (also protected with Adobe DRM), and 948 Mobipocket titles (readable on a PC and some mobile devices but not the Kindle).

I had a bit of trouble getting EPUB and PDF books to my Nook, so I thought I'd write up my experiences and maybe save you some trouble.

Before we begin, let me tell you that every Massachusetts resident is entitled to get a Boston Public Library e-card which gives you access to the BPL's ebooks. Your local network (like C/W Mars in Western Mass) may have additional ebooks available as well, though their collection is likely to be smaller. C/W Mars for example, has only 176 Adobe EPUB ebooks. You can find more information about getting a BPL e-card on the BPL site.

I am going to use the BPL in this tutorial, but the instructions should work in any library system that uses Overdrive to manage their digital resources.

My first mistake was to try to download books before I had authorized Adobe Digital Editions and my Nook. I couldn't make the books that I downloaded before authorizing ADE and my Nook work.  So, before you do anything else, download Adobe Digital Editions. Once it's installed, the Setup Assistant will ask if you want to authorize it. You have to have an Adobe ID to do so. If you don't have one, take a quick detour to create one by clicking the "get an Adobe ID online" link, or go directly to the Adobe Sign in page. Then click Create an Adobe Account.

Then return to Adobe Digital Editions and add your Adobe account information to the Authorize window.



Now you're ready to authorize the Nook. Close ADE, plug in the Nook, and then open ADE again. (I've found that if you plug the Nook in when ADE is already open, ADE won't see the Nook.) ADE will ask you if you want to authorize the Nook. Click the Authorize button. This step allows the Nook to link to your Adobe ID and thus be able to read your DRMd ebooks from the library. If you've done it right, when you click the left-most icon in ADE (three little books on a shelf), you should see Nook listed under the Bookshelves.



If you happen to not do these steps in this order, you can deauthorize ADE on your computer by pressing Command-Shift-D on a Mac (or Control-Alt-D on Windows) and then start over again.

Once you have ADE and the nook authorized, you can go to BPL and take out the ebooks you want.

We'll begin at the main page for the BPL's digital resources: http://overdrive.bpl.org/. We want to download an EPUB book for the Nook, so click on the Advanced Search tab and then choose Adobe EPUB eBook in the Format menu, and check the Only show titles with copies available option. Of course, if you're searching for a particular book, you can put in more criteria under Title or Creator/Composer.



If you want to browse like me, leave the Title and Creator fields blank. Click Search. You'll see a list of available EPUBs. You'll see that each title lists its available formats. Since we chose Adobe EPUB eBooks, every book listed will be in that format (at least). Once you find a book you like, click the Add to Cart link at the right-hand side.



You can add additional books to your cart if you like. When you're ready to check out, click the Proceed to Checkout link.



If you haven't logged in already, you'll be prompted to do so.



You'll get one final screen where you can confirm which books you're downloading, the length of time for which you're borrowing them (either 7 or 14 days), and the format in which you're downloading them. You'll also be able to see how many items you have checked out already and how many more you are allowed to borrow.



When you're satisfied, click the Confirm check out button at the bottom of the screen.

Once you've borrowed the book, you'll get a download button for the corresponding file.



Click the Download button. Now you'll get an alert that says you're downloading a file and if you want to open it with any program in particular. Hopefully, Adobe Digital Editions will be selected by default. (If you want to read this library book on your iPad or iPhone, you should install the special link to Blufire and click its bookmark now instead of the Download button. See Reading Library Ebooks on iPad with Bluefire, the Easy Way for more details.)



Click OK to continue. Adobe Digital Editions will automatically open and you'll see a progress bar showing how your borrowed book is being downloaded.



Once it has finished downloading, it will appear in your Adobe Digital Editions Library list.

Now the only step left is to copy the borrowed book to your Nook. To do so, make sure you're in Library mode (click the icon of the three little books in the top left corner of ADE), and find the newly borrowed book. Then drag it to the Nook bookshelf (under Bookshelves in the left navigation bar).



(If you don't see Nook in your Bookshelves, it's because a) you didn't authorize it as described earlier, or b) you unplugged it from your computer, or c) you plugged it in after you opened ADE (in which case you should quit and reopen ADE).

And that's all there is to it! (!)

EPUB books are automatically “returned” at the end of the borrowing period, but you can return them early by clicking the arrow next to the book title in ADE and choosing Return Borrowed Item. You might want to do this in order to borrow something new.



Leave questions in the comments. I'd also love to hear if your library system works the same way.

Just for the record, it really shouldn't be this hard. The problem is DRM. If these books were not copy protected, you could copy them to any ereader that you owned, just like you can read books from the library in any room in your house! But I'll try to not go off on a DRM rant here.