Upgrade to epub3, ADE, and cover

[phossler]

I upgraded an epub2 to epub3 to experiment/learn

Using ADE the epub3 cover image is greatly distorted

It 'seems' to be an ADE problem since the editor's File Preview is fine

Can anyone confirm it's an ADE issue?

[kovidgoyal]

Is that the actual cover (i.e. the first page of the book) or just the cover image?

It's help if you posted a sample epub to re-create the issue. Although I dont think I even have ADE newer than 1.7.x installed at this point

[phossler]

They were screen shots of ADE v4.5.7 of the 'before' and 'after'

I loaded my epub2 version from a backup, upgraded it to epub3, and saved a copy


I did look at 'What's Changed' and saw a few references to Cover, but they all looked pretty harmless (to me at least, but then a lot of my changes do)

[kovidgoyal]

The EPUB3 looks fine to me and the cover displays properly in the ADE 1.7.2 that I have...so I have no idea what problem ADE 4 has, sorry.

[phossler]

Thanks for checking

I figured it was an ADE issue

[DNSB]

Originally Posted by phossler

Thanks for checking

I figured it was an ADE issue

I took a quick look at your epub file and you might want to make a change in the code used for displaying the cover image. The current code is:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 306 423" preserveAspectRatio="none">
      <image width="306" height="423" xlink:href="../Images/cover.jpg"/>
    </svg>

I would recomment changing it to:

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

This change in preserveAspectRatio should improve how your cover image displays. Could you check the attached modification of your epub3 and let me know if this is an improvement.

[phossler]

1. I went back to the epub2 file, deleted the cover html file, and added it with the [Add Cover] menu

So somehow I must have messed it up -- all I ever do intentionally is use the menu

epub2 --

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 306 423" preserveAspectRatio="xMidYMid meet">
      <image width="306" height="423" xlink:href="../cover.jpg"/>
    </svg>

so at least the image is not distorted

2. The image size seems to have changed

After I deleted the cover html, re-added the cover, and upgraded to epub3 the image is much smaller


epub3b --

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 306 423" preserveAspectRatio="xMidYMid meet">
      <image width="306" height="423" xlink:href="../cover.jpg"/>
    </svg>

[kovidgoyal]

THe issue is that ADE is deciding to use only a fraction of the available height for the full page height. That is why the image is distorted with preserveAspectRatio=none and small with preserveAspectRatio=xMidyMid meet

But ADE is only doing this for the EPUB 3 file and not the EPUB 2 file. The question is why? That I have no answer for.

[mikapanja]

Originally Posted by phossler

epub3b --

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 306 423" preserveAspectRatio="xMidYMid meet">
      <image width="306" height="423" xlink:href="../cover.jpg"/>
    </svg>

Try this code instead of <svg> and see if it helps:

<div><img alt="image" style="max-height: 100%; max-width: 100%;" src="../cover.jpg"/></div>

[gbm]

phossler:

A couple of links which should be of help to you.

https://www.w3.org/TR/SVG2/linking.html

which is a sub set of:

http://kb.daisy.org/publishing/docs/html/svg.html

which is a sub set of:

http://kb.daisy.org/publishing/

bernie

[phossler]

@ mikapanja & gbm -- thanks for the suggestion and the links

I tend to use the 'what kovid gave me' default for the cover and just use [Add Cover], but I'll keep the idea just in case I do get some odd ball image

I bookmarked the links right next to my w3schools.com link since I like to keep references handy

[deback]

Here's the code I use in the titlepage.xhtml (or the cover HTML file, whatever name was assigned to it) when the image is not the correct size:


<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta name="calibre:cover" content="true"/>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {
padding: 0;
margin: 0;
}
body {
text-align: center;
padding: 0;
margin: 0;
}
div {
padding: 0;
margin: 0;
}
img {
padding: 0;
margin: 0;
}
</style>
</head>

<body>

<div>

<img src="cover.jpeg" alt="cover" style="height: 100%"/>

</div>

</body>

</html>

Copy and paste all of the codes above and give it a try. Replace "cover.jpeg" with the name of the cover image file.

[momoha]

The SVG code used is valid, the problem is ADE with ePub3. From what I understand, normally softwares either use height values in percentages (%) or in viewport (vh). If they support viewport, they will also support the function @supports.


But what I’m facing with ADE is that with ePub2 it uses the % value, and in ePub3 it uses the vh value, BUT it doesn’t support @supports. So to make it work you have to use "vh" only, and then all the softwares not supporting "vh" won’t display your stuff correctly.

So I found that this following code will work with ePub3 in ADE (but it won’t work in softwares not supporting viewport):
<div>
<svg style="height: 99vh; width: 99vw;" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
</div>

While this code works on the softwares not supporting viewport, but won’t work on the others (Like iBooks or ePub3 on ADE):

<div>
<svg style="height: 99%; width: 99%;" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
</div>

So it’s really terrible. I’m trying to update my company’s procedure so that we use ePub3 only, but ADE messes up both my full page and 80% height image codes. I’m trying really hard to find a workaround but I think I might have to stick with ePub2.

[Brett Merkey]

@momoha
I have not had to deal with this type of frustration for many years but just in case I'm not wasting your time...
By putting height/width values inline, you force a certain behavior on the user agent that, as you point out, may fail. Can you use a class and reference that in the stylesheet instead? In the stylesheet, user agents are supposed to ignore properties they do not understand. So you put the older property/value first, followed by the newer—which gets ignored by some but cascaded by software that can recognize it.

Like:

.view {
height: 99%;
width: 99%;
height: 99vh;
width: 99vw;
}

[momoha]

@Brett Merkey
I tried and it doesn’t work properly.

I came up with what seem to be a revolutionary code that solves all of our problems, both for the full page images AND for the images with caption. Before making a formal announcement with my company I’d love if some of you guys could double check my code and see if it is as good as I think it is. I tested it with an ePub3 on ADE on Windows 10, iBooks on iPad, and on Android, Bluefire, Google Books and Gitden Reader.

Full page images (the height="98%" is for Bluefire, else it creates a blank page before the image):

  <div>
    <svg style="height: 100vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="98%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
  </div>

Image with caption:

  <div>
    <svg style="height: 70vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="70%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
  </div>

Edit: I noticed this post is in the Calibre section, which doesn’t seem appropriate for my topic, so I’ll repost in the ePub section.