Sunday, May 30, 2010

Controlling Image Size in iBooks on the iPad

I saw the other day that Richard Pipe, who's been documenting some really helpful and interesting tests on his Using ePUB blog, got a question from someone about how to change an image's size in an ePub. Richard kindly responded with some of the code generated from his FLIP ePub generator, which looks quite powerful.

I read through the article with interest, and found exactly the same solution that I had come to on my own: in order to control the size of images in iBooks, you have to change the size of the surrounding div and then set the width of the img element itself to 100%. This is completely non-standard. According to the CSS spec, the width property can be applied directly to replaced elements like images.

And in fact, other ereaders don't have trouble with it at all. Here's a very simple ePub in Adobe Digital Editions. The CSS says: img {width: 100px}. And the image is displayed at 100px:
image width = 100px in ADE

Here is the very same ePub in iBooks. The sheep are cute, but they're way wider than 100px. In fact, since iBooks ignored the specified width and the original image was too big for the screen, iBooks automatically reduced the image to the maximum for that page: 392 pixels wide. (The original image measured 500 x 305 pixels.)

image width 100 px in iBooks

It looks like iBooks doesn't support the width property applied directly to the img element.

There is a solution. Just wrap the image in a div or some other block-level element (which it should be in already in order for the XHTML 1.0 to validate), and apply the desired size with the width property to the div element. Then, apply a max-width of 100% to the img element. (You can just use width, but the image might get pixelated if the resulting size is larger than the image's original size.) The barebones solution looks like this:
div.illustration {width: 100px}
img {width: 100%}
And that works just fine:
smaller image in iBooks

Course, it's generally a bad idea to use pixel widths for images in ereaders. What you really want is a percentage. You just have to remember that percentages used for the width property are always calculated with respect to the parent element (e.g, the screen), not the original size of the image itself. In other words, if you set the div to 50%, it will take up 50% of its parent element's size, not 50% of the size it should have been. Also note that the width property is not inherited.

So, suppose you want to make the image half the size of the screen, no matter how big or small the screen is. In that case, use:
div.illustration {width: 50%}
img {width: 100%}
Now, on a small iPad page (e.g., held horizontally), the image is 50% of the small page:
50% image iPad horizontal

And on a large iPad page, (e.g., held vertically), the image is 50% of the large screen.
image width 100% iBooks

And on a tiny iPhone screen, the image is still 50% of the screen, now all of 141 pixels wide.
width 50% iphone

Friday, May 28, 2010


Oof, ever since I linked to that great article on Multitasking, I've been really trying to stop doing it. It takes every bit of willpower I have (which, frankly, is not very much). I remember in college typing other people's term papers for money, while listening to a song, singing the lyrics, and thinking about something else entirely. I believe that my mind is wired to multitask. Still, I can see the points made in that article, and these days I'm really trying to focus.

One of the things that trips me up is any time I have to wait for my computer to do something (say, like sync the iPad). It only takes 15 or 20 seconds, but my natural inclination is not to wait, never to wait, but instead, to go check my email or Twitter or anything, while it's updating. The problem is I get engaged in the new thing and follow it for a bit, and though I know I'm supposed to go back to the iPad to check the test, I can't always remember what miniscule thing I was testing. Not good.

But how to deal with the plethora of minutiae that rolls through my head demanding attention? Ignoring it would be to ignore one of my best skills: paying attention to minutiae. Still, I get that I can't jump from one tiny detail to another disparate one and back without losing some depth. So, I'm keeping a list right in front of me. I get an idea, I write it down instead of following it right that second. I remember something I have to add to this book I'm writing, I write it down, instead of researching it right then. And I doggedly stick to the task at hand—which I can't deny is downright excruciating. (This seems to directly contradict the Getting Things Done mantra of not making lists, doing things when you think of them, etc., or perhaps I've never read enough into it, but I don't care.)

When I reach a real breaking point in the focused task, then I let myself stop, look at the list, plow through it one by one. This blog post was on that list!

ePub Production links May 28

Updated: 11:30am

Thursday, May 27, 2010

Wednesday, May 26, 2010

ePub Production links May 26

Mike Cane suggested that "someone" keep track of the enormous amount of ePub Production links and information that is flowing around the web. I'm going to give it a shot.

These will be in order as I see them, and I'll try to publish daily, if not more frequently.

How (and why) to stop multiasking

I'm writing this as I print something for my husband and need to go get breakfast for the kids. This is something I need to read over and over again:

What we neglect to realize is that we're already using that brain power to pick up nuance, think about what we're hearing, access our creativity, and stay connected to what's happening around us. It's not really extra brain power. And diverting it has negative consequences.

Read the whole article here.

Tuesday, May 25, 2010

InDesign flubs exporting headers to ePub

When you export an InDesign document, and choose a TOC style, InDesign exports the paragraphs that are part of the TOC as headers (h1, h2, etc.) and everything else as a p element. In both cases, the name of the style in InDesign is used as the class for the element in the XTML. So far, so good.

The only problem is that it seems to get the spacing (text-indent and margin properties) all messed up when it exports headers.

Here's the specs for the header paragraph style as defined in InDesign:

Header specs in InDesign

If I export to ePub without using the TOC (and thus without converting this paragraph into a "header"), I get the following reasonable CSS approximation of the style. Notice the 1/2" space before, and right and left margins, are converted to 1em, and the 4" are converted to 8em. That makes sense.

p.header {
font-family: "Cochin";
font-weight: bold;
font-style: normal;
font-size: 3em;
line-height: 1.20em;
text-decoration: none;
font-variant: normal;
text-indent: 0em;
text-align: center;
color: #1c910a;
margin: 1em 1em 8em 1em;

But if I export to ePub using the TOC, I get this:

h1.header {
font-family: "Cochin";
font-weight: bold;
font-style: normal;
font-size: 3em;
line-height: 1.20em;
text-decoration: none;
font-variant: normal;
text-indent: 0em;
text-align: center;
color: #1c910a;
margin: 0.01em 0.01em 0.11em 0.01em;

Notice the difference in the values for margin. They're completely messed up. I don't know if InDesign is trying to compensate for some dubious default font size for the h1 element, or what, but it's not effective. The difference in the output is universal, from Adobe Digital Editions, to web-based ereaders, to iBooks, and must be manually fixed. (Because if you don't choose the TOC style, you won't get a navigational menu.)

Friday, May 14, 2010

HTML5 Video Works on iBooks on iPad!!

Update, 25 May 2011: I have recently published a new miniguide explaining exactly how to add audio and video files to your EPUB formatted ebooks so that they work properly and look great in iPad, iPhone, and iPod touch, as well as NOOK Color. You can find more information in this article.

This morning as I was going through my overnight email, I saw a notice that "koansin" was now following me on Twitter. I'm not a big Twitter user, and usually I make a cursory look to make sure the follower isn't a spammer, but I don't always follow back. I know this may not be Twitter etiquette, but I use Twitter as a research tool and get easily overwhelmed with too much information.

But, I've been experimenting with Twitter tools that automatically follow people who follow me and I happened to visit koansin's stream. It said an amazing thing:
Video does work in iBooks
I have experimented a fair bit with video on iBooks and hadn't been able to make it work. Who would have thought the solution was to just believe in HTML5 and use the proper format!? And it does work.

Here's what I learned. Here's a direct link to the video on my own site until YouTube finishes processing it.

And here are the highpoints, I promise I'm going to work on improving my screencasting, now that I'll be able to add screencasts to my books!

  1. Begin your html document with this header: <html xmlns="">. The ePub format requires XHTML 1.1, but iBooks accepts your code even if you use HTML5. 
  2. Where you want your video to appear, begin the video element, by typing <video
  3. The most important attribute is src, which gives the location of your video. The video should be in .m4v format or .3gp format. If your video isn't in one of these formats already, open it in QuickTime, and choose Save for Web, and then choose the desired format. The .m4v format is higher quality and looks beautiful in the iPad. The .3gp format is for cellphones. In this example, I used src="html5video.m4v".
  4. Unless you plan to build the controls for your Video player, you should add controls="true" so that your reader can play, rewind, change the volume, and view the video full screen.
  5. The default proportions for a video object in iBooks appear to be for widescreen. If you have a 4:3 video (say, 640 x 480), you can enter a width and height that are proportionate to your video to avoid having black bars on either side. I use width="320" height="240".
  6. Finally, there seems to be a little bug in the autoplay function. It seems like the default behavior is that movies do not play automatically, which is good. However, I've found that after viewing a book and then adding a new book, the old book's video starts playing on its own, even if you close it!! If you add autoplay="false", that won't happen. I recommend it.
  7. Finish the opening video element with a greater than sign: >.
  8. I haven't tested what happens if the video doesn't work, but theoretically what you insert between the opening and closing video tags is what will appear. YMMV.
  9. Finally, add the closing </video> tag.
Compress your ePub as normal and test. It really works. Here's my ePub with embedded video in case you want to look at it on your own iPad. And here's a picture. Be sure and view it in full screen!
Adding video to iBooks for iPad

The moral of the story? Always follow back on Twitter! Thanks, Koan-Sin Tan. Sometimes you just have to know that something is possible in order to figure out how to do it. I'll continue testing and be sure to let you know what else I find out.

Thursday, May 13, 2010

Testing ePubs on iPad - quickly

I already wrote how it's necessary to update the title of an ePub when you're testing on the iPad. A helpful reader (the same one that was working on the CSS Test Suite), responded to my complaints about the long time it takes to sync the iPad with new books by offering this tip:
There's no need to use sync to transfer epubs to the iPad. You can drag them into the iPad's book list and they get transferred over in a couple of seconds.
The only thing is that it didn't work for me. This morning I once again attempted to recreate his steps, and I dragged over the ebook to iTunes, but it wouldn't accept it. The list was all grayed out. And I was just about to write just that, when I thought about why it was grayed out. And I realized it was because I have iTunes set up to automatically sync

All I have to do to get more granular control is select the iPad in the Devices list and then in the Summary tab, check the Manually manage music and videos option.
Manually manage in iTunes 
Now I can drag individual files—like ebooks—to the iPad and they are synced almost immediately. This will save me a lot of time.

Saturday, May 8, 2010

Palatino bug in iBooks on iPad

[Update: With iBooks 1.1, Apple has changed much of the system for applying fonts. Please read Apple damaging ePub standards with pseudo-support and Apple kills fonts in iBooks, strikes blow to standards.]

I discovered a big and important bug in iBooks on the iPad: if you don't have some text specified as Palatino (in some form or other), no other fonts will be displayed and everything will display in Palatino.

So, imagine you have this for your CSS:

p.palatino {font-family:"Palatino";}
p.other {font-family:"Optima";}

In the XHTML, the first paragraph is styled with the palatino class, and the rest is other.

Since Palatino is explicitly called, everything is displayed correctly:
palatino bug1
Now, you decide you don't really want Palatino, but would prefer Zapfino. Your CSS now looks like this:

p.palatino {font-family:"Zapfino";}
p.other {font-family:"Optima";}

Here's where the bug kicks in. Since there is no paragraph explicitly or implicitly styled with Palatino, iBooks freaks out and makes everything Palatino:
palatino bug 2
There are various solutions. As you can see with the first example, if Palatino is called for and used explicitly, everything is fine.

But you don't actually have to call the font explicitly, you can just call no font (which in effect also means Palatino, since that's the default font in iBooks). I've tried this with explicitly font-related styles, like font-size, and with less font-related properties like text-align. As long as there's some selector with at least one rule, and that doesn't specify a font, you're good:

p {text-align:left;}
p.other {font-family:"Optima";}

And again, it works fine:
palatino bug 4

Ah, but what if you don't want Palatino in your ebook at all? If you remove it from the XHTML, even if you leave it in the CSS, iBooks goes nutso again:
palatino bug6
The solution is to leave a Palatino style in your CSS, with display:none if you like and call that style at least once in your XHTML.

p.palatino {font-family:"Palatino";display:none;}
p.other {font-family:"Optima";}

<p class="palatino"> </p>

And voilĂ : no Palatino, and the Optima (or whatever other font you want), displays perfectly well!
palatino bug7

Friday, May 7, 2010

Text Size in ePubs-- Points? Pixels? or Ems? Oh my!

This is making me a little crazy, so bear with me.

If you choose 12pt text in InDesign, and then export the document to ePub, InDesign creates CSS that calls for a font size of 1em.

When iBooks looks at that CSS, it translates the 1 em into 16 pixels. But since the iPad has a resolution of 132 pixels, the text's actual, physical size isn't the same as if it were on a monitor, where we're most used to seeing pixel sizes for fonts. Indeed, on the iPad, one pixel is 1/132", so 16 pixels are .12". And since in the physical world, 1" = 72 pts, that text that you originally sized at 12 pts, is now only about 9 physical points in iBooks (.12" x 72 = 8.64).

If you displayed the same XHTML document on my monitor (at about 98dpi), where 1 pixel is 1/98", that would mean 16 pixels would be about .16", or about 12 pts—the same physical size, if you put a measuring tape up to the monitor, as if you printed it on a piece of paper.

This all came to a head since I've been creating ePubs with Microsoft Word 2007 on Windows on Parallels on my same 98dpi monitor. Again, I choose to set text at 12 points. If I print the document on a piece of paper, it measures 12 actual points.

But when I save it as HTML and then convert it into an ePub, Word generates CSS that actually specifies 12 points.

So how does iBooks and the iPad in general deal with points specified in CSS? Curiously, it's very similar to what happens if you specify 12 points in InDesign. iBooks interprets 12 points in CSS as 16px, and so outputs it exactly the same as if you had specified 1em (or 16px) and so the text is actually displayed at about 9 physical points, not the 12 that you specified.

What's the moral of the story? How should you specify the size of text destined for an ePub to be read in iBooks (and elsewhere)? That's is an even more complex issue. Surprisingly, it turns out that the most variety of outputs in my tests was from using ems. ADE and Ibis Reader on the Mac (but not iPad) displayed 1 em at 21 and 19 pixels, respectively, while all the ereaders that I tested displayed 16 pixels and 12 pts as 16 actual pixels (and 9 actual points!)

(Line-heights are another issue altogether since there is a wide variety of default line-heights from one ereader to the next.)

So I'm tempted to recommend using pixels over ems. And I'm finally truly understanding, with my heart and not just my brain, why pixels are a relative and not an absolute unit of measurement.

Tuesday, May 4, 2010

InDesign flubs CSS in ePub for exported lists

I think InDesign is a pretty powerful tool for generating ePub documents. But I've found an annoying mistake in one of their ePub export options.

InDesign has a cool feature that lets you format paragraphs as bulleted or numbered lists. You choose the system and InDesign inserts the bullets or numbers automatically. It's a very powerful and useful tool.

Bulleted List

Here is what the list looks like in InDesign:

bulleted list in Indesign

In the Digital Editions Export Options box, you can choose to convert paragraphs styled with InDesign's handy Bullet and Numbered List style characteristics into ordered and unordered lists in an ePub.

Map to Unordered Lists

If you choose Map to Unordered Lists, InDesign converts paragraphs styled with Bullets into <ul> elements, complete with <li> items. Seems good and it's what you'd expect.

Bullets exported with InDesign

But when you look at the CSS, you find that InDesign has missed a step. Though they convert the list to <ul> and <li> items, they leave the formatting assigned to <p> items.

bulleted list CSS from InDesign

As you might expect, the formatting is lost when you visualize the ePub (here on an iPad, but the same holds true in any eReader):

Bulleted list in iPad

If you choose not to Map to Unordered Lists, InDesign won't convert your lists to bulleted lists (<ul>) and instead leaves them as <p> items.

And since the CSS corresponds to <p> items, the formatting is now preserved:

No convert in iPad

So, you can either decide not to convert your lists in InDesign into actual lists in the ePub, or you can adjust your CSS manually by changing the selectors for the bulleted style so that they point to <li> items instead of <p> items.

Or you can wait for Adobe to fix the bug.

More of my books