Cover dize as displayed

brahms · 08-09-2016, 07:15 AM

My ePub is hand coded and validating fine.

My cover is is referenced in a coverpage.html file and the img source is 1562X2500 at 72dpi. In Calibre, the cover displays perfectly, as it does when the epub is converted to Kindle in Kindlegen, but in Adobe Digital Editions it's huge.

How do I make sure the cover is scaled properly for as many readers as possible?

Thanks for your help.

Notjohn · 08-09-2016, 08:51 AM

I just use Sigil's add-a-cover tool, which creates cover.xhtml and something like this:

<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1410 2000" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2000" width="1410" xlink:href="../Images/CoverName.jpg"></image></svg>
</div>

I think it's the width="100%" that's key.

AFAIK it works everywhere, though I seem to recall that the online Nook preview clips it (showing a quadrant rather than the whole thing), though the downloaded Nook epub works fine.

Toxaris · 08-09-2016, 09:55 AM

Be aware that if you use the code above, some adjustments are required. In your case you would need the following in your body tag:

Code:

<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1562 2500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2500" width="1562" xlink:href="../Images/CoverName.jpg"></image></svg>
</div>

Of course you probably want to change the actual name of the image...

brahms · 08-09-2016, 10:00 AM

Thanks NotJohn.

I added the 100%, but no change in Adobe Digital. I'm wondering if that app always does that. Odd that Calibre displays correctly.

<body>
<div style="text-align: center; padding: 0pt; margin: 0pt; width: 100%">

<img src ="../images/cover.jpg" alt="My Cover"/>
</div>
</body>

brahms · 08-09-2016, 10:03 AM

Thakns Toxaris, we crossed over there.

Do i need the "svg xmlns=" part if I have a doctype anyhow?

The full page is:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="../css/style001.css"/>
<title>My title</title>
</head >

<body>
<div style="text-align: center; padding: 0pt; margin: 0pt; width: 100%">

<img src ="../images/cover.jpg" alt="My Cover"/>
</div>
</body>
</html>

JSWolf · 08-09-2016, 10:42 AM

Why would you use width and not height? By using width, it's possible that the height will either be too short or too long. I always use height at 100% and it works because the cover is longer than it is wide. So it fills the screen from top to bottom and is properly aspect ratio complete.

To the OP, change width to height and you'll be good to go.

brahms · 08-09-2016, 11:24 AM

Thanks JSWolf.

I've made the change, but the cover still displays the same way (huge) in Adobe Digital. Any other app I could test with?

As I say, the cover looks fine in Calibre.

BetterRed · 08-09-2016, 04:07 PM

Try this - (for ePub 2, not sure about ePub 3)

ensure you have the cover image elsewhere; e.g on the desktop
remove the cover from the epub using the calibre Modify optional plugin
open the the epub file in Sigil
add the cover image to the Images folder (right click folder->Add existing files)
with Tools->Add cover select the cover image file you just added to the Image folder

That should wrap the image in the required code in a 'cover.xhtml' file etc.

ADE is a better yardstick than calibre, because the underlying rendering code is closer to what many ebook readers use.

BR

brahms · 08-09-2016, 05:12 PM

Thanks.

Not sure why i need to use Calibre for this.

Can I just delete the coverpage.html and the cover image from the OEBPS\content folder? Or does sigil need the .opf modified as well?

I've never used Calibre/Sigil to create an epub, so i'm not sure how they work.

What does Sigil need to do its thing?

Toxaris · 08-09-2016, 05:20 PM

You need to replace the content of the whole body tag by the code I gave you. It will wrap the cover in an SVG that will resize depending on the reading app/device and will keep ratio.

brahms · 08-09-2016, 05:45 PM

Many thanks Toxaris; that's it fixed.
I need to swot up on the svg business.

And thanks all for your suggestions. Much appreciated.

08-09-2016, 07:15 AM	#1
brahms Enthusiast Posts: 43 Karma: 30 Join Date: Feb 2016 Device: none	Cover dize as displayed My ePub is hand coded and validating fine. My cover is is referenced in a coverpage.html file and the img source is 1562X2500 at 72dpi. In Calibre, the cover displays perfectly, as it does when the epub is converted to Kindle in Kindlegen, but in Adobe Digital Editions it's huge. How do I make sure the cover is scaled properly for as many readers as possible? Thanks for your help.

08-09-2016, 09:55 AM	#3
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Be aware that if you use the code above, some adjustments are required. In your case you would need the following in your body tag: Code: <div style="text-align: center; padding: 0pt; margin: 0pt;"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1562 2500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2500" width="1562" xlink:href="../Images/CoverName.jpg"></image></svg> </div> Of course you probably want to change the actual name of the image...

