![]() |
#16 | ||
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,635
Karma: 23190435
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
I only had to add height:100vh; to the cover svg code of the epub3 book for ADE4. IIRC, ADE 4 comes with two different rendering engines, one for epub2 books and one for epub3 books, which would explain the different rendering results for epub2 and epub3 book covers. Quote:
|
||
![]() |
![]() |
![]() |
#17 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,699
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
This code does not work in ADE 2.0.1. You get a very small cover eve if the cover image is hi-res.
Code:
<div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100vw" height="100vh" viewBox="0 0 1669 2560" preserveAspectRatio="xMidYMid meet"> <image width="1669" height="2560" xlink:href="images/cover.jpg"/> </svg> </div> Code:
<div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1669 2560" preserveAspectRatio="xMidYMid meet"> <image width="1669" height="2560" xlink:href="images/cover.jpg"/> </svg> </div> |
![]() |
![]() |
Advert | |
|
![]() |
#18 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,699
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
What program were you using that caused a bleeding to the 2nd page? It's a bug in that program.
|
![]() |
![]() |
![]() |
#19 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,699
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height:98vh;" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1669 2560" preserveAspectRatio="xMidYMid meet"> <image width="1669" height="2560" xlink:href="images/cover.jpg"/> </svg> </div>[/quote] |
|
![]() |
![]() |
![]() |
#20 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,699
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
![]() |
![]() |
Advert | |
|
![]() |
#21 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,830
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Moderator Notice
Please refrain from posting any more in this thread, Jon. Your contributions are neither helpful nor wanted. You're simply making noise. |
![]() |
![]() |
![]() |
#22 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,029
Karma: 5449552
Join Date: Nov 2009
Device: many
|
Okay, based on this feedback, I have now changed the epub3 add cover code to be:
Code:
const QString HTML5_COVER_SOURCE = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\" ?>\n" "<!DOCTYPE html>\n\n" "<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:epub=\"http://www.idpf.org/2007/ops\">\n" "<head>\n" " <title>Cover</title>\n" "</head>\n" "" "<body>\n" " <div style=\"height: 100vh; text-align: center; padding: 0pt; margin: 0pt;\">\n" " <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\" version=\"1.1\" viewBox=\"0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT\" width=\"100%\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n" " <image width=\"SGC_IMAGE_WIDTH\" height=\"SGC_IMAGE_HEIGHT\" xlink:href=\"SGC_IMAGE_FILENAME\"/>\n" " </svg>\n" " </div>\n" "</body>\n" "</html>\n"; Code:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <title>Cover</title> </head> <body> <div style="height: 100vh; text-align: center; padding: 0pt; margin: 0pt;"> <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 width="600" height="800" xlink:href="../Images/cover.png"/> </svg> </div> </body> </html> This change has now been pushed to Sigil master. |
![]() |
![]() |
![]() |
#23 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quick question on this:
Sigil also uses a template file IF the user has created one and stored it in the preferences folder ("cover.xhtml"). I think we discussed this a while back and I thought you had made the option for different files for ePub2 and ePub3. Will this change still honor the template file(s) should the user choose to create one??? |
![]() |
![]() |
![]() |
#24 | ||
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
Want to attach a sample EPUB3 so we could more easily test these different readers/variants? Side Note: Still sounds like something ADOBE should be fixing in their reader... ![]() Quote:
Jellby has described the technical details many times over the years, where users expect height="100%" to:
... but that's not correct. It's:
Everyone agrees on 100% width, and it works as expected, but 100% height leads to all sorts of oddities/conflicts across implementations. Then you have to take into account headers/footers (from reader/app/OS)—so again, the 100% "screen height" you expect isn't actually taking up the entire screen. This is why:
AND THEN, the crux of this "blank page" problem, is an internal rounding issue. Imagine, after the headers, footers, OS/reader info, you had:
... but then it "100% scaled" the height of the image to:
This is why:
The issue with new CSS3 units—like vh/vw + rem—is that they wouldn't work on older devices/readers. The SVG wrapper is/was the ultimate solution to all of these though. :P - - - Side Note: For more info on vh/vw, also see: For more info on the "98% hack" + "blank screen after images", see previous discussion in: I was never a big fan, so I never promoted the "98% hack"... but I wouldn't fault others for trying to squash the "2nd blank page" issue if they were SO annoyed by it. Side Note #2: This a bug/issue in some small minority of readers, so I would strongly vote against changing Sigil's correct 100% (or 100vh) Add Cover into 98% just to appease this quirk. ADE needs to fix their crap! And if you, as an ebook creator/reader, are annoyed by that 2nd blank page (on whatever device you're using), then you can do that manual code adjustment afterwards. That's just my 2 cents! ![]() |
||
![]() |
![]() |
![]() |
#25 | |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,029
Karma: 5449552
Join Date: Nov 2009
Device: many
|
Quote:
|
|
![]() |
![]() |
![]() |
#26 |
Oracle Pig Keeper
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 26
Karma: 5024
Join Date: Jun 2023
Device: Kindle Fire HD, Samsung Tab
|
I too have been having trouble getting the cover image to fill the screen on e-readers. I tried different approaches in HTML/CSS with no success. I tried the FlightDeck solution, no luck there. Then I found this thread and tried the updated code, but the resulting image was only slightly larger. [Side note: I found the info in this thread very informative.]
I'm currently building an EPUB3 sample book so that I can learn Sigil before moving onto books that will be sold. When viewing the ebook on either a Kindle or Samsung tablet, I get a large white border around the image. The border is thicker along the bottom. I've looked at other ebooks and their covers are full screen, so I know it can be done. Any help would be appreciated. As I said, I've been attempting to beat this through trial and error, but after a week I'm ready for some help. [Also, I thought about making a new thread on the subject, but thought this post was inline with the thread I replied to.] Thanks Tim |
![]() |
![]() |
![]() |
#27 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Did you copy/paste the code from above, or use Sigil’s "add cover" tool?
If you copy/pasted the image or viewport dimensions may be incorrect. The add cover tool will automatically add the correct image size and viewport dimensions so you will get the image to the largest size (maximizes height OR width depending on orientation) possible without changing the image aspect. You will have borders along either the side OR top, but not both. I manually add a style to change the background color to an appropriate color to compliment the image like this: Code:
<body style="background-color:black"> OR <body style="background-color:rgb(0,0,0)"> OR <body style="background-color:rgba(0,0,0,1)"> |
![]() |
![]() |
![]() |
#28 | |
Oracle Pig Keeper
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 26
Karma: 5024
Join Date: Jun 2023
Device: Kindle Fire HD, Samsung Tab
|
Thanks for the quick reply.
Quote:
Tim |
|
![]() |
![]() |
![]() |
#29 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,830
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Kevin's changes made to Add Cover (for EPUB3) mentioned in this thread will not appear in Sigil until the release after v1.9.30. Unless you compile Sigil from source yourself.
|
![]() |
![]() |
![]() |
#30 | ||
Oracle Pig Keeper
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 26
Karma: 5024
Join Date: Jun 2023
Device: Kindle Fire HD, Samsung Tab
|
Quote:
![]() Quote:
It's progress, and provides further details on troubleshooting the issue. So, if the area now in black is part of the viewport, which is why it's now colored, why isn't the image being scaled into that area to begin with? Maybe @Tex2002ans has a clue? Thanks Tim |
||
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Possible bug? | RbnJrg | Sigil | 142 | 09-17-2021 06:51 PM |
[BUG] - M96 out of memory - [BUG] | Alf77 | Onyx Boox | 5 | 02-05-2015 11:47 AM |
DR800 Help, I've got a bug!! A bug on my screen!! | Franky | iRex | 4 | 06-21-2011 11:45 AM |
Embedded font bug or CSS bug in ADE | JSWolf | ePub | 10 | 06-11-2011 02:34 PM |
PRS-505 bug or eBookLib bug? | porkupan | Sony Reader | 3 | 10-07-2007 10:44 PM |