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 11-25-2011, 10:55 AM   #1
JoanneM
Member
JoanneM began at the beginning.
 
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!
JoanneM is offline   Reply With Quote
Advert
Old 11-25-2011, 11:05 AM   #2
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: 46,870
Karma: 35378407
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by JoanneM View Post
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.
JSWolf is offline   Reply With Quote
Old 11-25-2011, 11:25 AM   #3
Keroberos
Zealot
Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.Keroberos can program the VCR without an owner's manual.
 
Keroberos's Avatar
 
Posts: 127
Karma: 194002
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.
Keroberos is offline   Reply With Quote
Old 11-25-2011, 11:27 AM   #4
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: 46,870
Karma: 35378407
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
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.
JSWolf is offline   Reply With Quote
Old 11-25-2011, 11:30 AM   #5
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: 46,870
Karma: 35378407
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by Keroberos View Post
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.

Last edited by JSWolf; 11-25-2011 at 11:33 AM.
JSWolf is offline   Reply With Quote
Advert
Old 11-25-2011, 07:38 PM   #6
JoanneM
Member
JoanneM began at the beginning.
 
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.
JoanneM is offline   Reply With Quote
Old 11-25-2011, 08:23 PM   #7
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: 46,870
Karma: 35378407
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
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.
JSWolf is offline   Reply With Quote
Old 11-25-2011, 08:46 PM   #8
JoanneM
Member
JoanneM began at the beginning.
 
Posts: 10
Karma: 10
Join Date: Nov 2011
Device: noone
Thanks for your help!
JoanneM is offline   Reply With Quote
Old 11-25-2011, 08:57 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: 46,870
Karma: 35378407
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by JoanneM View Post
Thanks for your help!
Your welcome. Happy to help.
JSWolf is offline   Reply With Quote
Old 11-28-2011, 02:07 AM   #10
bobcdy
Fanatic
bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.
 
bobcdy's Avatar
 
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.
bobcdy is offline   Reply With Quote
Old 11-28-2011, 07:55 AM   #11
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 15,724
Karma: 83282878
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
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?

Last edited by DiapDealer; 11-28-2011 at 07:57 AM.
DiapDealer is online now   Reply With Quote
Old 11-28-2011, 02:21 PM   #12
bobcdy
Fanatic
bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.
 
bobcdy's Avatar
 
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.
bobcdy is offline   Reply With Quote
Old 07-01-2012, 01:37 PM   #13
AndrewH
Fanatic
AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.
 
Posts: 553
Karma: 1234566
Join Date: Jul 2010
Location: Vancouver, WA
Device: Sony PRS-T1, & Kobo Mini
Quote:
Originally Posted by JSWolf View Post
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.
AndrewH is offline   Reply With Quote
Old 07-01-2012, 03:17 PM   #14
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 15,724
Karma: 83282878
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
Originally Posted by AndrewH View Post
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">
DiapDealer is online now   Reply With Quote
Old 07-01-2012, 05:22 PM   #15
AndrewH
Fanatic
AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.AndrewH ought to be getting tired of karma fortunes by now.
 
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.
AndrewH is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 12:22 PM.


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