Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 04-28-2013, 07:50 AM   #1
Francisco T
Junior Member
Francisco T began at the beginning.
 
Francisco T's Avatar
 
Posts: 2
Karma: 10
Join Date: Apr 2013
Device: none
Which CSS for illustrated epub

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:
Code:
<?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:

Code:
<?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:

Code:
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...=es&pg=GBS.PP1

Thanks for your help.

Last edited by Francisco T; 04-28-2013 at 07:53 AM.
Francisco T is offline   Reply With Quote
Old 04-28-2013, 09:41 AM   #2
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
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.

Last edited by Turtle91; 04-28-2013 at 10:21 AM.
Turtle91 is offline   Reply With Quote
 
Enthusiast
Old 04-29-2013, 01:32 PM   #3
Francisco T
Junior Member
Francisco T began at the beginning.
 
Francisco T's Avatar
 
Posts: 2
Karma: 10
Join Date: Apr 2013
Device: none
Quote:
Originally Posted by Turtle91 View Post
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.

Last edited by Francisco T; 04-29-2013 at 05:56 PM.
Francisco T is offline   Reply With Quote
Old 05-01-2013, 01:42 AM   #4
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 283
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
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
dgatwood is offline   Reply With Quote
Old 05-01-2013, 02:40 AM   #5
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,962
Karma: 3427611
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
I agree, I would use the SVG wrapper for this.
Toxaris is offline   Reply With Quote
Old 05-01-2013, 05:05 AM   #6
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
I thought some of the older devices didn't support SVG. Is that not true?
Turtle91 is offline   Reply With Quote
Old 05-01-2013, 10:03 AM   #7
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,962
Karma: 3427611
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
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.
Toxaris is offline   Reply With Quote
Old 05-01-2013, 09:27 PM   #8
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Quote:
Originally Posted by Toxaris View Post
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
Adjust is offline   Reply With Quote
Old 05-01-2013, 09:33 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,096
Karma: 18147936
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Toxaris View Post
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 is offline   Reply With Quote
Old 05-01-2013, 09:34 PM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,096
Karma: 18147936
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Adjust View Post
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.
JSWolf is offline   Reply With Quote
Old 05-03-2013, 02:44 PM   #11
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 283
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Adjust View Post
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.
dgatwood is offline   Reply With Quote
Reply

Tags
css, epub, image, picture book

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Editing epub's style.css when converting to epub Pros Calibre 0 02-02-2012 01:13 PM
Why, During ePub to ePub Conversion does Calibre changes existing CSS classes? JSWolf Conversion 7 08-06-2011 07:32 PM
Override ePub CSS with userStyle.css? barium Sony Reader Dev Corner 11 07-16-2011 03:25 PM
epub CSS versus "Regular" CSS konrad ePub 4 02-18-2011 09:29 AM
ePub to ePub - just replace CSS? ChristopherTD Calibre 21 02-11-2010 02:50 AM


All times are GMT -4. The time now is 04:32 PM.


MobileRead.com is a privately owned, operated and funded community.