Wrangling covers for ePub

MacEachaidh · 11-29-2013, 05:14 PM

OK, I confess, there's a lot about ePub coding I haven't got my head around. But I have a Kobo Touch and an Aura HD, and am trying to code covers that work on both devices.

The Touch's display is 600x800, the Aura HD 1080x1440 — so, same pixel ratio. I've been making the cover graphics 1080x1440 @ 265 ppi, the size of the Aura's screen. I'm using Jutoh to code the the ePub, and it creates the following code for the cover image:

Quote:

So far, so good. Problem is, on both devices, the cover fills the screen vertically, but is compressed horizontally to leave maybe half an inch down each side. So what's happening? How do I get around this?

I found this code, which uses and SVG wrapper and seems to work, but I don't understand what makes the difference.

I'd be grateful for any observations or advice, please.

JSWolf · 11-29-2013, 06:29 PM

You don't want the cover to fill the entire screen unless it is aspect ratio correct to do so. If you stretch the cover image to fill the screen, you will have an image that could look off because it is off. You want to keep the cover's aspect ratio. That means in most cases you will have space on the left/right side of the screen and that is correct. It is incorrect to make the screen aspect ratio wrong.

RbnJrg · 11-29-2013, 06:31 PM

Quote:

Originally Posted by MacEachaidh

OK, I confess, there's a lot about ePub coding I haven't got my head around. But I have a Kobo Touch and an Aura HD, and am trying to code covers that work on both devices.

The Touch's display is 600x800, the Aura HD 1080x1440 — so, same pixel ratio. I've been making the cover graphics 1080x1440 @ 265 ppi, the size of the Aura's screen. I'm using Jutoh to code the the ePub, and it creates the following code for the cover image:

So far, so good. Problem is, on both devices, the cover fills the screen vertically, but is compressed horizontally to leave maybe half an inch down each side. So what's happening? How do I get around this?

I found this code, which uses and SVG wrapper and seems to work, but I don't understand what makes the difference.

I'd be grateful for any observations or advice, please.

Yes, SVG can make the difference for you

Use the following code:

Code:

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

Since 1080x1440 is multiple from 600x800 you won't have any troubles and the cover will fill both screen and without distortion.

Regards
Rubén

PS: Of course, you must keep the size of your cover in 1080x1440.

SBT · 11-30-2013, 05:57 AM

Dunno... If the cover is mildly aspect-distortion tolerant, I like to let the cover fill the entire screen, and gamble that not too many readers read my books in portrait mode or on odd-sized devices.

RbnJrg · 11-30-2013, 06:26 AM

Quote:

Originally Posted by SBT

Dunno... If the cover is mildly aspect-distortion tolerant, I like to let the cover fill the entire screen, and gamble that not too many readers read my books in portrait mode or on odd-sized devices.

Hi SBT;

The code I posted is for the case of MacEachaidh

; anyway I think that the cover of a book always should be inside a svg wrapper (and so is like Sigil makes the things now). Of course, you can play with the property "preserveAspectRatio=..." since not always the more common "preserveAspectRatio=xMidyMid meet" is the better option. You can use "slice" instead of "meet" and to employ any combination of xMin, xMid, xMax with yMin, yMid, yMax instead of "xMidyMid" to see what is the best output for a particular cover. See this post (also is worthy to read the thread):

https://www.mobileread.com/forums/sho...4&postcount=20

Regards
Rubén

MacEachaidh · 12-01-2013, 04:26 AM

Folks, thanks for the replies. (Strangely, I got no notification that anyone had posted here. Glad I checked!)

The covers are already in 1080x1440 ratio, so yeah, I want them to stay that way.

Rubén, thanks for the SVG code. I'll give it a go. And I'm petty sure I can save it as a default custom code in Jutoh, so it's generated automatically. I was worried that some devices may not be able to handle SVG code, but I guess it's more commonly implemented now? I'm interested in why you feel that covers should always be in an SVG wrapper? Is it something to do with the rendering?

Interesting comments, SBT — it never occurred to me that people would read a book in landscape. A PDF or graphic novel, maybe, but not text.

JSWolf, I hear what you're saying, and thanks for your comments. But the cover image is already in 1080x1440, so I don't understand why the regular code (width and height both set to 100%) results in the image being squished in at both sides, which *is* distorting the graphic. (Key words: I don't understand. ;-) )

So, I'll give the SVG, and trust to the fact that it works, without my understanding. Maybe one day it'll be clear. ;-)

MacEachaidh · 12-01-2013, 05:12 AM

Rubén, the version I had come across of the SVG wrapper is identical to yours, except that instead of
preserveAspectRatio="xMidYMid meet"
it says
preserveAspectRatio="none"

