Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-20-2012, 10:18 AM   #1
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
Question 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>
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.

Code:
.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%

Code:
	.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 is offline   Reply With Quote
Old 03-20-2012, 10:32 AM   #2
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
Seems I'm not alone in this...

http://indesignsecrets.com/forum/epu...ages-in-ibooks
Oxford-eBooks is offline   Reply With Quote
Old 03-21-2012, 04:48 AM   #3
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,335
Karma: 3943904
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
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.
AlexBell is offline   Reply With Quote
Old 03-21-2012, 03:24 PM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,488
Karma: 19465195
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by AlexBell View Post
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.
JSWolf is offline   Reply With Quote
Old 03-21-2012, 05:44 PM   #5
Oxford-eBooks
Connoisseur
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 86
Karma: 12096
Join Date: May 2010
Device: Loads!
Quote:
Originally Posted by JSWolf View Post
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.
Oxford-eBooks is offline   Reply With Quote
Old 03-21-2012, 06:14 PM   #6
Belle2Be
Peace, Love, and Books
Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.Belle2Be ought to be getting tired of karma fortunes by now.
 
Belle2Be's Avatar
 
Posts: 355
Karma: 242738
Join Date: Sep 2010
Device: Kindle 3(3g), NookColor
Quote:
Originally Posted by Oxford-eBooks View Post
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
Belle2Be is offline   Reply With Quote
Old 03-21-2012, 11:01 PM   #7
whbenson
Enthusiast
whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.
 
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
whbenson is offline   Reply With Quote
Old 03-22-2012, 04:19 AM   #8
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,335
Karma: 3943904
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
Quote:
Originally Posted by JSWolf View Post
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.
AlexBell is offline   Reply With Quote
Old 03-24-2012, 04:45 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,488
Karma: 19465195
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
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.
JSWolf is offline   Reply With Quote
Old 04-25-2012, 03:21 AM   #10
ChuckH
Junior Member
ChuckH began at the beginning.
 
Posts: 5
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 03:50 AM. Reason: Addendum
ChuckH is offline   Reply With Quote
Old 06-29-2012, 07:28 AM   #11
georg3200
Connoisseur
georg3200 began at the beginning.
 
Posts: 53
Karma: 10
Join Date: Nov 2008
Device: none
Just got another book with this prob

Any new informations concerning that issue?
georg3200 is offline   Reply With Quote
Old 08-24-2012, 07:25 PM   #12
PageLab
Connoisseur
PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.
 
PageLab's Avatar
 
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;
}
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:

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;	
}
PageLab is offline   Reply With Quote
Old 08-25-2012, 06:52 AM   #13
Iznogood
Guru
Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.
 
Iznogood's Avatar
 
Posts: 929
Karma: 15752887
Join Date: Mar 2011
Location: Norway
Device: Ipad, kindle paperwhite
Quote:
Originally Posted by AlexBell View Post
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.
Iznogood is offline   Reply With Quote
Old 08-26-2012, 01:01 PM   #14
whbenson
Enthusiast
whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.whbenson ought to be getting tired of karma fortunes by now.
 
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 04:31 AM. Reason: fixed URL link
whbenson is offline   Reply With Quote
Old 08-27-2012, 12:27 AM   #15
PageLab
Connoisseur
PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.PageLab ought to be getting tired of karma fortunes by now.
 
PageLab's Avatar
 
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
Quote:
Originally Posted by whbenson View Post
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.

Last edited by PageLab; 08-29-2012 at 12:39 AM. Reason: bad spelling
PageLab is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Image Quality, iBooks vs. Kindle twowheels General Discussions 4 03-01-2012 10:58 PM
iBooks cropping text top and bottom Alan Newson ePub 5 02-28-2012 09:28 AM
Image zoom problem in iBooks jharker ePub 6 10-02-2010 08:41 PM
image zoom anomaly in iBooks whbenson Apple Devices 1 09-13-2010 11:51 AM
broken screen. is there a program that skims off top one inch of screen? pennpin Sony Reader 5 08-19-2009 05:42 PM


All times are GMT -4. The time now is 06:44 PM.


MobileRead.com is a privately owned, operated and funded community.