More iPad/iBooks anomalies

[AlexBell]

With Jellby's kind help I've been able to get my handmade ePub documents to show the cover in the bookshelf, and to open at the cover, and I've also learned how to centre paragraphs where necessary.

But I have found two more anomalies and would like some help.

- When I go to the TOC the cover is not shown as an option, even though it shows in the same file on my Sony - that is, the TOC on the iPad starts at the option below what is the first one in the toc.ncx file.

- I'm doing a book which has text on the title page and an image below that. The markup is

<div class="centre" style="margin-top: 40px;">
<img src="images/greenman.png" alt="Green man" width="40%" />
</div>

which works perfectly well on my Sony and validates to W3C standards. But on my iPad the image takes up the full width of the screen - apart from the iPad/iBooks imposed wide margins. I use the same markup on another section of the ebook to show an image at 30% width, and very similar markup in a different ebook to float an image to one side of the screen and have the text flow around it. Both these examples work as well on the iPad/iBooks as they do on the Sony/ADE.

I've tried several solutions, like putting the markup in the CSS, putting a div around the div shown above, and so on. They work and validate on my Sony, but don't work in the iPad.

Can anyone help please, or point me to a source which discusses anomalies in iBooks?

[st_albert]

Originally Posted by AlexBell

Can anyone help please, or point me to a source which discusses anomalies in iBooks?

Well, Elizabeth Castro's blog and her book "EPUB Straight to the Point" are very good resources regarding the quirks of iBooks and iPad. I'd recommend the book even if you don't have problems with iBooks.

Might help if you put the markup in CSS and add the !important modifier, thus:

width: 40% !important;

[AlexBell]

Originally Posted by st_albert

Well, Elizabeth Castro's blog and her book "EPUB Straight to the Point" are very good resources regarding the quirks of iBooks and iPad. I'd recommend the book even if you don't have problems with iBooks.

Might help if you put the markup in CSS and add the !important modifier, thus:

width: 40% !important;

Thanks, that's the one thing I haven't tried so far. But to make it even more confusing I have tried putting another image in place of the one that insists on taking full width (using exactly the same markup), and that second image behaves as expected. But when I put the first image back it still insists on spreading to full page width. Perhaps it's something intrinsic to that image, but I can't see how. The image that misbehaves is square, and the other one is not. But that explanation doesn't make any sense at all.

I have Elizabeth Castro's book both as an ebook and as a print book, and I agree that it's an excellent book. But I'm not convinced that her explanation for non-centering paragraphs is correct; I have several ebooks where centred paragraphs behave the same on an iPad as they do on my Sony, even though they have other markup (eg font-size) in the same class. And I have seen several occasions where the same markup works well in one iPad/iBooks ebook and insists on being flush left in another. I admit that the span hack brings it back to being centered.

This is almost as much fun as we had in the olden days in getting websites to behave the same on different browsers.

[adv_dp_fan]

I am guessing the two images are not the same size. iBooks defaults to displaying an image at full size (up to the size of the screen), unless you constrain it in the surrounding <div> by setting the height and width and then tell the <img> to display at 100%. The user can double tap the image and it will zoom out to display full size. I am guessing this may be your issue.

[AlexBell]

Originally Posted by adv_dp_fan

I am guessing the two images are not the same size. iBooks defaults to displaying an image at full size (up to the size of the screen), unless you constrain it in the surrounding <div> by setting the height and width and then tell the <img> to display at 100%. The user can double tap the image and it will zoom out to display full size. I am guessing this may be your issue.

Thanks for your comments. I don't set the image size in the ePubs I do, I just set a percentage of the screen width.

I don't for a moment doubt your accuracy regardin iBooks behaviour, but I'm not sure that your explanation is correct. Since my last post I've used a different image in the same place - same markup - and it does not expand. And I've used the this same image on the next 'page' set at a smaller percentage, and it does not expand and appears at the different percentage.

Could you give me a reference please to iBook's settings and behaviour? Is there an 'iBooks manual'?

[adv_dp_fan]

Originally Posted by AlexBell

Thanks for your comments. I don't set the image size in the ePubs I do, I just set a percentage of the screen width.

