View Full Version : Irregular images on an iPad/iBooks


AlexBell
03-26-2013, 08:14 AM
Has anyone flowed text around an irregular image and made it work on an iPad?

I am helping to design and ebook with irregular images, and have tested it on my Sony T2 and on my iPad/iBooks. The text flows around the irregular image as expected on the Sony, but on the iPad there is a white space where the image should be except for a tiny thumbnail of the image. If the image was its proper size the text would flow around it as expected.

Anyone else seen this? Anyone know a fix?

dgatwood
03-26-2013, 01:32 PM
I think we'd have to see at least the HTML/CSS skeleton to even know where to begin. :)

Turtle91
03-26-2013, 11:26 PM
maybe this will help:
http://www.mobileread.com/forums/showthread.php?t=209139

AlexBell
03-27-2013, 02:48 AM
I think we'd have to see at least the HTML/CSS skeleton to even know where to begin. :)

Thanks, and of course you're right. I should have thought before firing of a panicky post late at night. It's going to be a very big ebook though, so I'll try to get together a small test ePub with an irregular image. I'll also test Zelda's Alice in Wonderland on my iPad and see if the problem occurs with that ebook.

AlexBell
03-27-2013, 02:52 AM
maybe this will help:
http://www.mobileread.com/forums/showthread.php?t=209139

Thanks, but the problem is not getting the text to flow round an irregular image; the problem is that the text flows round irregular images on my Sony, but the same ebook does not work on my iPad. The text would flow if the image filled the space set aside for it, but the image appears as a tiny thumbnail.

AlexBell
03-27-2013, 07:50 AM
grannyGrumpy has kindly supplied a small test file with an irregular image and some text. The text flows around the image as expected on my Sony. On my iPad with iBooks there is an area of irregular white space with text flowing around it, and a tiny thumbnail of the image.

I have attached the test ePub

Can anyone suggest a fix?

dgatwood
03-30-2013, 01:45 AM
You *might* be able to do something like this:

image.whatever {
margin-bottom: -20%; /* Adjust as needed */
max-width: 100%;
}

image.spacer {
max-width: 50%;
float: right;
}

And make the spacer image be the same dimensions as the bottom tail of the image, but transparent. :)

Be aware, however, that this borders on insane, and that CSS really wasn't designed for that. CSS3's exclusions will make this better if anyone actually gets around to fully supporting them.

AlexBell
03-30-2013, 02:56 AM
Thanks, dgatwood. I'll think about it, but my elderly mind just can't cope with that markup. I'm thinking of suggesting that either we mention in the blurb that some of the images won't work on an iPad, or making the images regular so the text will flow around the image.

I just hoped there would be a quick and simple fix.

GMcG
03-31-2013, 05:30 AM
Perhaps the iPad shows only the png spacers and not the image beneath. And the thumbnail says: There is someting else. Then it would be a problem with the transparent spacer and not with the irregular image.
Try it without the pngs.

George

AlexBell
04-01-2013, 03:13 AM
Perhaps the iPad shows only the png spacers and not the image beneath. And the thumbnail says: There is someting else. Then it would be a problem with the transparent spacer and not with the irregular image.
Try it without the pngs.

George

Thanks, George - though so far as I understand your comments I still don't understand why iBooks renders the to original images so small. They really are tiny. Anyway, we'll add it to the list of things to think about.

Jellby
04-01-2013, 04:37 AM
I guess it's not simply the fact that the screen resolution of the iPad is much higher, and therefore a given image looks smaller if displayed at its native resolution...

GrannyGrump
04-01-2013, 10:59 PM
Surely ppi (pixels per inch) wouldn't have anything to do with it, would it? I always thought ppi only affected printing, but maybe not...

Jellby
04-02-2013, 09:35 AM
To be sure, try inserting the image with a plain old:

<div><img src="..." alt="" /></div>