Epub Cover, Thumbnail Covers, cropping off

uieluck · 08-03-2012, 02:25 PM

So I've been doing ebooks for a while. I'm by all means 'no expert' I'm fairly savvy. I do all my books in InDesign, then tweak the shizzle out of them in Sigil. And then if the client wants a Mobi file, I either convert it using Cailbre or Terminal.
I am extremely close to being done, everything validates and I have tested it on: Kindle, Kindle Fire, ipad, Nook,, Kindle PC reader, ADE, Cailbre,, even sucky things like: Azardi, ehon, eReader, Firefox-ereader.

Now all of those physical devices and otherwise seem to show everything correct. And the book looks good.
But the customer says on the 'epub' file the cover gets cropped off.
The only place I see where it get's cut-off is on the thumbnail in ADE.
I've looked at my cover.xhtml, and my content.opf.
Nothing sticks-out at me?
Below is my code for; xhtml, opf.
Suggestions?

Quote:

<?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[*/

p.sgc-1 {text-align: center;}
/*]]>*/
</style>
</head>

<body>
<p class="sgc-1"> <img alt="" src="../Images/9780985566500.jpg" /></p>
</body>
</html>

Quote:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="p9780985566517" version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:creator opf:file-as="Francis L. Shelly" opf:role="aut">Shelly L. Francis</dc:creator>
<dc:title>Damocles' Wife</dc:title>
<dc:source>URN:ISBN: 978-0-9855665-1-7</dc:source>
<dc:identifier id="p9780985566517">URN:ISBN:978-0-9855665-1-7</dc:identifier>
<dc:publisher>Two Louise Press</dc:publisher>
<dc:type>text</dc:type>
<dc:date opf:event="publication" xmlns:opf="http://www.idpf.org/2007/opf">2012-07-17</dc:date>
<dc:rights>All rights reserved</dc:rights>
<meta content="Adobe InDesign" name="generator" />
<meta content="x9780985566500.jpg" name="cover" />
<meta content="0.5.3" name="Sigil version" />
<dc:identifier opf:scheme="ISBN">9780985566517</dc:identifier>
<dc:identifier opf:scheme="UUID" xmlns:opf="http://www.idpf.org/2007/opf">urn:uuid:10f06f98-df43-4435-8b5e-e812466cd7c6</dc:identifier>
<dc:language>en</dc:language>
</metadata>

Quote:

Toxaris · 08-03-2012, 03:15 PM

Why is there a non breakable space before the image? That will shift the image. You can additionally add width and height to the image.

uieluck · 08-03-2012, 04:02 PM

Toxaris,
Dunno. I'm sure it's a fun extra code thing that InDesign loves to do!
As far as the height and width. Do you usually have different measurements and files for each individual device (not including ipad retina).
Thanks, T—

Toxaris · 08-04-2012, 02:36 AM

You should remove the space, it does not belong there.
Yes, there are different resolutions out there. However, most standalone readers have roughly 600x800. You can use either width or height 100%, don't use both because of the aspect ratio.
I personally use a SVG wrapper, examples are on the site. That will work on all displays as far as I know.

Jellby · 08-04-2012, 03:22 AM

Add "text-indent: 0;" to the CSS, or change the p to a div. I'm not sure how indent works with centering, but wouldn't risk it.

I'd also add "max-width: 100%; max-height: 100%;" to the img style, or use an SVG wrapper.

Toxaris · 08-04-2012, 05:14 AM

Indent is carried over in centering. It looks very odd.

uieluck · 08-05-2012, 06:17 PM

Thanks guys. I appreciate all the suggestions, totally fixed!
Thanks again! T—

uieluck · 08-07-2012, 03:55 PM

Thanks Jellby I really do appreciate it. I did some digging on the SVG wrapper, I applied that shizzle.
And Toxaris that ;nbsp was the MAIN culpurt. So thanks for that.
So here's what I ended up with.
BTW: The thumbnail looked good too!
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="573" xlink:href="../Images/9780985566500.jpg"></image>
</svg>
</div>
</body>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Since 0.8.50: No thumbnail covers on Kindle Touch	bouvin	Calibre	0	05-08-2012 03:11 PM
Cannot get thumbnail cover image to display	Derek R	Sigil	6	02-13-2012 06:52 AM
Kindle Touch has thumbnail cover images	tomsem	Amazon Kindle	9	12-14-2011 12:22 PM
Thumbnail for cover image has white borders	Mookiemon	ePub	0	07-06-2011 12:40 PM
size of thumbnail covers on ibooks bookshelf?	hapax legomenon	ePub	1	04-05-2010 01:27 PM

08-03-2012, 03:15 PM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Why is there a non breakable space before the image? That will shift the image. You can additionally add width and height to the image.

08-03-2012, 04:02 PM	#3
uieluck Connoisseur Posts: 52 Karma: 10 Join Date: Jul 2010 Location: Denver, Colorado Device: iphone, ipad, kindle, nook	Toxaris, Dunno. I'm sure it's a fun extra code thing that InDesign loves to do! As far as the height and width. Do you usually have different measurements and files for each individual device (not including ipad retina). Thanks, T—

08-04-2012, 02:36 AM	#4
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	You should remove the space, it does not belong there. Yes, there are different resolutions out there. However, most standalone readers have roughly 600x800. You can use either width or height 100%, don't use both because of the aspect ratio. I personally use a SVG wrapper, examples are on the site. That will work on all displays as far as I know.

08-04-2012, 03:22 AM	#5
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Add "text-indent: 0;" to the CSS, or change the p to a div. I'm not sure how indent works with centering, but wouldn't risk it. I'd also add "max-width: 100%; max-height: 100%;" to the img style, or use an SVG wrapper.

08-04-2012, 05:14 AM	#6
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Indent is carried over in centering. It looks very odd.

08-05-2012, 06:17 PM	#7
uieluck Connoisseur Posts: 52 Karma: 10 Join Date: Jul 2010 Location: Denver, Colorado Device: iphone, ipad, kindle, nook	Thanks guys. I appreciate all the suggestions, totally fixed! Thanks again! T—

08-07-2012, 03:55 PM	#8
uieluck Connoisseur Posts: 52 Karma: 10 Join Date: Jul 2010 Location: Denver, Colorado Device: iphone, ipad, kindle, nook	Thanks Jellby I really do appreciate it. I did some digging on the SVG wrapper, I applied that shizzle. And Toxaris that ;nbsp was the MAIN culpurt. So thanks for that. So here's what I ended up with. BTW: The thumbnail looked good too! <body> <div> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="800" width="573" xlink:href="../Images/9780985566500.jpg"></image> </svg> </div> </body>

Advert

Advert