iBooks: Text overflowing image if it's at top of screen.

[Oxford-eBooks]

I've got an interesting problem with an ePUB for iPad only project I'm working on.
It's rather image intensive, and I'm finding that when images end up at the TOP of the screen, the first line of text flows over the top of the image.
Changing font size to shuffle the image to a different position on the screen makes the text flow properly, so it's definately related to the image being at the top of the screen.

My image is in a DIV

	<div class = "illustrationRSM">
		<img src="images/image289.png" alt = "" title = ""/><br/>
	</div>
<p>This is the texft that should flow around the image, but if the image is at the TOP of of the screen, the first line runs across the image, then the rest behaves properly</p>

and the CSS floats it to the left or right, here it's the right. The inline-block trick here keeps a potential caption with the image.

.illustrationRSM{
	float:right;
	margin-left:1em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	width:30%;
	display:inline-block;	/* Keeps caption together. */
}

I've addressed the annoying size issue with images on iBooks with the IMG css by putting in an additional width:100%

	.illustrationL img,  .illustrationR img, .illustrationLSM img, .illustrationRSM img{
/*		vertical-align:top; */
		width:100%;
	}

Anyone come across this problem before, or can spot what STUPID thing I'm doing here?

[Oxford-eBooks]

Seems I'm not alone in this...

http://indesignsecrets.com/forum/epu...ages-in-ibooks

[AlexBell]

No, you're certainly not alone. I did The Woman in White (Illustrated) for the MobileRead library recently and had that same problem with two of the 40 images in the ebook. I chased my tail for a while moving the image within the text, but eventually gave up.

I always put the images between paragraphs, so that a paragraph will finish, then the image, then the next paragraph. This which works very well on my Sony. But on the iPad the images are sometimes within paragraphs. I can't understand how that could be. I guess that's one of Apples impenetrable secrets.

[JSWolf]

Originally Posted by AlexBell

No, you're certainly not alone. I did The Woman in White (Illustrated) for the MobileRead library recently and had that same problem with two of the 40 images in the ebook. I chased my tail for a while moving the image within the text, but eventually gave up.

I always put the images between paragraphs, so that a paragraph will finish, then the image, then the next paragraph. This which works very well on my Sony. But on the iPad the images are sometimes within paragraphs. I can't understand how that could be. I guess that's one of Apples impenetrable secrets.

There is a very simple solution to that problem. Use BlueFire Reader instead of iBooks and it will display as expected.

[Oxford-eBooks]

Originally Posted by JSWolf

There is a very simple solution to that problem. Use BlueFire Reader instead of iBooks and it will display as expected.

Trouble is, I can't control what people read the eBook on.
I'd complain to Apple, but I somehow get the feeling that I'd be better off screaming at the sea.

[Belle2Be]

Originally Posted by Oxford-eBooks

Trouble is, I can't control what people read the eBook on.
I'd complain to Apple, but I somehow get the feeling that I'd be better off screaming at the sea.

You might make a note on your website or in the book whatever that x y and z are great to read on. If I wanted to read a book and it had issues it would be nice to know from the source what works

[whbenson]

This problem can show up when increasing the font size, for example, pushes the floated image to the next page.

Perhaps paradoxically, a workaround for this problem is to ensure the images you're floating are always at or near the top of the page. One way of doing this is to put an empty <div> styled with "page-break-before: always;" immediately before the float or within a few lines, say. This seems to work so far, if you can live with that constraint.
-Bill

[AlexBell]

Originally Posted by JSWolf

There is a very simple solution to that problem. Use BlueFire Reader instead of iBooks and it will display as expected.

But I've tried Bluefire, and don't like it much. I agree the problem in this thread doesn't occur, but text which renders perfectly on my Sony and on iPad/iBooks often omits spaces - especially after full stops. In fact after seeing on the problem on iPad/Bluefire I spent several frustrating minutes searching for errors in my source document, only to realise after I'd tested the ebook on my Sony that there was no fault with the markup. It's almost as though Bluefire is wired to expect two spaces after a full stop and make it look as though there's only one space.

But I don't want to take this thread off topic; it would be very helpful to find a solution to the OPs problem. Perhaps we should take my problem with Bluefire to another thread.

[JSWolf]

Given full justification, two spaces after a period is not needed as that spacing can be adjusted to be different. So really, all of need is one space after then period.

[ChuckH]

I've also encountered this problem in iBooks, but usually only when an image/caption div block gets pushed to the next page (such as when the user resizes a font). Invariably some text will run onto the image; sometimes a few lines of the same paragraph will wrap properly. Some pages even have white space where the image previously was, even though the image & caption block have reflowed to the next page!

P.S.: I don't know how much good it will do but I've sent a feedback flame to Apple about this.

[georg3200]

Just got another book with this prob

Any new informations concerning that issue?

[PageLab]

One thing that worked for me is to put the image tag inside a "span" and then insert this combo (span + img) inside the paragraph tag, like this:

<p><span class = "float"><img src="images/image.png" alt = "" />image caption</span>paragraph text</p>

.float {
	float: left;
	margin-right: 1em;
	margin-bottom: 0.5em;
}

Works with or without the caption.

If the text is a list (ordered or unordered), just insert the combo (span + img) inside the first list item, then add the property "list-style-position: inside;" in the css, like this:

<ul>
	<li class="inside"><span class = "float"><img src="images/image.png" alt = "" /></span>list item text</li>
</ul>

li.inside {
	list-style-position: inside;	
}

[Iznogood]

Originally Posted by AlexBell

I always put the images between paragraphs, so that a paragraph will finish, then the image, then the next paragraph. This which works very well on my Sony. But on the iPad the images are sometimes within paragraphs. I can't understand how that could be. I guess that's one of Apples impenetrable secrets.

"Impenetrable secrets" (a.k.a. "bugs"?)

I have also noticed this in all versions of ibooks, and have given up on it. Images in ibooks are usually indented on my ipad, and I have found the only reliable way to insert pictures are using svg. They are not treated the same way.

[whbenson]

Yow! This really works. Thanks for posting this. I wonder how you figured it out? btw, there's a blog posting from several years ago http://infogridpacific.typepad.com/u...s-in-epub.html about another issue solved using span, though it doesn't seem to be related.
-Bill

[PageLab]

Originally Posted by whbenson

I wonder how you figured it out?

A lot of trial and error. Debugging can be painful in eBooks with complex formatting. I didn't see it causing problems in other reading systems, so I will assume it's safe.