View Full Version : Strange iBooks problem: only


Hatgirl
05-25-2011, 03:09 PM
I helped an author put together a free promotional ebook of some of his short stories. A reader has just gotten back to me with a weird problem in how the EPUB (attached) is displaying in iBooks:

i am using the iBooks app on both the iPhone and the iPad.

basically each story has two pages of text before the next story just starts. if i change the text size i get more text per page, but still only 2 pages. I am confident that this is an iBooks issue.

Does anyone have any idea what's going on? I don't have access to an iPad or iPhone, and Apple in its infinite wisdom has not seen fit to release an emulator of any kind.

I hand-coded everything so the css is pretty clean. I of course have each individual story in its own xhtml file... I'm stumped.

*headdesk* I thought I could never hate anything more than kindlegen. It seems iBooks has managed it.

Hatgirl
05-25-2011, 03:12 PM
... and I've managed to mess up the thread title *headdesk*

Could some friendly mod change that from "Strange iBooks problem: only" to "Strange iBooks problem: only some text displaying" :thanks:

Toxaris
05-25-2011, 04:09 PM
This has been reported before as an iBooks issue. I haven't seen a good cause or solution.

Hatgirl
05-25-2011, 05:02 PM
This has been reported before as an iBooks issue. I haven't seen a good cause or solution.

That's one hell of an "issue"... :eek:

Can you point me in the direction of one these reports you mention? I haven't been able to find any other accounts of this problem. Maybe I'm using the wrong keywords...

Toxaris
05-26-2011, 05:29 AM
I got a report from an user and I know my CSS is correct. The other report I remember is from last week. There there were some issues with margins I believe but that was not the cause. It could be in the Sigil subforum.

Toxaris
06-10-2011, 02:28 PM
Just a thought, could it be that iBooks does not support @page?

JSWolf
06-10-2011, 07:23 PM
Just a thought, could it be that iBooks does not support @page?

There is a lot that iBooks doesn't support correctly.

Toxaris
06-11-2011, 03:43 AM
Since I don't own a device which supports iBooks, I cannot check. I would like to know, not that I will stop using it though...

koadic
06-11-2011, 12:20 PM
I think I see what may be causing your issue, but it is only speculation as I don't have an iPod/Pad/Phone to test it on. In the style.css, try removing the 'height: 100%;' from the 'html, body' section and see if that remedies your situation. I believe that it is limiting everything wrapped by the html and body tags (each xhtml file) to '100%' of one ePub 'page', although one 'page' usually equals two 'screens' at normal font sizes (which is what you're getting).
html, body {
height: 100%;
margin: 0;
padding:0;
border-width:0;
}
The only time I would use the 'height: 100%;' (in the .css) or 'height="100%"' (inline) is for an img tag that I want full screen, but in those cases I find it even better to use svg instead.


Another couple things I see that you might want to do differently in the style.css (coming from my own experience) are:

Try to eliminate adding 'margins' to the top of paragraphs, and instead try to only add to the bottom. If you must add to the top, try to use 'padding' instead. For instance, the first time I opened up the epub in ADE, one of the paragraphs with the 'centerplusgap' class only showed half of the line (vertically), as the specified 'margin-top' of 2em pushed the bottom half of the line below the screen. If you had used padding, that line would have been pushed to the next page instead.

In addition, since you already specified a margin-top (again, you should use padding instead) and -bottom for 'p', there is no need to do so for every additional p.class, you only need to include whatever you want changed from the initial settings (such as text-indent, as you change it from 2em to 0em, or adding a text-align).

Toxaris
06-11-2011, 04:40 PM
The height:100% should not pose any issues of course. If it is, put it on the silly list of iBooks.

Hatgirl
06-11-2011, 07:34 PM
I think I see what may be causing your issue, but it is only speculation as I don't have an iPod/Pad/Phone to test it on. In the style.css, try removing the 'height: 100%;' from the 'html, body' section and see if that remedies your situation. I believe that it is limiting everything wrapped by the html and body tags (each xhtml file) to '100%' of one ePub 'page', although one 'page' usually equals two 'screens' at normal font sizes (which is what you're getting).
html, body {
height: 100%;
margin: 0;
padding:0;
border-width:0;
}
The only time I would use the 'height: 100%;' (in the .css) or 'height="100%"' (inline) is for an img tag that I want full screen, but in those cases I find it even better to use svg instead.


