Cover & inside images in epub on different readers

JoanneM · 11-25-2011, 10: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, 11:05 AM

Quote:

Originally Posted by JoanneM

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.

Code:

<?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, 11:25 AM

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.

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>
  <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, 11:27 AM

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, 11:30 AM

Quote:

Originally Posted by Keroberos

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, 07: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, 08: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, 08:46 PM

Thanks for your help!

JSWolf · 11-25-2011, 08:57 PM

Quote:

Originally Posted by JoanneM

Thanks for your help!

Your welcome. Happy to help.

bobcdy · 11-28-2011, 02: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, 07:55 AM

Quote:

Originally Posted by bobcdy

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?

bobcdy · 11-28-2011, 02: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, 01:37 PM

Quote:

Originally Posted by JSWolf

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.

Code:

<?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, 03:17 PM

Quote:

Originally Posted by AndrewH

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

Code:

div { text-align: center; }

to the style section in the head, or change the div tag in the body to:

Code:

<div style="text-align:center">

AndrewH · 07-01-2012, 05: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:

Code:

<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.

11-25-2011, 10:55 AM	#1
JoanneM Member Posts: 10 Karma: 10 Join Date: Nov 2011 Device: noone	Cover & inside images in epub on different readers 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!

11-25-2011, 11:25 AM	#3
Keroberos Zealot Posts: 128 Karma: 238654 Join Date: Aug 2009 Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)	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. 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> <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. Last edited by Keroberos; 11-25-2011 at 11:27 AM. Reason: Need to learn to hit refresh occasionally.

11-25-2011, 11:27 AM	#4
JSWolf Resident Curmudgeon Posts: 73,970 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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. Last edited by JSWolf; 11-25-2011 at 11:32 AM.

11-25-2011, 07:38 PM	#6
JoanneM Member Posts: 10 Karma: 10 Join Date: Nov 2011 Device: noone	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. Last edited by JoanneM; 11-25-2011 at 07:41 PM.

11-25-2011, 08:23 PM	#7
JSWolf Resident Curmudgeon Posts: 73,970 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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. Last edited by JSWolf; 11-25-2011 at 08:25 PM.

11-25-2011, 08:46 PM	#8
JoanneM Member Posts: 10 Karma: 10 Join Date: Nov 2011 Device: noone	Thanks for your help!

11-28-2011, 02:07 AM	#10
bobcdy Fanatic Posts: 527 Karma: 1048576 Join Date: May 2009 Device: bebook; prs-950; nook simple touch; HTC Jetstream tablet	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 Last edited by bobcdy; 11-28-2011 at 02:25 AM.

11-28-2011, 02:21 PM	#12
bobcdy Fanatic Posts: 527 Karma: 1048576 Join Date: May 2009 Device: bebook; prs-950; nook simple touch; HTC Jetstream tablet	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 Last edited by bobcdy; 11-28-2011 at 02:41 PM.

07-01-2012, 05:22 PM	#15
AndrewH Fanatic Posts: 553 Karma: 1234566 Join Date: Jul 2010 Location: Vancouver, WA Device: Sony PRS-T1, & Kobo Mini	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: Code: <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. Last edited by AndrewH; 07-01-2012 at 06:34 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Managing cover images in mobi/epub files	steje	Library Management	19	12-07-2013 09:48 PM
Epub and cover images, question about file storage	JGB	Calibre	10	10-11-2010 11:48 PM
Cover inside book	luthar28	ePub	3	08-04-2010 05:32 PM
Classic Editing B&N epub but still able to browse cover possible?	tanzer21	Barnes & Noble NOOK	6	07-31-2010 01:47 PM
trouble with ePub cover images	bossmanx9	Calibre	10	04-28-2009 06:16 PM

Advert

Advert