I don't for a moment doubt your accuracy regardin iBooks behaviour, but I'm not sure that your explanation is correct. Since my last post I've used a different image in the same place - same markup - and it does not expand. And I've used the this same image on the next 'page' set at a smaller percentage, and it does not expand and appears at the different percentage.

Could you give me a reference please to iBook's settings and behaviour? Is there an 'iBooks manual'?

There is an "iBooks manual" but you have to have to be set up as a publisher with Apple to get a copy. I'm an Apple developer and they won't even let me have a copy. I have read it though from a friend who is a publisher.

Is your second working image the exact same dimensions as the first image that doesn't work? If it isn't then that would be one reason you see a change.

The only way I have been able to get images to work properly in iBooks is to set a style with a "width: XXpx; height: XXpx" of whatever size I wanted to use and then wrap the <img> in a <div> that uses the above style and setting the <img> style to 100%.

I got this from Elizabeth Castro's blog that was linked to you above. After reading her comments and playing around with it I finally got it to work for my epubs. Images in iBooks are a pain because Apple wants to display the image full size no matter what you tell the image size constraints to be in the tag.

[AlexBell]

Originally Posted by adv_dp_fan

Images in iBooks are a pain because Apple wants to display the image full size no matter what you tell the image size constraints to be in the tag.

Thanks for your help, though I wish you hadn't told me that.

Right now I'm looking at my iPad, which is open at an ebook I converted from a Word document and made into an ePub. It has many images, some of which I have set to 50% width and floated to the right so that the text flows around it - using in fact markup I got from Elizabeth Castro's book. These images look good on my Sony though I haven't set height or width. And the exact same image with the exact same markup looks superb on the iPad. It certainly has not expanded to the full width of the screen.

I don't doubt your experience or expertise for a moment, but I do have the image on the iPad in front of me. So I'm even more confused that I was.

[adv_dp_fan]

They may have fixed that, there have been a couple of updates to iBooks since the image issues first came out and I had to use the code from her blog to fix them. Been using it ever since so maybe it isn't needed any more. That would be nice. Maybe I will try and go back and remove it from some epubs and reload them on the iPad and see what happens now.

[adv_dp_fan]

Oh one question, are you putting the size constraints in the image tag or in a container around the image tag?

[AlexBell]

Originally Posted by adv_dp_fan

Oh one question, are you putting the size constraints in the image tag or in a container around the image tag?

It's probably easier if I supply the CSS

div.illustration {
  margin: 0 0 0 0.5em; padding: 0;
  border: 1px solid black;
  width: 50%; 
  float: right; 
  }
  div.illustration img {
	border: 0; margin: 0; padding: 0;
    width: 100%;
	display: inline;
    }
  div.illustration p {
    margin: 0; padding: 0;
    text-align: center;
    text-indent: 0;
	font-size: smaller;
	} /* With thanks to Elizabeth Castro */ 
  div.illustration+p {text-indent: 0;} /* No indent for 1st para after an illustration */

and the HTML markup

  		<div class="illustration">
			<img src="images/ch03Luc.png" 
			alt="Luc and macaw"/> 
		</div>

Does this answer your question? This is from an ePub which works well on the Sony and the iPad/iBooks

[adv_dp_fan]

Okay, you are doing exactly what I was taking about then.

Checked last night with one of my epubs since I am using Apple's betas on my iPad at the moment and the issue still exists so they haven't changed anything.

[AlexBell]

Thanks.

[JSWolf]

How does one get a covert to show in the iBooks bookcase and to open at the cover? I have some ePub that do not show the cover properly in the bookcase. Thanks.

[wannabee]

Originally Posted by JSWolf

How does one get a covert to show in the iBooks bookcase and to open at the cover? I have some ePub that do not show the cover properly in the bookcase. Thanks.

This is what works for me.
Add the bold meta statement to your opf file refering to the cover image.
Refer to it in the manifest.
To make it open at the cover add the guide statement

