View Full Version : Cover & inside images in epub on different readers


JoanneM
11-25-2011, 11:55 AM
Hi all! Does anybody know of a list anywhere which specifies the maximum screen size of all the common readers? I've searched and not been able to find it. My 600x800 covers, which look great on my Kindle, cut off at the bottom on my Nook (by about half an inch, just enough to wipe out my logo, although I can make the bottom half-inch non-critical if that's the only fix). I don't have an iPad yet or any of the other epub readers to test with, but want my stuff to be viewable on all of them. I'm fine with doing an epub-specific cover, of course, but can't figure out what size will work across all readers. Thanks for any tips you can give me!

JSWolf
11-25-2011, 12:05 PM
Hi all! Does anybody know of a list anywhere which specifies the maximum screen size of all the common readers? I've searched and not been able to find it. My 600x800 covers, which look great on my Kindle, cut off at the bottom on my Nook (by about half an inch, just enough to wipe out my logo, although I can make the bottom half-inch non-critical if that's the only fix). I don't have an iPad yet or any of the other epub readers to test with, but want my stuff to be viewable on all of them. I'm fine with doing an epub-specific cover, of course, but can't figure out what size will work across all readers. Thanks for any tips you can give me!

You can code for the cover to fit as long as the cover would fit width wise when the height is at maximum for the screen.

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="calibre:cover" content="true"/>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
<image width="600" height="800" xlink:href="coverh4a200033db.jpg"/>
</svg>
</div>
</body>
</html>

You'll have to change the name of the cover of course.

Keroberos
11-25-2011, 12:25 PM
Most 5" and 6" readers have a 600x800 pixel screen, unfortunately not all use the full size for displaying books. My Nook Classic for example has only 600x730 pixels usable for display after removing the space used for the top and bottom bars. I don't know if anyone has made a list of the usable screen size of all of the readers. I usually limit my inside images to 600x730 pixels and use and use this xhtml code for the 600x800 pixel cover.

<?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>
<style type="text/css">
/*<![CDATA[*/