Yeah, that was the obvious first candidate. I tried deleting that section of code as soon as I heard about the problem. I sent the new file to an iGuineaPig - no change. It seems I am just going to have to keep commenting out code until I figure out the source of the problem. Rather than irritate my iGuineaPig with 30 different files, I have had to accept that I am just going to have to get my hands on an iPad for a few hours :angry:

The combination of html, body { height: 100%; margin: 0; padding:0; border-width: 0; }
@page { margin: 5pt; } is very common in epub tutorials. Even on the MobileRead wiki itself (http://wiki.mobileread.com/wiki/CSS_HowTo).


Another couple things I see that you might want to do differently in the style.css (coming from my own experience) are:

Try to eliminate adding 'margins' to the top of paragraphs, and instead try to only add to the bottom. If you must add to the top, try to use 'padding' instead. For instance, the first time I opened up the epub in ADE, one of the paragraphs with the 'centerplusgap' class only showed half of the line (vertically), as the specified 'margin-top' of 2em pushed the bottom half of the line below the screen. If you had used padding, that line would have been pushed to the next page instead.


Ah, but Kindlegen doesn't convert padding, only margins, and I had to provide a mobi version as well as an epub *sigh*

As for margin-top vs margin-bottom - have you ever used FBReader? For some reason it can't view margin-bottom, only margin-top. And a surprising number of cheap ereaders, like my awful Binatone LCD reader, use a version of FBReader (probably because it can run on Linux and is open source). So I tried to cater for that by picking margin-top instead of margin-bottom.


In addition, since you already specified a margin-top (again, you should use padding instead) and -bottom for 'p', there is no need to do so for every additional p.class, you only need to include whatever you want changed from the initial settings (such as text-indent, as you change it from 2em to 0em, or adding a text-align).
Yeah, I'll hold my hand up to that as being just a particular quirk of mine. For some reason I find it easier to troubleshoot weird errors if I lockdown what I want in my unusual classes, even if that particular, say, indent, is already covered by my initial settings. OK, so it's not exactly best practice but it's helped me figure out quite a few odd problems so I'll stick with it ;)

So, in summary, Apple, Amazon and cheap ereader makers are driving me insane :-D

Toxaris
06-12-2011, 09:03 AM
Have you tried without the @page?

Toxaris
06-13-2011, 10:21 AM
With some help I managed to change one of my epubs in a manner that iBooks sees all pages...

It is actually the combination of @page and height:100% which causes this problem.

Can anyone sent Apple the IDPF specifications together with a CSS tutorial?

Hatgirl
06-17-2011, 06:43 PM
With some help I managed to change one of my epubs in a manner that iBooks sees all pages...

It is actually the combination of @page and height:100% which causes this problem.

Can anyone sent Apple the IDPF specifications together with a CSS tutorial?

Toxaris, you are completely right! :thumbsup:

I managed to get my hands on an iPad this evening and tried a few css variations. As Toxaris said, removing the following code from my epub allows it to be viewed in iBooks:

html, body {
height: 100%;
margin: 0;
padding:0;
border-width:0;
}

@page {margin: 5pt;}

Right. So, the reason that code was in there was to remove any padding imposed by viewing software and make a margin on evey screen-page (not just ADE-page). I do want a 5pt margin in case the software doesn't impose a margin, so any ideas on the best way to achieve this?

Jellby
06-18-2011, 03:16 AM
Doesn't just this work?:

@page { margin: 5pt; }
html body { margin: 0; padding: 0; }

(Note there's no comma between "html" and "body", meaning "body inside html" instead of "body and html". I use this because in my Cybook, "body" alone seems to be overriden by some internal style of the reader, while "html body" has a higher priority and gets the effect done.)

Hatgirl
06-18-2011, 05:13 AM
Doesn't just this work?:

@page { margin: 5pt; }
html body { margin: 0; padding: 0; }

(Note there's no comma between "html" and "body", meaning "body inside html" instead of "body and html". I use this because in my Cybook, "body" alone seems to be overriden by some internal style of the reader, while "html body" has a higher priority and gets the effect done.)

No, because iBooks can't handle @page