08-09-2016, 04:07 PM	#8
BetterRed null operator (he/him) Posts: 21,720 Karma: 29711016 Join Date: Mar 2012 Location: Sydney Australia Device: none	Try this - (for ePub 2, not sure about ePub 3) ensure you have the cover image elsewhere; e.g on the desktop remove the cover from the epub using the calibre Modify optional plugin open the the epub file in Sigil add the cover image to the Images folder (right click folder->Add existing files) with Tools->Add cover select the cover image file you just added to the Image folder That should wrap the image in the required code in a 'cover.xhtml' file etc. ADE is a better yardstick than calibre, because the underlying rendering code is closer to what many ebook readers use. BR Last edited by BetterRed; 08-09-2016 at 04:12 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
cover not displayed	ffarr	Sigil	0	11-24-2010 10:18 AM
Cover Not Displayed	Tom SKP	Calibre	2	10-11-2010 02:52 PM
entire ebook cover not displayed	alexhunter27	Calibre	2	01-09-2010 09:44 PM
No cover displayed	jhoch	Calibre	7	12-09-2009 08:10 PM
Creator cover not displayed in library view	mtravellerh	Kindle Formats	4	12-29-2008 09:57 PM

08-09-2016, 08:51 AM	#2
Notjohn mostly an observer Posts: 1,519 Karma: 987654 Join Date: Dec 2012 Device: Kindle	I just use Sigil's add-a-cover tool, which creates cover.xhtml and something like this: <div style="text-align: center; padding: 0pt; margin: 0pt;"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1410 2000" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2000" width="1410" xlink:href="../Images/CoverName.jpg"></image></svg> </div> I think it's the width="100%" that's key. AFAIK it works everywhere, though I seem to recall that the online Nook preview clips it (showing a quadrant rather than the whole thing), though the downloaded Nook epub works fine.

08-09-2016, 10:00 AM	#4
brahms Enthusiast Posts: 43 Karma: 30 Join Date: Feb 2016 Device: none	Thanks NotJohn. I added the 100%, but no change in Adobe Digital. I'm wondering if that app always does that. Odd that Calibre displays correctly. <body> <div style="text-align: center; padding: 0pt; margin: 0pt; width: 100%"> <img src ="../images/cover.jpg" alt="My Cover"/> </div> </body>

08-09-2016, 10:03 AM	#5
brahms Enthusiast Posts: 43 Karma: 30 Join Date: Feb 2016 Device: none	Thakns Toxaris, we crossed over there. Do i need the "svg xmlns=" part if I have a doctype anyhow? The full page is: <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/> <link type="text/css" rel="stylesheet" href="../css/style001.css"/> <title>My title</title> </head > <body> <div style="text-align: center; padding: 0pt; margin: 0pt; width: 100%"> <img src ="../images/cover.jpg" alt="My Cover"/> </div> </body> </html>

08-09-2016, 10:42 AM	#6
JSWolf Resident Curmudgeon Posts: 79,745 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Why would you use width and not height? By using width, it's possible that the height will either be too short or too long. I always use height at 100% and it works because the cover is longer than it is wide. So it fills the screen from top to bottom and is properly aspect ratio complete. To the OP, change width to height and you'll be good to go.

08-09-2016, 11:24 AM	#7
brahms Enthusiast Posts: 43 Karma: 30 Join Date: Feb 2016 Device: none	Thanks JSWolf. I've made the change, but the cover still displays the same way (huge) in Adobe Digital. Any other app I could test with? As I say, the cover looks fine in Calibre.

08-09-2016, 05:12 PM	#9
brahms Enthusiast Posts: 43 Karma: 30 Join Date: Feb 2016 Device: none	Thanks. Not sure why i need to use Calibre for this. Can I just delete the coverpage.html and the cover image from the OEBPS\content folder? Or does sigil need the .opf modified as well? I've never used Calibre/Sigil to create an epub, so i'm not sure how they work. What does Sigil need to do its thing?

08-09-2016, 05:20 PM	#10
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	You need to replace the content of the whole body tag by the code I gave you. It will wrap the cover in an SVG that will resize depending on the reading app/device and will keep ratio.

08-09-2016, 05:45 PM	#11
brahms Enthusiast Posts: 43 Karma: 30 Join Date: Feb 2016 Device: none	Many thanks Toxaris; that's it fixed. I need to swot up on the svg business. And thanks all for your suggestions. Much appreciated.

Advert

Advert