Nonetheless, it seems to work. What's the difference?

RbnJrg · 12-01-2013, 06:32 AM

Quote:

Originally Posted by MacEachaidh

Rubén, the version I had come across of the SVG wrapper is identical to yours, except that instead of
preserveAspectRatio="xMidYMid meet"
it says
preserveAspectRatio="none"

Nonetheless, it seems to work. What's the difference?

In this case, none because your cover has a ratio of 3:4 the same as your screen device so for that reason there is no distortion. But if you load that book in a reader with a 7" screen then you'll see that the cover showed with

preserveAspectRatio="xMidYMid meet"

is not distorted and the cover showed with

preserveAspectRatio="none"

it is

Please, read this chapter of SVG Essentials to understand the code you are using (of course, if you wish you can read all the online book

http://commons.oreilly.com/wiki/inde...ls/Coordinates

Regards
Rubén

PS: For the reasons you'll read there is that I recommend to use a SVG wrapper for the cover page.

MacEachaidh · 12-02-2013, 01:19 AM

Thanks for the links, Rubén. Some reading there for me.

I hear what you say about the preserveAspectRatio="none" setting only working when the image is the same pixel size (or ratio) as the screen, which it may not be on other devices. That makes sense, of course. What confuses me, though, is that on my two Kobos, with the preserveAspectRatio="none" setting, the cover is the same size as the full screen, but if I use preserveAspectRatio="xMidYMid meet" (which, if I understand correctly, you're saying will work universally), then on my two Kobos the cover image *does not* fill the screen, even though it's the same pixel size. With the "meet" setting, the image is compressed laterally and there are thing margins up each side of the image where the background shows through.

So it seems to me that the "meet" setting isn't working as you described. The rest of the code is identical to what you posted here. Is there a reason this doesn't work for me?

Toxaris · 12-02-2013, 01:37 AM

Yes, your cover is not of the same pixel size as the screen. An e-Ink screen does not really work with pixels. If you really want to know the pixel sizes, you need to experiment.

Jellby · 12-02-2013, 03:07 AM

Does the kobo show some kind of status bar? That would take some screen space, making the available screen a bit shorter. When the cover adapts to this sorter dimension, the width becomes shorter too.

RbnJrg · 12-02-2013, 05:25 AM

Quote:

Originally Posted by MacEachaidh

Thanks for the links, Rubén. Some reading there for me.

I hear what you say about the preserveAspectRatio="none" setting only working when the image is the same pixel size (or ratio) as the screen, which it may not be on other devices. That makes sense, of course. What confuses me, though, is that on my two Kobos, with the preserveAspectRatio="none" setting, the cover is the same size as the full screen, but if I use preserveAspectRatio="xMidYMid meet" (which, if I understand correctly, you're saying will work universally), then on my two Kobos the cover image *does not* fill the screen, even though it's the same pixel size. With the "meet" setting, the image is compressed laterally and there are thing margins up each side of the image where the background shows through.

So it seems to me that the "meet" setting isn't working as you described. The rest of the code is identical to what you posted here. Is there a reason this doesn't work for me?

I bet that with the option preserveAspectRatio="none" the cover -in your Kobo- is lightly distorted (in this case, a bit wider that the normal image). When you use preserveAspectRatio="xMidYMid meet" the image is perfectly proportioned, maintaining the ratio of 3:4. Try using:

Code:

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

MacEachaidh · 12-02-2013, 05:42 AM

Quote:

Originally Posted by RbnJrg

I bet that with the option preserveAspectRatio="none" the cover -in your Kobo- is lightly distorted (in this case, a bit wider that the normal image). When you use preserveAspectRatio="xMidYMid meet" the image is perfectly proportioned, maintaining the ratio of 3:4.

No mate, not so. The "none" image is exactly the size of the screen (not exceeding the width, as I can tell by patterning in the image), and the "meet" image is narrower. (I may not know about the code involved, but I'm not unobservant.)

Quote:

Try using:

Yep, already am.

I think I'll just stick with the "none". ;-)

Jellby · 12-02-2013, 06:47 AM

Quote:

Originally Posted by MacEachaidh

No mate, not so. The "none" image is exactly the size of the screen (not exceeding the width, as I can tell by patterning in the image)

But it's not exactly the proportions of the image. If you have a perfect square in your source image, it will not be a perfect square but a rectangle in the screen with "none".

Otherwise, the reader is not complying with SVG specifications.

Quote:

I think I'll just stick with the "none". ;-)

How does it look in landscape orientation?

MacEachaidh · 12-02-2013, 06:56 AM

Quote:

Originally Posted by Jellby

But it's not exactly the proportions of the image. If you have a perfect square in your source image, it will not be a perfect square but a rectangle in the screen with "none".

Otherwise, the reader is not complying with SVG specifications.

I don't know what you mean. The graphic is the same size, in terms of pixels and pixel density, as the screen, in both directions. And it fits exactly. There are no perfect squares, but one has circles, and they're still circles, not ellipses.

Quote:

How does it look in landscape orientation?

I haven't tried/ Why do you ask?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Are Two EPUB Covers possible?	DapperDG	ePub	3	05-16-2013 01:56 PM
Epub covers	drmar	Recipes	1	03-03-2012 06:15 AM
How to get ePub covers to display?	Antioch	ePub	4	06-25-2011 03:00 AM
Why no Covers in ePub from Kobobooks?	hpjrt	Kobo Reader	7	12-18-2010 12:38 AM
epub covers quirk? with 0.7.2	Allis	Calibre	4	06-24-2010 08:22 PM

11-29-2013, 06:29 PM	#2
JSWolf Resident Curmudgeon Posts: 73,975 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You don't want the cover to fill the entire screen unless it is aspect ratio correct to do so. If you stretch the cover image to fill the screen, you will have an image that could look off because it is off. You want to keep the cover's aspect ratio. That means in most cases you will have space on the left/right side of the screen and that is correct. It is incorrect to make the screen aspect ratio wrong.

11-30-2013, 05:57 AM	#4
SBT Fanatic Posts: 580 Karma: 810184 Join Date: Sep 2010 Location: Norway Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad	Dunno... If the cover is mildly aspect-distortion tolerant, I like to let the cover fill the entire screen, and gamble that not too many readers read my books in portrait mode or on odd-sized devices.

12-01-2013, 04:26 AM	#6
MacEachaidh Browser Posts: 745 Karma: 578294 Join Date: Apr 2010 Location: Australia Device: Kobo Touch, Kobo Aura HD	Folks, thanks for the replies. (Strangely, I got no notification that anyone had posted here. Glad I checked!) The covers are already in 1080x1440 ratio, so yeah, I want them to stay that way. Rubén, thanks for the SVG code. I'll give it a go. And I'm petty sure I can save it as a default custom code in Jutoh, so it's generated automatically. I was worried that some devices may not be able to handle SVG code, but I guess it's more commonly implemented now? I'm interested in why you feel that covers should always be in an SVG wrapper? Is it something to do with the rendering? Interesting comments, SBT — it never occurred to me that people would read a book in landscape. A PDF or graphic novel, maybe, but not text. JSWolf, I hear what you're saying, and thanks for your comments. But the cover image is already in 1080x1440, so I don't understand why the regular code (width and height both set to 100%) results in the image being squished in at both sides, which is distorting the graphic. (Key words: I don't understand. ;-) ) So, I'll give the SVG, and trust to the fact that it works, without my understanding. Maybe one day it'll be clear. ;-)

12-01-2013, 05:12 AM	#7
MacEachaidh Browser Posts: 745 Karma: 578294 Join Date: Apr 2010 Location: Australia Device: Kobo Touch, Kobo Aura HD	Rubén, the version I had come across of the SVG wrapper is identical to yours, except that instead of preserveAspectRatio="xMidYMid meet" it says preserveAspectRatio="none" Nonetheless, it seems to work. What's the difference?

12-02-2013, 01:19 AM	#9
MacEachaidh Browser Posts: 745 Karma: 578294 Join Date: Apr 2010 Location: Australia Device: Kobo Touch, Kobo Aura HD	Thanks for the links, Rubén. Some reading there for me. I hear what you say about the preserveAspectRatio="none" setting only working when the image is the same pixel size (or ratio) as the screen, which it may not be on other devices. That makes sense, of course. What confuses me, though, is that on my two Kobos, with the preserveAspectRatio="none" setting, the cover is the same size as the full screen, but if I use preserveAspectRatio="xMidYMid meet" (which, if I understand correctly, you're saying will work universally), then on my two Kobos the cover image does not fill the screen, even though it's the same pixel size. With the "meet" setting, the image is compressed laterally and there are thing margins up each side of the image where the background shows through. So it seems to me that the "meet" setting isn't working as you described. The rest of the code is identical to what you posted here. Is there a reason this doesn't work for me?

12-02-2013, 01:37 AM	#10
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Yes, your cover is not of the same pixel size as the screen. An e-Ink screen does not really work with pixels. If you really want to know the pixel sizes, you need to experiment.

12-02-2013, 03:07 AM	#11
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Does the kobo show some kind of status bar? That would take some screen space, making the available screen a bit shorter. When the cover adapts to this sorter dimension, the width becomes shorter too.

Advert

Advert