iBooks and full page images problem

[pdurrant]

Someone has pointed out that my free copy of Kim in the library here doesn't work in iBooks.

The problem seems to be they way I've done the full page images.

In the HTML, my images are like this:

<p id="toi_0" class="fullpage"><img src="zamzammah.jpg" alt="Zam-Zammah" height="100%" /></p>


The relevant bits of the CSS are:

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

@page {
margin: 5pt;
}


p.fullpage {text-indent: 0; text-align: center; margin: 0; page-break-before: always; page-break-after: always}


Other ePub renderers seem to be OK with this. Does anyone come across this problem (or a similar one) before, or have a suggestion as to how to display full-height images in an ePub that iBooks does like?

Thanks.

[Toxaris]

The problem is, as far as I know iBooks will choke on the combination of @page and height in the html,body.

If you use that, it can also happen that only a few pages are displayed instead of the full chapter.

Why don't you use the SVG wrapper some use for covers? That seems to work on iBooks.

[pdurrant]

Originally Posted by Toxaris

The problem is, as far as I know iBooks will choke on the combination of @page and height in the html,body.

If you use that, it can also happen that only a few pages are displayed instead of the full chapter.

Why don't you use the SVG wrapper some use for covers? That seems to work on iBooks.

I could use an SVG wrapper, but that won't make the image full screen if the enclosing block isn't full screen.

If iBooks can't cope with @page and height in html,body, I suppose one or the other will have to go.

Does anyone have example code for doing full page height images that works nicely with iBooks?

[Toxaris]

Are you sure? My covers are always full screen, even if the image is of a lower resolution. The image is then resized.

You mistook me, both of them cause the problem. I did some testing with this and according to my guinea pig, only if I removed both the ePUB worked on iBooks.

[pdurrant]

Originally Posted by Toxaris

Are you sure? My covers are always full screen, even if the image is of a lower resolution. The image is then resized.

You mistook me, both of them cause the problem. I did some testing with this and according to my guinea pig, only if I removed both the ePUB worked on iBooks.

I'm sure covers will get resized. These are full page illustrations in the middle of the text.

I'll do some experimentation shortly. Thanks.

[Sunspark]

Check your private messages, I sent you an example of a book from here that has full page images in the text that works great.

[pdurrant]

Originally Posted by Sunspark

Check your private messages, I sent you an example of a book from here that has full page images in the text that works great.

As far as I could tell, that sample had no special handling of th eimages at all. If they display full-page it's by coincidence. But I will double-check.

I need to find a solution that works for other ePub renderers, not just iBooks.

[Sunspark]

If you use CSS vertical-align, try without that tag and see if it makes a difference.

[AlexBell]

I use an the admittedly low tech


<div class="centre">
<img src="images/divider.png" alt="Max and children" />
</div>

where divider.png is 790px high, and it works on a Sony PRS T1, a Kindle3, and the iPad 2

[JSWolf]

@page {
margin: 5pt;
}

Bad coding for iBooks given that iBooks already uses a freaking huge margin as is and creating even more margin makes things worse. On an iPhone it's pathetic. Just imagine taking away even more screen space. Not good at all. Besides, there's really no need for @page as you can do what you want with the margins in the body.

[Toxaris]

Originally Posted by JSWolf

Besides, there's really no need for @page as you can do what you want with the margins in the body.

That is not exactly true. If you want to have your margins the same on all pages, you will have to set the @page.

[pdurrant]

Originally Posted by Toxaris

That is not exactly true. If you want to have your margins the same on all pages, you will have to set the @page.

Yep. You can set left and right margins without a problem, but only @page can give you top and bottom margins on each page.

But I might be willing to give it up. I just need to do some tests because iBooks isn't compliant. And I don't have time right now.

[Toxaris]

I leave it in and give people with iBooks a warning. Since most books are for myself anyway and I don't use iBooks, that is not a problem.