Tuesday, April 6, 2010

Wrapping Text in an ePub for the iPad

Yesterday, I noted that Apple's sample Winnie-the-Pooh eBook had text that wrapped around the image at the beginning of each chapter, and that I'd like to know how they did that. According to the OPS spec, CSS position properties (like absolute and fixed) are strongly discouraged. I originally interpreted that as applying to the float property as well, but that does not seem to be the case.

Indeed, the float property works just fine, and I assume that's what Winnie is relying on. Here is my own example:

Wrapped text in iPad

The code is absolutely standard and familiar:
img.float {float:right; margin-left:10px}

It works in Adobe Digital Editions also.

Seems like it opens up a world of possibilities. I'll be spending the day looking at them, but I'd love to see what you come up with.

One thing to keep in mind is that when the iPad is rotated, the image does not change size. And the wrapped text can get pretty squished:

Wrap text horizontal

The answer to that problem is probably keeping the image small enough to work on the horizontal spread, and big enough to be helpful on the vertical.

Don't be distracted by the italics and small caps. Those are tests as well. And yes, that is Walden Pond.


  1. Liz, what happens when you set up an object with relative positioning (which is not listed as "strongly discouraged," according to www.idpf.org/2007/ops/ops2.0/download/#Section1.3.5). Also, what about overflow options and CSS3 definitions? This article offers some reason for optimism: infogridpacific.typepad.com/using_epub/2010/04/more-epub-best-practices.html

  2. What if the image width is specified as a percentage?

  3. I'm trying lots of combinations of things and will post when I have a definitive answer. What I'm finding in particular is that each eReader supports a different subset of CSS, and it's giving me flashbacks of the browser war days. What's even more troubling is that many eReaders deliberately ignore particular CSS properties to (over)compensate for earlier readers who weren't as good at supporting them.

  4. Will max-width on image in iBooks works? Maybe max-width: 60% can solve the problem?

  5. It's not clear from your screenshot, but I don't think the margin attribute works. If you float right, the top, bottom, and right margins are OK, but there's no margin on the left.

  6. Actually, it seems as though only one of margin-left and margin-right work at a time, and the same for margin-top and margin-bottom. So if you're floating right, you have to choose between butting up against the edge of the page or butting up against the text on the left.

  7. Liz, could you tell me where I must include the code for floating?
    Just in the "style" paragraph of the xhtml page?
    I am using Sigil

  8. In the CSS, wherever you have it. It could be in the XHTML page (within style tags at the top) or it could be in its own CSS document.

    I don't know Sigil (though I have heard of it).

    hope that helps,

  9. Sure that helps Liz. Thank you very much. I have purchased on of your books today...

  10. in your css file, you can create a new class. i.e.

    .FloatLeft {

    and then apply this style to the image in the html. ie:
    <img class:"FloatLeft" src...etc

    1. Yes, but that's not how CSS is supposed to be used. A class should group elements by function, not by format.


More of my books