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


Oxford-eBooks
03-20-2012, 10:18 AM
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?
:chinscratch:

Oxford-eBooks
03-20-2012, 10:32 AM
Seems I'm not alone in this...

http://indesignsecrets.com/forum/epub-and-ebook/type-overlaps-text-wrap-images-in-ibooks

AlexBell
03-21-2012, 04:48 AM
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
03-21-2012, 03:24 PM
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
03-21-2012, 05:44 PM
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
03-21-2012, 06:14 PM
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
03-21-2012, 11:01 PM
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
03-22-2012, 04:19 AM
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
03-24-2012, 04:45 PM
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
04-25-2012, 03:21 AM
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
06-29-2012, 07:28 AM
Just got another book with this prob :(

Any new informations concerning that issue?

PageLab
08-24-2012, 07:25 PM
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
08-25-2012, 06:52 AM
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
08-26-2012, 01:01 PM
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/using_epub/2010/10/dirty-little-hacks-in-epub.html about another issue solved using span, though it doesn't seem to be related.
-Bill

PageLab
08-27-2012, 12:27 AM
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.

ChuckH
09-20-2012, 05:05 AM
It looks like iBooks 2.2 in IOS 6 has gone a long way to resolving this issue; wrapping looks okay so far....

PageLab
09-20-2012, 09:20 AM
That's great news, I'm interested to know what other problems this update have solved.

PageLab
09-20-2012, 09:32 AM
Looks like MathML now works fine in this new version: https://twitter.com/rahtz/status/248686065307762688/photo/1

Hitch
04-19-2013, 07:32 PM
It looks like iBooks 2.2 in IOS 6 has gone a long way to resolving this issue; wrapping looks okay so far....

Well, whatever 2.2 has done in iOS6, it hasn't done anything for the older iPads. The problem still exists, and nothing--not even the fix shown in this thread--seems to solve it.

Hitch

JSWolf
04-19-2013, 07:34 PM
It looks like iBooks 2.2 in IOS 6 has gone a long way to resolving this issue; wrapping looks okay so far....

Unless you can only sell to those using iBooks on iOS 6, don't bother as you will piss off people on iOS 5 on the iPad 1.

Hitch
04-19-2013, 07:53 PM
Unless you can only sell to those using iBooks on iOS 6, don't bother as you will piss off people on iOS 5 on the iPad 1.

Hey, Wolfie:

That's exactly right. We've struggled with a book for a loooooooooong time now, in which this is happening, and only right at the front (of course) of the accursed book. There are millions of iPad 1's out there. Nothing, and I mean, nothing, has solved it, not even consulting with Liz. The client has an iPad 1 (I have one for testing), and while we've gotten it to not happen, the resulting element (the div containing the image/caption) looks kinda ugly. It's not happy-making. There's no way to limit the sales of regular ol' books to iOS6, either.

And, don't get me started about having to code, recode, re-re-code, this ePUB for iBooks only! The end result can't even function remotely in ADE/Nook, etc., so of course, we've basically made 3 books. Very frustrating. God forfend this client decides to go to SW, we'll be up to FOUR, just in ePUB. That blows.

H

JSWolf
04-19-2013, 10:31 PM
Hey, Wolfie:

That's exactly right. We've struggled with a book for a loooooooooong time now, in which this is happening, and only right at the front (of course) of the accursed book. There are millions of iPad 1's out there. Nothing, and I mean, nothing, has solved it, not even consulting with Liz. The client has an iPad 1 (I have one for testing), and while we've gotten it to not happen, the resulting element (the div containing the image/caption) looks kinda ugly. It's not happy-making. There's no way to limit the sales of regular ol' books to iOS6, either.

It does suck big time that Apple has not put iOS 6 on the iPad 1. What they've done is cause a split of iBooks where it works differently. People with an iPad 1 are going to buy an eBook and it will look like shite because it was coded and looked at for an iOS 6 iPad. If it has to be ugly code to work, so be it. Blame Apple for that. But don't be surprised if some future update breaks your ugly code. It would be so much easier if Apple could allow eBooks to be sold based on the version of iOS so if it's working with iBooks on iOS 6 and not iOS 5, those with an iPad 1 won't be able to buy it.

And, don't get me started about having to code, recode, re-re-code, this ePUB for iBooks only! The end result can't even function remotely in ADE/Nook, etc., so of course, we've basically made 3 books. Very frustrating. God forfend this client decides to go to SW, we'll be up to FOUR, just in ePUB. That blows.

Have you tried direct ePub uploading to SW again to see if maybe it's been fixed?

JSWolf
04-19-2013, 10:32 PM
It looks like iBooks 2.2 in IOS 6 has gone a long way to resolving this issue; wrapping looks okay so far....

If it doesn't work with iBooks on iOS 5, take your eBook and DO NOT SELL IT VIA APPLE!

Hitch
04-20-2013, 08:19 AM
It does suck big time that Apple has not put iOS 6 on the iPad 1. What they've done is cause a split of iBooks where it works differently. People with an iPad 1 are going to buy an eBook and it will look like shite because it was coded and looked at for an iOS 6 iPad. If it has to be ugly code to work, so be it. Blame Apple for that. But don't be surprised if some future update breaks your ugly code. It would be so much easier if Apple could allow eBooks to be sold based on the version of iOS so if it's working with iBooks on iOS 6 and not iOS 5, those with an iPad 1 won't be able to buy it.</quote>

No, mon sweetie, it's not the code that's ugly (well...maybe), it's that the result is not the sort of nice, smooth user experience I like. The images are ever-so-slightly out of top-alignment with the top line of the text...that type of nitpicky little thing. It drives me batshit.



[quote]Have you tried direct ePub uploading to SW again to see if maybe it's been fixed?

I have not, but have now had...3-4(?) clients who have. It has also had the advent of some joy-suckage.

And I concur with you: if a book solely works on iOS6, (unless it's a fixed-format book which can be limited from being sold on iOS5 books), it should not be sold.

Thx,
Hitch

dgatwood
04-20-2013, 04:43 PM
If it bothers you enough, file a Radar with Apple asking for iBooks to include its own copy of WebKit so that its behavior won't depend on what OS it is running on.

That said, if there's a difference in behavior, that probably means that iBooks is setting some magic -webkit- properly that is supported on iOS 6 and not on iOS 5. So you can probably make them consistent by changing that property. Then you'll still have to tweak it to make iOS 5 look right, but at least you won't have to do extra work to keep iOS 6 from breaking while you're doing it.

Some good WebKit properties to define include:

html {
-webkit-line-box-contain: block inline replaced !important;
line-box-contain: block inline replaced !important;
-webkit-nbsp-mode: normal;
}

html body {
-webkit-hyphens: auto; /* if you want auto-hyphenation, else manual */
-webkit-line-box-contain: block inline replaced !important;
line-box-contain: block inline replaced !important;
-webkit-font-smoothing: antialiased;
}

p {
-webkit-line-box-contain: block inline replaced !important;
line-box-contain: block inline replaced !important;
}


I recommend taking a look at the UA stylesheet for iBooks. It's fairly easy to do.


Run iTunes.
Right-click (or control-click) on iBooks and choose "Show in Finder".
Make a copy of the IPA file in another location.
Rename the copy to end in .zip.
Double-click the ZIP file.
Right-click the resulting IPA package and choose "Show Package Contents".
Double-click "Payload".
Right-click the iBooks.app bundle and choose "Show Package Contents".
Examine the CSS files:

AEAssetShare.css
user_stylesheet_base.css.tmpl
user_stylesheet_flowable.css.tmpl (this is the important one)
user_stylesheet_picturebook.css.tmpl

Hitch
04-20-2013, 05:33 PM
If it bothers you enough, file a Radar with Apple asking for iBooks to include its own copy of WebKit so that its behavior won't depend on what OS it is running on.

That said, if there's a difference in behavior, that probably means that iBooks is setting some magic -webkit- properly that is supported on iOS 6 and not on iOS 5. So you can probably make them consistent by changing that property. Then you'll still have to tweak it to make iOS 5 look right, but at least you won't have to do extra work to keep iOS 6 from breaking while you're doing it.

Some good WebKit properties to define include:

html {
-webkit-line-box-contain: block inline replaced !important;
line-box-contain: block inline replaced !important;
-webkit-nbsp-mode: normal;
}

html body {
-webkit-hyphens: auto; /* if you want auto-hyphenation, else manual */
-webkit-line-box-contain: block inline replaced !important;
line-box-contain: block inline replaced !important;
-webkit-font-smoothing: antialiased;
}

p {
-webkit-line-box-contain: block inline replaced !important;
line-box-contain: block inline replaced !important;
}


I recommend taking a look at the UA stylesheet for iBooks. It's fairly easy to do.


Run iTunes.
Right-click (or control-click) on iBooks and choose "Show in Finder".
Make a copy of the IPA file in another location.
Rename the copy to end in .zip.
Double-click the ZIP file.
Right-click the resulting IPA package and choose "Show Package Contents".
Double-click "Payload".
Right-click the iBooks.app bundle and choose "Show Package Contents".
Examine the CSS files:

AEAssetShare.css
user_stylesheet_base.css.tmpl
user_stylesheet_flowable.css.tmpl (this is the important one)
user_stylesheet_picturebook.css.tmpl




Thanks.

Actually, the divine Liz is looking at this one particular book as I write this. I devoutly hope that she finds a cure, and I'll tell her about this post. She has the mindset for all the testing; we've made 17 full ePUBs on this one, plus some untold number of partial-test books, and I'm at the "can't-look-at-it-one-more-time" point. Having to rewrite Apple's own coding is something that makes me grind my teeth, TBH. I'll do it if I have to.

And, Dag? Thanks, really. My intense dislike of Apple's arrogance should not make you think I am not grateful for this time and effort on your part, I am.

Hitch

ChuckH
04-26-2013, 12:12 PM
I'm not pleased with iBooks either, but have to code for it the way it is until it catches up with the way things ought to be. I only have two books on the iBookstore, and in both of them I've included a note to the reader saying specifically that it will look best on an ipad that uses iOS 6 and at least iBooks 2.2 .

I've had to "dumb down" the book I'm working on right now to deal with iBooks shortcomings. It pissed me off to have to make the changes but that's what I did.

Best,
Chuck

Hitch
04-26-2013, 03:44 PM
I'm not pleased with iBooks either, but have to code for it the way it is until it catches up with the way things ought to be. I only have two books on the iBookstore, and in both of them I've included a note to the reader saying specifically that it will look best on an ipad that uses iOS 6 and at least iBooks 2.2 .

I've had to "dumb down" the book I'm working on right now to deal with iBooks shortcomings. It pissed me off to have to make the changes but that's what I did.

Best,
Chuck

Yes. Liz couldn't tweak ours, or, rather, assist us with making it work with the iOS 5 bug, given what's needed, so we've done the same thing--centered images, no floating, yadda. Infuriating, but the solution we'd implemented would likely break on iOS6, and I'm not going to screw around with fixing Apple's web-kit for a book. That's nuts. And I'm pretty damned pissed about it myself.

Hitch

dgatwood
05-03-2013, 03:57 PM
I've had to "dumb down" the book I'm working on right now to deal with iBooks shortcomings. It pissed me off to have to make the changes but that's what I did.

By any chance, do you have an EPUB that demonstrates this bug? I'd like to throw a bug at the iBooks team and see if they have any idea what's going on.

ChuckH
05-10-2013, 01:55 AM
I don't have an example, but here's one of the issues: CSS3 allows for multi-column text, however, in iBooks, such columns are not split properly across pages. You would expect to see the first chunk displayed in multi-columns on the first page where the MC text begins, followed by the rest in proper column order across however many number of pages are required.

But iBooks flows the first column down from one page to the next, THEN, it goes back to the starting page and proceeds to flow the remainder down in the second column (across multiple pages mind you).

It's the stupid behaviors like this that really burn me.

Best,
Chuck

ChuckH
05-10-2013, 01:56 AM
Edit: I do have a reference in one of my books, which I published hoping to see the bug fixed in an iBooks update this spring (which didn't happen). Check out the List of Illustrations in this book: https://itunes.apple.com/us/book/the-mysterious-island/id614718023?mt=11

I don't have an example, but here's one of the issues: CSS3 allows for multi-column text, however, in iBooks, such columns are not split properly across pages. You would expect to see the first chunk displayed in multi-columns on the first page where the MC text begins, followed by the rest in proper column order across however many number of pages are required.

But iBooks flows the first column down from one page to the next, THEN, it goes back to the starting page and proceeds to flow the remainder down in the second column (across multiple pages mind you).

It's the stupid behaviors like this that really burn me.

Best,
Chuck