A bug in 1.9.30? - Page 2

Doitsu · 05-28-2023, 01:10 PM

Quote:

Originally Posted by KevinH

So the exact same version of ADE 4.5.11.187303 on Windows works fine for epub2 with 100% but not for epub3?

In case my report was unclear, I only used ADE 2.0.1.78765 and ADE 4.5.11.187303 for my tests and I didn't have to modify the svg code of the epub2 book for ADE2 and ADE4, because both rendered the cover fine.

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:

Originally Posted by KevinH

Sigil does have epub version specific code for the cover so adding that workaround to the epub3 version is easily doable.

Adding height: 100vh; to the cover svg style tag in epub3 books should fix this annoying ADE 4 problem.

JSWolf · 05-28-2023, 01:37 PM

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>

This code works perfectly with %. The cover does not cause a blank page after the cover.

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>

JSWolf · 05-28-2023, 01:38 PM

Quote:

Originally Posted by Turtle91

Not necessarily.

I had issues with full screen images ‘bleeding’ into a 2nd page when I used 100%. When I switched to vw/vh it cleared it right up.

As with anything, check your target device(s) and see which one you want to use.

What program were you using that caused a bleeding to the 2nd page? It's a bug in that program.

JSWolf · 05-28-2023, 01:56 PM

Quote:

Originally Posted by KevinH

If anyone has Adobe Digital Editions versions on their machines could they please test the use of "100%" for width and height in an svg cover versus "100vw" for width and "100vh" for height (or 98 or 95 or ...). And report back.

Also please test elibrarian's inline style workaround if you find a version of ADE that has the bug and report that back also.

That way we can make a more informed decision on how best to workaround this ADE bug for use in the next version of Sigil.

Thanks

KevinH

@elibrarian's workaround works perfectly in ADE 2.0.1. I would change 98vh to 100vh. Covers don't look good when they aren't full screen. Question. Does the style make any difference to ePub 3?

<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]

JSWolf · 05-28-2023, 02:11 PM

ADE 2.0.1.

MAC: https://adedownload.adobe.com/pub/ad..._Installer.dmg
Windows: https://adedownload.adobe.com/pub/ad..._Installer.exe

DiapDealer · 05-28-2023, 02:35 PM

Moderator Notice
Please refrain from posting any more in this thread, Jon. Your contributions are neither helpful nor wanted. You're simply making noise.

KevinH · 05-28-2023, 03:06 PM

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";

which generates the following when adding the cover image from our Sigil User Guide:

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>

Thanks to all who pointed out the ADE issue (with epub3) and potential workarounds.

This change has now been pushed to Sigil master.

Turtle91 · 05-28-2023, 03:16 PM

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???

Tex2002ans · 05-28-2023, 03:28 PM

Quote:

Originally Posted by Doitsu

I only had to add height:100vh; to the cover svg code of the epub3 book for ADE4.

Ahh, I did not test EPUB3.

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:

Originally Posted by Turtle91

I had issues with full screen images ‘bleeding’ into a 2nd page when I used 100%. [...]

Yes, I've seen this too, especially in the browser-based or mobile Android apps (like PocketBook Reader).

Jellby has described the technical details many times over the years, where users expect height="100%" to:

match the height of the screen

... but that's not correct. It's:

the height of the parent container.

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:

CSS3's vh + vw units were created.
- vh + vw = VIEWPORT width/heights!
- % = CONTAINER width/heights!

AND THEN, the crux of this "blank page" problem, is an internal rounding issue. Imagine, after the headers, footers, OS/reader info, you had:

1110px height available

... but then it "100% scaled" the height of the image to:

1110.1px

This is why:

The "98% hack" was sometimes suggested as well.
- 98% would ensure scaled height would always fall below, even if there was a slight "rounding-up" error.

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:

CSS-Tricks.com: "Fun with Viewport Units"

For more info on the "98% hack" + "blank screen after images", see previous discussion in:

2022: "Remove blank pages"

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!

KevinH · 05-28-2023, 03:39 PM

Quote:

Originally Posted by Turtle91

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???

The template code is completely controlled by the user and overrides all else, so no worries.

Interrobang · 06-19-2023, 01:54 PM

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

Turtle91 · 06-19-2023, 02:12 PM

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

You can use an image editor eye dropper tool to get an appropriate color directly from the cover image if black or white don’t work.

Interrobang · 06-19-2023, 02:56 PM

Thanks for the quick reply.

Quote:

Did you copy/paste the code from above, or use Sigil’s "add cover" tool?

I used the tool Add Cover and replaced the original cover.xhtml file I had created.

Tim

DiapDealer · 06-19-2023, 03:15 PM

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.

Interrobang · 06-19-2023, 03:50 PM

Quote:

Originally Posted by DiapDealer

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.

Okay, I manually added Kevin's changes to my cover file and..... no difference.

Quote:

Originally Posted by Turtle91

Code:

<body style="background-color:rgb(0,0,0)">

When I added this code, I now see a black border on the left, right, and bottom edges of the image, but the whole image is still surrounded by a while border, albeit smaller on those three sides and maybe more uniform.

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

06-19-2023, 02:12 PM	#27
Turtle91 A Hairy Wizard Posts: 3,095 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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)"> You can use an image editor eye dropper tool to get an appropriate color directly from the cover image if black or white don’t work.

Similar Threads
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

05-28-2023, 02:11 PM	#20
JSWolf Resident Curmudgeon Posts: 73,983 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	ADE 2.0.1. MAC: https://adedownload.adobe.com/pub/ad..._Installer.dmg Windows: https://adedownload.adobe.com/pub/ad..._Installer.exe

05-28-2023, 02:35 PM	#21
DiapDealer Grand Sorcerer Posts: 27,549 Karma: 193191846 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.

05-28-2023, 03:16 PM	#23
Turtle91 A Hairy Wizard Posts: 3,095 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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???

06-19-2023, 01:54 PM	#26
Interrobang 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

06-19-2023, 03:15 PM	#29
DiapDealer Grand Sorcerer Posts: 27,549 Karma: 193191846 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.