DJHAP
Level 1
(4 points)
Q: ePub Images Don't Show on iPad
I have an ePub 2.0.1 book that:
- Passes EPUBCHECK with no errors
- Views fine on a Nook
- Views fine in Adobe Digital Editions
When I load it on the iPad 3 (everything at the latest level) with Book Proofer, the cover image shows fine but none of the other images show at all. No errors. No little boxes with question marks. The images simply are ommitted from the text.
None of the images are over the 2million pixel limit. In fact, all the images are around 200,000 pixels (500x400)
Some images ar JPG some are PNG - iBooks ignores both.
A typical reference to an image in the Chapter2.xhtml looks like this:
| <h2>Fabric Store - Buy a Tailor's Measuring Tape</h2> | |||
| <div class="APfigure"> | |||
| <div><img src="../images/Shirt/Tailors_Measuring_Tape.jpg" alt="tailor's measuring tape is small, thin, and rolls up conveniently" class="APePubImage" width="" /></div> | |||
| <p class="caption"><em>Figure 10 - Tailor's Measuring Tape</em></p> | |||
| </div> |
The heading shows up fine, the caption shows up fine. The image is simply missing. It looks like this:
The CSS for the APFigure and APImage classes is simply empty:
.APFigure {
}
.APePubImage {
}
We are using inhouse XML tooling based on XSLT to generate the ePub rather than a WYSIWYG tool like InDesign.
Nevertheless, everything looks fine here and it renders fine on other ePub readers. Any idea why the iPad is not rendering the images properly?
Thanks!
David Hetherington
iPad, iOS 6.1.3, iBooks app updated 24 April 2013
DJHAP
Level 1
(4 points)
Problem Solved
-----------------------
The problem was in the CSS. In the process of getting many different (often confusing and contadictory) recommendations on CSS for ePub, the following fragment had slipped into the CSS:
| img { | |
| position: absolute; | |
| margin: 0; | |
| } |
No doubt, one of the numerous examples and sources I consulted thought this was a good idea. However, when viewing the XHTML files in a browser it caused the images to overlay the text and on the iPad it simply made the images disappear - even though every validator known to man thought the ePub, XHTML, and CSS files were marvelous.
Deleted this fragment and the problem was solved.
Thanks,
David Hetherington
