04-20-2018, 08:51 PM | #1 |
Wizard
Posts: 1,071
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
Upgrade to epub3, ADE, and cover
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? |
04-21-2018, 12:47 AM | #2 |
creator of calibre
Posts: 43,858
Karma: 22666666
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
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 |
04-21-2018, 07:36 AM | #3 |
Wizard
Posts: 1,071
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
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) Last edited by phossler; 04-21-2018 at 07:39 AM. |
04-21-2018, 08:19 AM | #4 |
creator of calibre
Posts: 43,858
Karma: 22666666
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
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.
Last edited by kovidgoyal; 04-21-2018 at 08:49 AM. |
04-21-2018, 08:51 AM | #5 |
Wizard
Posts: 1,071
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
Thanks for checking
I figured it was an ADE issue |
04-21-2018, 12:19 PM | #6 |
Bibliophagist
Posts: 35,401
Karma: 145435140
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
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:
Code:
<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>
Code:
<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>
Last edited by DNSB; 04-21-2018 at 12:21 PM. Reason: Fat fingers cause typos... |
04-21-2018, 03:26 PM | #7 |
Wizard
Posts: 1,071
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
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 -- Code:
<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> 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 -- Code:
<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> |
04-21-2018, 11:32 PM | #8 |
creator of calibre
Posts: 43,858
Karma: 22666666
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
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. |
04-22-2018, 01:21 AM | #9 | |
Perfectionist
Posts: 62
Karma: 12802
Join Date: Apr 2014
Device: none
|
Quote:
Code:
<div><img alt="image" style="max-height: 100%; max-width: 100%;" src="../cover.jpg"/></div> |
|
04-22-2018, 10:16 AM | #10 |
Wizard
Posts: 2,082
Karma: 8796704
Join Date: Jun 2010
Device: Kobo Clara HD,Hisence Sero 7 Pro RIP, Nook STR, jetbook lite
|
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 |
04-23-2018, 11:17 AM | #11 |
Wizard
Posts: 1,071
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
@ 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 |
04-23-2018, 02:01 PM | #12 |
Book E d i t o r
Posts: 432
Karma: 288184
Join Date: May 2015
Device: Laptop
|
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. |
01-22-2019, 01:37 AM | #13 |
Annabelle Viau
Posts: 43
Karma: 16664
Join Date: Jan 2015
Location: Rishikesh, India
Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)
|
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. Last edited by momoha; 01-22-2019 at 01:42 AM. |
01-22-2019, 09:14 AM | #14 | |
Not Quite Dead
Posts: 194
Karma: 654170
Join Date: Jul 2015
Device: Paperwhite 4; Galaxy Tab
|
@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: Quote:
Last edited by Brett Merkey; 01-22-2019 at 09:18 AM. |
|
01-24-2019, 02:20 AM | #15 |
Annabelle Viau
Posts: 43
Karma: 16664
Join Date: Jan 2015
Location: Rishikesh, India
Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)
|
@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): Code:
<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> Code:
<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> Last edited by momoha; 01-25-2019 at 03:48 AM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
v3.22.1 Upgrade to epub3 | phossler | Editor | 3 | 04-20-2018 08:15 PM |
Forced to upgrade to new ADE? | dkperez | General Discussions | 8 | 07-29-2017 09:47 PM |
epub3 app with epub3 dictionary support | Doitsu | ePub | 0 | 01-21-2017 09:38 AM |
New Errors Converting epub3 -> zip -> epub3 | Lola25 | ePub | 2 | 11-12-2013 09:37 PM |
No cover image in ADE from InDesign | wannabee | ePub | 3 | 02-25-2011 02:40 AM |