04-28-2013, 07:50 AM | #1 |
Junior Member
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> 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> 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. |
04-28-2013, 09:41 AM | #2 |
A Hairy Wizard
Posts: 3,111
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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. |
04-29-2013, 01:32 PM | #3 | |
Junior Member
Posts: 2
Karma: 10
Join Date: Apr 2013
Device: none
|
Quote:
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. |
|
05-01-2013, 01:42 AM | #4 |
Curmudgeon
Posts: 629
Karma: 1623086
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.
https://wiki.mobileread.com/wiki/Ebook_Covers |
05-01-2013, 02:40 AM | #5 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I agree, I would use the SVG wrapper for this.
|
05-01-2013, 05:05 AM | #6 |
A Hairy Wizard
Posts: 3,111
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
I thought some of the older devices didn't support SVG. Is that not true?
|
05-01-2013, 10:03 AM | #7 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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. |
05-01-2013, 09:27 PM | #8 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
|
05-01-2013, 09:33 PM | #9 |
Resident Curmudgeon
Posts: 74,329
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
The PRS-505 (first Reader with ADE) works fine with the SVG wrapper.
|
05-01-2013, 09:34 PM | #10 |
Resident Curmudgeon
Posts: 74,329
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
05-03-2013, 02:44 PM | #11 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
|
Tags |
css, epub, image, picture book |
|
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 |