View Full Version : Full page images

11-15-2010, 07:54 PM
I've searched this forum and searched this forum for the correct answer, but have yet to find an answer to really help me. Here's what is happening.. I've got a PDF file that I'm converting to ePub for an author and he has tables in the book, except they are turned landscape and in my mind impossible to use normal tables. Here's a picture of one of them.

Maybe there is a way to do this with a regular table via XHTML and CSS, but the many years of web developing that I've done I've never figured out how to do it. So what I did was create an image of it and insert it into the ePub. Now it was quite a few pages, 37. I got the images to display one per page in iBooks for the iPad, but once tested in Stanza it cuts the images in half and then tried it in Adobe Digital Editions and it cuts the bottom half off of the images and the next page starts up with another image.

I've used Sigil for most of this, and after tons of hours of research I have yet to find out what I'm doing wrong. I know I'm doing wrong and need help... I'm all open to help. Normally I would upload the ePub, but this book is copyrighted so I can't but I can do somethings to work around if need be.

The code I've got for the images is

div.inline {page-break-inside: avoid; margin: 0.5em 0; text-indent: 0; text-align: center; clear: both; }
div.inline img {page-break-inside: avoid; max-height: 100%; max-width: 100%;}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus imperdiet purus ut accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel augue odio, id fermentum ligula.</p>
<div class="inline">
<img alt="" src="../Images/compare01.png" />
<img alt="" src="../Images/compare02.png" />
<img alt="" src="../Images/compare03.png" />
<img alt="" src="../Images/compare04.png" />

What am I doing wrong? Thanks in advance!

11-16-2010, 04:49 AM
You are not doing anything wrong, there's just no reliable way to control anything related to page height in current ePUB. Note that, unless you assign an explicit height to the container (div.inline in your case), relative heights refers to the page width, that is, in a well-behaved reader you "max-height: 100%; max-width: 100%" means that the image should fit in a square page-width side. It appears ADE just ignores the the height, which might be allowed if one carefully reads the CSS spec (I don't know).

11-17-2010, 01:17 AM
I made a similar plea here a week or two back. I've been using tables, but only 3 columns.

You are going to tear your hair out especially noting the content. Most of these books are formatted as a favour not a price.

How many rows are there? Because table headers don't work.

If it's of any help have a look ( what I did for a three column table.

Check out chapter 3. By the way, pictures in tables do not view in iBooks. Every other reader though.

What I'm after is feed back from people with readers I don't have. That's all of them except and iPad. :rolleyes:

11-17-2010, 02:05 PM
Maybe it could be represented as a list instead of a table?

Text as images is always a bad idea... most readers don't handle images well at all.