View Full Version : newby Q about images in ePub


Newmarket2
09-21-2012, 01:04 PM
We're a very, very small company publishing largely audioguides but we've just begun publishing eBooks.
We're selling first through Amazon and they take care of putting the cover image in the eBook, but we also would like to sell the same book from our own web site.


The specific problem is that the 1st page of the book is the cover art and in some readers, the image distorts based on the shape of the reading window (very noticeable on PC readers like Adobe Digital Edition)

I'm wondering if there is an image format or some way of tagging the cover page to keep it from distorting?

Tex2002ans
09-21-2012, 05:55 PM
Your current problem is probably a little extra CSS added in the cover page by tools that you use which is causing the images to stretch to try to "fill the entire screen" (I HATE THIS WITH A PASSION).

If you do not mind sharing your entire cover.xhtml code so we could take a look?

What I personally do is create a cover.xhtml file and use this code as the template (found this somewhere in the forums a while back):

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

<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 400 638" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="400" height="638" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
</html>


The red numbers will have to be changed to match the Height/Width of your cover image.

The blue section will have to point towards your cover image.

If you need any more questions answered, please feel free to ask, or take a look at the Wiki (there is lots of information there). The Wiki has a slightly different version of this SVG code, but I seem to like the look of the one I posted much better (although I have not tested it on massive amounts of different devices).

http://wiki.mobileread.com/wiki/Ebook_Covers

mrmikel
09-22-2012, 08:21 AM
Be sure to check all the pages your epubs on a number of devices. They do not respond all the same. Drop caps, if you use them, can be a problem for some devices. Invisible page numbers, if you use them, can show up as unexplained blanks on some devices.

Three Men In A Boat is an epub in the library on MR. It has formatting which works on many devices and you might examine it for how fancy formatting can accomplished successfully.

Newmarket2
09-28-2012, 07:35 AM
I need to clarify.... We've written no code.
Here's our process:
We use a Word 2003 document (originally written as a script for the audioguide and modified for eBook delivery method).
SAVE AS "Web-page, filtered"
Note: no cover yet.
We then open Calibre to convert the HTML to ePub and, at the same time, use Calibre to insert the cover.
The cover is a .jpg produced using Photoshop CS5.

So, it sounds like I could then open the ePub output using an ePub editor (recommendations?) and make the changes outlined by Tex2002ans. yes/no?

Mrmikel, we do test using several ePub readers on a PC and using a Nook.

Toxaris
09-28-2012, 10:26 AM
There is actually only one ePUB editor that is any good (in my opinion at least) and that is Sigil. Sigil can also read HTML, so that will avoid using Calibre for this.
Be aware, if you want to produce anything good, you need at least basic knowledge of HTML and CSS.

HarryT
09-28-2012, 11:39 AM
I need to clarify.... We've written no code.
Here's our process:
We use a Word 2003 document (originally written as a script for the audioguide and modified for eBook delivery method).
SAVE AS "Web-page, filtered"
Note: no cover yet.
We then open Calibre to convert the HTML to ePub and, at the same time, use Calibre to insert the cover.
The cover is a .jpg produced using Photoshop CS5.


All you need do is, when you convert the book from HTML to ePub, on the "ePub output" page of Calibre's conversion dialog, check the "Preserve cover aspect ratio" check box.

But Toxaris is of course right; a knowledge of HTML and CSS is essential if you're serious about creating eBooks.

Newmarket2
10-05-2012, 10:45 AM
There is actually only one ePUB editor that is any good (in my opinion at least) and that is Sigil.

This looks like a very useful tool.

As for HTML and CSS, I have learned a bit of HTML as part of my supporting our web site (although, mostly, I use Kompozer). But, I know little CSS.

Can you recommend a site that would help me learn some of the basics?

Tex2002ans
10-05-2012, 06:22 PM
Can you recommend a site that would help me learn some of the basics?

http://wiki.mobileread.com/wiki/CSS

http://www.w3schools.com/css/

And another great way to learn is to open up the EPUBs that you find and see how they work. Emulating others is always a great way to learn!

For example, the EPUB of "The Adventures of Tom Sawyer" created by Jellby does lots of fancy things with CSS:

http://www.mobileread.com/forums/showthread.php?t=135679