View Full Version : Which CSS for illustrated epub


Francisco T
04-28-2013, 08:50 AM
I am preparing epubs of illustrated children's books.
There is one image per page, centered with no text.
Each page is a "chapter" in order to force a page break.

Originally I was using a simple code like this:

xhtml:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>

<body>
<p style="text-align: center;"><img alt="03_a" src="../Images/03_a.jpg" /></p>
</body>
</html>

But there were some people who couldn't view the epub correctly (eg. those with nook readers or Adobe Digital Editions)

So now I am trying a new code using CSS and I need good tips.

New code:
XHTML:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="centrado"><img alt="03_a" class="imagenes1" src="../Images/03_a.jpg" /></div>
</body>
</html>


CSS:

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

@page {
margin: 0pt;
}

div.centrado {
margin: 0px auto 0px auto;
text-align: center;
}

img.imagenes1 {
height: 800px;
width: 800px;
}

img.imagenes2 {
height: 800px;
width: 800px;
max-width: 100%;
}

img.imagenes3 {
height: 800px;
width: 800px;
max-width: 100%;
max-height: 100%;
}

img.imagenes4 {
max-width: 100%;
max-height: 100%;
}

img.imagenes5 {
max-width: 100%;
}

img.imagenes6 {
height: 800px;
width: 800px;
max-width: 100%;
max-height: 100%;
}

img.imagenes7 {
height: 800px;
width: 800px;
width: 100%;
height: 100%;
}

img.imagenes8 {
height: 800px;
width: 800px;
width: 100%;
}

img.imagenes9 {
width: 100%;
}

img.imagenes9 {
max-width: 800px;
}




I made this test version and tested it in ADE to see which images display the best. The images: img.imagenes5 and img.imagenes9 seem correct.
Which image tag would be the right one to use? Anything I can do better?

Note: In order for the artwork to have an acceptable quality the images are optimized at 800px, reducing image size is not really an option.

Live example of the first version in google play (the one with viewing problems) :
https://play.google.com/books/reader?id=a-tL6-2knW8C&printsec=frontcover&output=reader&hl=es&pg=GBS.PP1

Thanks for your help.

Turtle91
04-28-2013, 10:41 AM
If your entire book is the same format of a single image per page, then the CSS becomes really easy:

div {margin:0 auto; text-align:center}
img {height:800px; width:800px; max-height:99%; max-width:99%}

And your HTML becomes:
<body>
<div><img alt="" src="../Images/xxxx.jpg" /></div>
</body>

You would only need specific classes for the few front/back pages (cover,title,acknowledgement,dedication,copyright, etc.) if you use a div or img on them.

You don't need to put the image file name in the alt tag. That is supposed to be used as a description of the image ("Goat seen standing on top of cloud, two pilots looking out windshield wondering what a goat is doing in the clouds") if the device can't render the image for whatever reason (missing file, image display turned off, etc) In your case you will make sure all the pictures are included in the ePub, and no one will turn off image rendering in a picture book!

I also use 99%, instead if 100%, to avoid those rare instances when a picture might bleed over onto a separate page.

I hope that helps!
Cheers,

[edit] On second thought, there is no need to define the width or height, it will automatically display at the full size unless limited by the max tags.

Francisco T
04-29-2013, 02:32 PM
If your entire book is the same format of a single image per page, then the CSS becomes really easy:

div {margin:0 auto; text-align:center}
img {height:800px; width:800px; max-height:99%; max-width:99%}

And your HTML becomes:
<body>
<div><img alt="" src="../Images/xxxx.jpg" /></div>
</body>

...

[edit] On second thought, there is no need to define the width or height, it will automatically display at the full size unless limited by the max tags.

Thank you very much.
In ADE your css works fine. I will try in ibook and google play too. Hopefully the epub will now work on all devices. :)

[edit] I have been trying to solve this problem for some time and there is so much conflicting information out there it has been impossible for me to pin down the solution. I can't thank you enough.

dgatwood
05-01-2013, 02:42 AM
For forcing an image to fit the screen (a.k.a. a letterboxed fill), the most reliable solution seems to be wrapping it in SVG, from what I've seen.

http://wiki.mobileread.com/wiki/Ebook_Covers

Toxaris
05-01-2013, 03:40 AM
I agree, I would use the SVG wrapper for this.

Turtle91
05-01-2013, 06:05 AM
I thought some of the older devices didn't support SVG. Is that not true?

Toxaris
05-01-2013, 11:03 AM
So far I haven't seen devices that didn't support the SVG wrapper. My older PRS-300 has no issues with it.
It is true that some devices have hickups on more complex SVG, but this is not such a case.

Adjust
05-01-2013, 10:27 PM
So far I haven't seen devices that didn't support the SVG wrapper. My older PRS-300 has no issues with it.
It is true that some devices have hickups on more complex SVG, but this is not such a case.

SVG doesn't validate...so Apple might have a problem with it

JSWolf
05-01-2013, 10:33 PM
So far I haven't seen devices that didn't support the SVG wrapper. My older PRS-300 has no issues with it.
It is true that some devices have hickups on more complex SVG, but this is not such a case.

The PRS-505 (first Reader with ADE) works fine with the SVG wrapper.

JSWolf
05-01-2013, 10:34 PM
SVG doesn't validate...so Apple might have a problem with it

The SVG wrapper does validate. It sounds like your code has errors or you left out the beginning and ending div.

dgatwood
05-03-2013, 03:44 PM
SVG doesn't validate...so Apple might have a problem with it

Try updating your validator. I filed a number of bugs against the W3C validator a few months ago about bogus SVG validation warnings/errors, and at least a couple of them have since been fixed.