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:



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:



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.