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):

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>
</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).

https://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

Quote:

Originally Posted by Newmarket2

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

Quote:

Originally Posted by Toxaris

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

Quote:

Originally Posted by Newmarket2

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

https://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:

https://www.mobileread.com/forums/sho...d.php?t=135679

09-21-2012, 01:04 PM	#1
Newmarket2 Member Posts: 13 Karma: 10 Join Date: Dec 2010 Device: Kindle	newby Q about images in ePub 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?

09-21-2012, 05:55 PM	#2
Tex2002ans Wizard Posts: 2,297 Karma: 12126329 Join Date: Jul 2012 Device: Kobo Forma, Nook	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): 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> </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). https://wiki.mobileread.com/wiki/Ebook_Covers

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Opus Scroll Images in ePub	Celtic67	Bookeen	1	12-02-2011 05:14 AM
Images in EPUB books	spaze	ePub	28	03-06-2011 10:32 PM
ePub with Images	prdufresne	Calibre	10	12-04-2010 01:55 AM
Extracting images from an ePub	MacEachaidh	Sigil	2	11-08-2010 09:50 AM
Pdf to Epub conversion - Newby	zambosky	Calibre	5	06-22-2010 04:12 AM

09-22-2012, 08:21 AM	#3
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	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.

09-28-2012, 07:35 AM	#4
Newmarket2 Member Posts: 13 Karma: 10 Join Date: Dec 2010 Device: Kindle	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.

09-28-2012, 10:26 AM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	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.