03-20-2012, 09:18 AM | #1 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
iBooks: Text overflowing image if it's at top of screen.
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 Code:
<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> Code:
.illustrationRSM{ float:right; margin-left:1em; margin-top:0.5em; margin-bottom:0.5em; width:30%; display:inline-block; /* Keeps caption together. */ } Code:
.illustrationL img, .illustrationR img, .illustrationLSM img, .illustrationRSM img{ /* vertical-align:top; */ width:100%; } |
03-20-2012, 09:32 AM | #2 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
|
Advert | |
|
03-21-2012, 03:48 AM | #3 |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
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. |
03-21-2012, 02:24 PM | #4 | |
Resident Curmudgeon
Posts: 74,329
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
03-21-2012, 04:44 PM | #5 | |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
Quote:
I'd complain to Apple, but I somehow get the feeling that I'd be better off screaming at the sea. |
|
Advert | |
|
03-21-2012, 05:14 PM | #6 |
Peace, Love, and Books
Posts: 355
Karma: 1242738
Join Date: Sep 2010
Device: Kindle 3(3g), NookColor
|
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
|
03-21-2012, 10:01 PM | #7 |
Enthusiast
Posts: 37
Karma: 493532
Join Date: May 2010
Device: ipad
|
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 |
03-22-2012, 03:19 AM | #8 | |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
Quote:
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. |
|
03-24-2012, 03:45 PM | #9 |
Resident Curmudgeon
Posts: 74,329
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
04-25-2012, 02:21 AM | #10 |
Member
Posts: 10
Karma: 10
Join Date: Apr 2012
Location: NW Indiana
Device: iPad
|
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. Last edited by ChuckH; 04-25-2012 at 02:50 AM. Reason: Addendum |
06-29-2012, 06:28 AM | #11 |
Connoisseur
Posts: 59
Karma: 10
Join Date: Nov 2008
Device: none
|
Just got another book with this prob
Any new informations concerning that issue? |
08-24-2012, 06:25 PM | #12 |
Connoisseur
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
|
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:
Code:
<p><span class = "float"><img src="images/image.png" alt = "" />image caption</span>paragraph text</p> Code:
.float { float: left; margin-right: 1em; margin-bottom: 0.5em; } 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: Code:
<ul> <li class="inside"><span class = "float"><img src="images/image.png" alt = "" /></span>list item text</li> </ul> Code:
li.inside { list-style-position: inside; } |
08-25-2012, 05:52 AM | #13 | |
Guru
Posts: 932
Karma: 15752887
Join Date: Mar 2011
Location: Norway
Device: Ipad, kindle paperwhite
|
Quote:
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. |
|
08-26-2012, 12:01 PM | #14 |
Enthusiast
Posts: 37
Karma: 493532
Join Date: May 2010
Device: ipad
|
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 Last edited by Jellby; 08-27-2012 at 03:31 AM. Reason: fixed URL link |
08-26-2012, 11:27 PM | #15 |
Connoisseur
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
|
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.
Last edited by PageLab; 08-28-2012 at 11:39 PM. Reason: bad spelling |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Image Quality, iBooks vs. Kindle | twowheels | General Discussions | 4 | 03-01-2012 09:58 PM |
iBooks cropping text top and bottom | Alan Newson | ePub | 5 | 02-28-2012 08:28 AM |
Image zoom problem in iBooks | jharker | ePub | 6 | 10-02-2010 07:41 PM |
image zoom anomaly in iBooks | whbenson | Apple Devices | 1 | 09-13-2010 10:51 AM |
broken screen. is there a program that skims off top one inch of screen? | pennpin | Sony Reader | 5 | 08-19-2009 04:42 PM |