<?xml version="1.0"?>
<package xmlns="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" unique-identifier="bookid" version="2.0">
<metadata>
<meta name="cover" content="cover-image" />
<dc:title>deleted</dc:title>
<dc:creator>deleted</dc:creator>
<dc:creator>deleted</dc:creator>
<dc:subject>breasts</dc:subject>
<dc:subject>breast cancer</dc:subject>
<dc:subject>cancer prevention</dc:subject>
<dc:subject>women's health</dc:subject>
<dc:subject>hormones</dc:subject>
<dc:subject>nutrition</dc:subject>
<dc:subject>diet</dc:subject>
<dc:description>deleted</dc:description>
<dcublisher>deleted</dcublisher>
<dc:date>2011</dc:date>
<dc:source />
<dc:relation />
<dc:coverage />
<dc:rights>All rights reserved</dc:rights>
<dc:identifier id="bookid">urn:uuid:deleted</dc:identifier>
<dc:language>en</dc:language>
<dcublisher>deleted</dcublisher>
</metadata>
<manifest>
<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml" />
<item id="bcpg" href="bcpg.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-1" href="bcpg-1.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-2" href="bcpg-2.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-3" href="bcpg-3.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-4" href="bcpg-4.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-5" href="bcpg-5.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-6" href="bcpg-6.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-7" href="bcpg-7.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-8" href="bcpg-8.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-9" href="bcpg-9.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-10" href="bcpg-10.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-11" href="bcpg-11.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-12" href="bcpg-12.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-13" href="bcpg-13.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-14" href="bcpg-14.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-15" href="bcpg-15.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-16" href="bcpg-16.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-17" href="bcpg-17.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-18" href="bcpg-18.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-19" href="bcpg-19.xhtml" media-type="application/xhtml+xml" />
<item id="bcpg-20" href="bcpg-20.xhtml" media-type="application/xhtml+xml" />
<item id="cover-image" href="images/your-cover-name.jpeg" media-type="image/jpeg" />
<item id="breast-final-fmt-jpeg" href="images/breast%20final_fmt.jpeg" media-type="image/jpeg" />
<item id="breast-structure-fmt-jpeg" href="images/breast-structure_fmt.jpeg" media-type="image/jpeg" />
<item id="breast1-fmt-jpeg" href="images/breast1_fmt.jpeg" media-type="image/jpeg" />
<item id="breast2-3-fmt-jpeg" href="images/breast2_3_fmt.jpeg" media-type="image/jpeg" />
<item id="breast4-fmt-jpeg" href="images/breast4_fmt.jpeg" media-type="image/jpeg" />
<item id="lymph-nodes-fmt-jpeg" href="images/lymph-nodes_fmt.jpeg" media-type="image/jpeg" />
<item id="css" href="template.css" media-type="text/css" />
</manifest>
<spine toc="ncx">
<itemref idref="bcpg" />
<itemref idref="bcpg-1" />
<itemref idref="bcpg-2" />
<itemref idref="bcpg-3" />
<itemref idref="bcpg-4" />
<itemref idref="bcpg-5" />
<itemref idref="bcpg-6" />
<itemref idref="bcpg-7" />
<itemref idref="bcpg-8" />
<itemref idref="bcpg-9" />
<itemref idref="bcpg-10" />
<itemref idref="bcpg-11" />
<itemref idref="bcpg-12" />
<itemref idref="bcpg-13" />
<itemref idref="bcpg-14" />
<itemref idref="bcpg-15" />
<itemref idref="bcpg-16" />
<itemref idref="bcpg-17" />
<itemref idref="bcpg-18" />
<itemref idref="bcpg-19" />
<itemref idref="bcpg-20" />
</spine>
<guide>
<reference type="cover" href="the-cover-filename.xhtml" />
</guide>
</package>

[AlexBell]

Originally Posted by JSWolf

How does one get a covert to show in the iBooks bookcase and to open at the cover? I have some ePub that do not show the cover properly in the bookcase. Thanks.

I do it a very slightly different way from wannabee - but whatever works

<meta name="cover" content="img1" /> {last line of metatdata}

<item id="img1" href="images/Cover.png" media-type="image/png" /> {from the manifest}

<item id="id1" href="Coverpage.html" media-type="application/xhtml+xml"/> {from the manifest}

<guide> {just after the manifest}
<reference type="cover" href="Coverpage.html" />
</guide>