@page{padding:0pt;margin:0pt}
body{oeb-column-number:1;text-align:center;padding:0pt;margin:0pt;background-color:#ffffff;}
/*]]>*/
</style>
</head>

<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="600" xlink:href="../Images/Cover.jpg"></image>
</svg>
</div>
</body>
</html>

This allows the cover image to scale to the screen size of the device.

Hope this helps.

JSWolf beat me to it.

JSWolf
11-25-2011, 12:27 PM
Oh and to reuse the code for covers with a different size, just replace the 600 & 800 with the size of the cover.

The code I posted is set to keep the correct aspect ratio of the cover. Unless he's fixed it since now, Keroberos' code is not set to do so and will give an off-kilter (non aspect ratio correct) looking cover.

JSWolf
11-25-2011, 12:30 PM
Most 5" and 6" readers have a 600x800 pixel screen, unfortunately not all use the full size for displaying books. My Nook Classic for example has only 600x730 pixels usable for display after removing the space used for the top and bottom bars. I don't know if anyone has made a list of the usable screen size of all of the readers. I usually limit my inside images to 600x730 pixels and use and use this xhtml code for the 600x800 pixel cover.

JSWolf beat me to it.

Your code has a problem. If you look at the code I posted, it's set to keep the aspect ratio of the cover. Yours is not. That's a problem. So I would suggest either editing out your code or fixing it.

Thanks for the fix.

JoanneM
11-25-2011, 08:38 PM
Thanks! This is helpful. If I keep the important stuff in my book cover to the top 730 pixels of my 600x800 cover, will it look okay everywhere? I understand it would cut off the bottom 70 pixels, but am wondering if it causes any errors. I mean, if I don't specify the height and width in the code, just insert the 600x800 cover and keep the bottom 70 pixels of it as non-crucial artwork. I'd rather not have to have a separate edition of the book for every epub reader with a non-600x800 screen.

JSWolf
11-25-2011, 09:23 PM
It will size the cover to fit height wise on the screen and if the width fits the screen, then you are good to go.

You don't need to save 70 pixels for anything. It will size for the available space on the screen.

JoanneM
11-25-2011, 09:46 PM
Thanks for your help!

JSWolf
11-25-2011, 09:57 PM
Thanks for your help!

Your welcome. Happy to help.

bobcdy
11-28-2011, 03:07 AM
I copied both of the svg codes and pasted them sequentially into an epub I'm working on, added my cover file, but neither svg codes worked with my PC's ADE. JSWolf's won't show in either sigil or ade, whereas Keroberos' shows in Sigil but not in ADE. I tried both with a cover.png and a cover.jpg. Validation of the epub, which was valid before substituting in the svg for my old standard img tag, came back with the cover.jpg was not being used. Perhaps I'm doing something really dumb, but cut/paste seems pretty simple to implement.

Some time ago I copied another svg bit from MR that works for me:


<div>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="600" xlink:href="../Images/cover.png"></image>
</svg>
</div>

Bob

DiapDealer
11-28-2011, 08:55 AM
Perhaps I'm doing something really dumb, but cut/paste seems pretty simple to implement.
You seem to have posted the exact same code as the others (other than having a different cover-image file-name). Perhaps you didn't realize that you needed to change the xlink:href path/filename to match your existing cover-image's path/filename after you did the copy/paste? :blink:

bobcdy
11-28-2011, 03:21 PM
Yes, I agree with you - I tested Keroberos' tag again with ADE and found the source of my problem with it - it works fine after I took care of my error, and is indeed the same as the one I submitted. I apologize for my too rapid reply without further testing and comparisons.
Bob

AndrewH
07-01-2012, 02:37 PM
You can code for the cover to fit as long as the cover would fit width wise when the height is at maximum for the screen.

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="calibre:cover" content="true"/>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
<image width="600" height="800" xlink:href="coverh4a200033db.jpg"/>
</svg>
</div>
</body>
</html>

You'll have to change the name of the cover of course.
This works brilliantly for images that have been giving me trouble splitting across pages, so thank you! However, the images are justified left and I can't figure out how to get them centered.

DiapDealer
07-01-2012, 04:17 PM
This works brilliantly for images that have been giving me trouble splitting across pages, so thank you! However, the images are justified left and I can't figure out how to get them centered.
Off the top of my head...

Add a
div { text-align: center; }
to the style section in the head, or change the div tag in the body to:
<div style="text-align:center">

AndrewH
07-01-2012, 06:22 PM
That's not working, either. :(

If it makes any difference, my image is 429 x 750, so the only changes in Jon's code I pasted above is this line:

<image height="750" width="429" xlink:href="../Images/3.png"></image>

edit: With some creative editing, I managed to get the images 600x800 so it looks right. This all would have been much easier if the <center> tag wasn't deprecated in HTML.

JSWolf
07-01-2012, 09:10 PM
That's not working, either. :(

If it makes any difference, my image is 429 x 750, so the only changes in Jon's code I pasted above is this line:

<image height="750" width="429" xlink:href="../Images/3.png"></image>

edit: With some creative editing, I managed to get the images 600x800 so it looks right. This all would have been much easier if the <center> tag wasn't deprecated in HTML.

Did you also change...

viewBox="0 0 600 800" to viewBox="0 0 429 750"?

JSWolf
07-01-2012, 09:12 PM
That's not working, either. :(

If it makes any difference, my image is 429 x 750, so the only changes in Jon's code I pasted above is this line:

<image height="750" width="429" xlink:href="../Images/3.png"></image>

edit: With some creative editing, I managed to get the images 600x800 so it looks right. This all would have been much easier if the <center> tag wasn't deprecated in HTML.

If the image is 429x750, making it fill a 600x800 screen is not correct. That just makes the images look off because they are off.

This is the correct code you want to use...

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="calibre:cover" content="true"/>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 429 750" preserveAspectRatio="xMidYMid meet">
<image width="429" height="750" xlink:href="../Images/3.png"/>
</svg>
</div>
</body>
</html>

That will work on a T1 no problem.

AndrewH
07-01-2012, 11:43 PM
If the image is 429x750, making it fill a 600x800 screen is not correct. That just makes the images look off because they are off.

This is the correct code you want to use...

...

That will work on a T1 no problem.
Oh, that did it! Perfect! Thank you so much, sir! :)

/happydance

JSWolf
07-02-2012, 12:55 PM
Oh, that did it! Perfect! Thank you so much, sir! :)

/happydance

Three things need to be changed... the href, and the width and height. Both the width and height have to be changed twice.

Jellby
07-02-2012, 02:30 PM
If I remember correctly, they only have to be changed if the aspect ratio of the image changes. But image's width/height have to match the viewport size.

In other words, if you have 600800, you can leave it unchanged as long as your image is 600800, or 12001600, or 300400, or 7681024... (all 3:4 ratio).

JSWolf
07-03-2012, 08:39 PM
If I remember correctly, they only have to be changed if the aspect ratio of the image changes. But image's width/height have to match the viewport size.

In other words, if you have 600800, you can leave it unchanged as long as your image is 600800, or 12001600, or 300400, or 7681024... (all 3:4 ratio).

It is a bug in ADE that you have to use the specific image's size values or you get an incorrectly displayed image if you want to make it aspect ratio correct.

AndrewH
07-03-2012, 09:39 PM
Three things need to be changed... the href, and the width and height. Both the width and height have to be changed twice.
I see it, thank you. It's much more obvious with the non-standard dimensions... it didn't even occur to me to change the size of the viewport. :smack: