View Full Version : 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?



<?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">&nbsp;<img alt="" src="../Images/9780985566500.jpg" /></p>
</body>
</html>




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


<guide>
<reference href="Text/Cover.xhtml" title="Cover" type="cover" />
<reference href="Text/Contents.html" title="Table Of Contents" type="toc" />
</guide>

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>