A bug in 1.9.30? - Page 3

DiapDealer · 06-19-2023, 04:08 PM

Quote:

Originally Posted by Interrobang

When viewing the ebook on either a Kindle or Samsung tablet...

There's a conversion process needed to view the epub on a Kindle. How that conversion process was performed might be relevant. When you say "Samsung tablet" do you mean using an epub reading app on the tablet, or do you mean using the Kindle app on the tablet?

If this is all about how converted epubs look on Kindle devices and/or Kindle reading apps, this may not be the best place to ask.

Interrobang · 06-19-2023, 04:21 PM

Quote:

Originally Posted by DiapDealer

There's a conversion process needed to view the epub on a Kindle. How that conversion process was performed might be relevant. When you say "Samsung tablet" do you mean using an epub reading app on the tablet, or do you mean using the Kindle app on the tablet?

I originally tried checking my work on the Kindle by using Amazon's Send To My Kindle page. During the early stages of my troubleshooting, I learned about how that import process can change the document in question. That's why I started looking at the book on my Samsung Tab S3. I use Google Play Books to upload the epub from my PC and then view it on the tablet. [No USB cables, yay!] Google may be massaging the file in a similar way to Amazon, I don't know. It just seemed, and I had hoped, it was a more direct way of getting the epub from point A to point B.

Turtle91 · 06-19-2023, 09:05 PM

The black area is the "body" … should be the whole screen unless you have some margins or padding as a default.

Try adding this to the style= to see if that’s the cause.

Code:

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

Turtle91 · 06-19-2023, 09:14 PM

Also, the image dimensions and the display port viewBox dimensions should be the same. Eg.
If:
width="492" height="612"

Then:
viewBox="0 0 492 612"

These should be fine since you used Sigil’s ‘add cover’ and I would think something in the translation got muffed. But it doesn’t hurt to check.

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

Quote:

Originally Posted by Turtle91

The black area is the "body" … should be the whole screen unless you have some margins or padding as a default.

I had added the margins and padding at 0 a few steps ago, no difference.

Quote:

Originally Posted by Turtle91

Also, the image dimensions and the display port viewBox dimensions should be the same. Eg.
If:
width="492" height="612"

Then:
viewBox="0 0 492 612"

I double checked those numbers, they're correct and match.

I tried applying some ideas from Dave Gray's article: HTML vs Body: How to Set Width and Height for Full Page Size

I removed the height from div and replaced it with min-height in body:

Code:

<body style="margin: 0; padding 0; background-color:rgb(0,0,0)">
  <div style="height: 100vh; text-align: center; padding: 0pt; margin: 0pt;">

Code:

<body style="margin: 0; padding 0; background-color:rgb(0,0,0); min-height: 100vh">
  <div style="text-align: center; padding: 0pt; margin: 0pt">

This resulted in the background color along the bottom of the image to extend all the way to the bottom of the screen, but the image didn't extend. Progress? Kinda...

One interesting note from Dave's article:

Code:

...setting the width to 100% before removing the margins will cause the body element to overflow.

Now while he was talking about setting width, I wondered it not clearing the margins first on height might also affect the full screen viewing. That's why I moved the margin and padding values before the height ones. Alas, it didn't help.

Thank you for your continued assistance as I work to resolve this strange behavior.

Tim

Interrobang · 07-02-2023, 01:59 AM

I wanted to update everyone on the results of my testing to date.

Previously, when I used the built-in code for a cover image, code that creates an SVG wrapper, my image would not be full screen. The image would be flush along the top, a border along the bottom edge, and a larger border along both the left and right edges. Side note: I'm sure the left and right borders are a result of keeping the aspect ratio.

After extensive Googling/reading/experimenting, I've discovered the following:

If I use a standard <img> tag and not the <svg> wrapper, my image is larger. There is no margin along the bottom edge! Also, the size of the image doesn't change if the encapsulating <div> does or doesn't contain "height: 100vh;".

These results seem opposite of what I had read, both here and on other sites, about using the SVG wrapper. With the <img> tag, if I just set "height: 100%" and no declaration for width, my image's aspect ratio is preserved, which was also supposed to be one of the benefits of using the wrapper.

As it stands now, I'm just going to abandon the idea of using the SVG wrapper since I get better results with a plain image tag.

If anyone has any questions about what I've tried or would like me to provide a sample epub or screenshots, just ask. Meanwhile, I'll keep experimenting since the only thing I haven't played with yet is "@media" statements, and I want to be thorough in my research.

Turtle91 · 07-02-2023, 05:32 AM

A sample ePub that duplicates the problem would be nice.

Interrobang · 07-02-2023, 01:16 PM

Quote:

Originally Posted by Turtle91

A sample ePub that duplicates the problem would be nice.

Here, I hope this helps.

The epub contains four tests with two variations each, so eight tests in total.

The tests are:
Test-1a Inline SVG image with parent div style "height: 100vh"
Test-1b Inline SVG image with parent div style "height: 100%"
Test-2a SVG wrapped PNG image with parent div style "height: 100vh"
Test-2b SVG wrapped PNG image with parent div style "height: 100%"
Test-3a IMG tag loading SVG image with parent div style "height: 100vh"
Test-3b IMG tag loading SVG image with parent div style "height: 100%"
Test-4a IMG tag loading PNG image with parent div style "height: 100vh"
Test-4b IMG tag loading PNG image with parent div style "height: 100%"

Results for my tablet are:
Test-1a Image with border on left, bottom, and right sides
Test-1b Image with border on left, bottom, and right sides
Test-2a Image with border on left, bottom, and right sides
Test-2b Image with border on left, bottom, and right sides
Test-3a Larger image with border on left and right sides
Test-3b Larger image with border on left and right sides
Test-4a Larger image with border on left and right sides
Test-4b Larger image with border on left and right sides

Turtle91 · 07-02-2023, 07:09 PM

It appears you had a margin for your <body>. I set that to 0 and it appears to work fine...in Sigil...try it on your device.

Code:

<body style="background-color:rgb(0,0,255); margin:0">
  <div style="margin: 0; padding: 0">
    <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1275 2100" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title/>
      <image width="1275" height="2100" xlink:href="../Images/Title_Page.png"/>
    </svg>
  </div>
</body>

I also changed the height and width to vh/vw instead of %.

DNSB · 07-02-2023, 07:39 PM

Quote:

Originally Posted by Turtle91

It appears you had a margin for your <body>. I set that to 0 and it appears to work fine...in Sigil...try it on your device.

Code:

<body style="background-color:rgb(0,0,255); margin:0">
  <div style="margin: 0; padding: 0">
    <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1275 2100" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title/>
      <image width="1275" height="2100" xlink:href="../Images/Title_Page.png"/>
    </svg>
  </div>
</body>

I also changed the height and width to vh/vw instead of %.

On a Kobo ereader, changing the height/width to vh/vw gives a thumbnail size cover image.

Turtle91 · 07-02-2023, 11:08 PM

I use the following - I have it set as a template so Sigil uses it when I click on Tools/Add Cover

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
</head>

<body style="margin:0; padding:0; background-color:black">
  <h1 style="display:none" title="Cover"/>

  <div style="margin:0; padding:0">
    <svg 
		xmlns="http://www.w3.org/2000/svg" 
		height="99vh" width="99vw" 
		preserveAspectRatio="xMidYMid meet" version="1.1" 
		viewBox="0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT" 
		xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="SGC_IMAGE_WIDTH" height="SGC_IMAGE_HEIGHT" xlink:href="SGC_IMAGE_FILENAME"/>
    </svg>
  </div>
</body>
</html>

If kobo barfs on the vw/vh, first off - complain to kobo and tell them to get their act in gear

, second, just change them back to 100% (or 98% if you are having overflow issues)

Let us know if that works on your device(s) as well!

Interrobang · 07-02-2023, 11:28 PM

Quote:

Originally Posted by Turtle91

It appears you had a margin for your <body>. I set that to 0 and it appears to work fine...in Sigil...try it on your device.

My original body style had both margin and padding settings, but it didn't seem to make any difference so I took them out.

Code:

<body style="margin: 0; padding: 0; background-color:rgb(0,0,255)">

I can certainly put it back in and see what happens with the other changes. BTW I had the background color set to blue just so I could easily see the boundaries of the viewbox. I intend to use black for production.

There does seem to be a bit of a difference in the displayed image between the tablet, Sigil, and ADE. So while Sigil and ADE are good for quick previews, I send it to the device to confirm how it will look to the end user. Or am I supposed to code it so that it looks the same on all three? At this point that seems like a near impossible task.

Interrobang · 07-02-2023, 11:45 PM

Quote:

Originally Posted by Turtle91

Let us know if that works on your device(s) as well!

Per your suggestion, I changed the code as follows:

Code:

<body style="margin: 0; padding: 0; background-color:rgb(0,0,255)">
  <div style="margin: 0; padding: 0; text-align: center;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100vh" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1275 2100" width="100vw" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title/>
      <image width="1275" height="2100" xlink:href="../Images/Title_Page.png"/>
    </svg>
  </div>
</body>

Sigil displayed it fine; ADE shrank the image to about 60%; and the tablet showed it the same size as the other attempts, with a border along the bottom.

I've attached a couple of screenshots so you can see what I'm seeing.

JSWolf · 07-03-2023, 04:30 AM

Quote:

Originally Posted by Turtle91

I use the following - I have it set as a template so Sigil uses it when I click on Tools/Add Cover

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
</head>

<body style="margin:0; padding:0; background-color:black">
  <h1 style="display:none" title="Cover"/>

  <div style="margin:0; padding:0">
    <svg 
		xmlns="http://www.w3.org/2000/svg" 
		height="99vh" width="99vw" 
		preserveAspectRatio="xMidYMid meet" version="1.1" 
		viewBox="0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT" 
		xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="SGC_IMAGE_WIDTH" height="SGC_IMAGE_HEIGHT" xlink:href="SGC_IMAGE_FILENAME"/>
    </svg>
  </div>
</body>
</html>

If kobo barfs on the vw/vh, first off - complain to kobo and tell them to get their act in gear

, second, just change them back to 100% (or 98% if you are having overflow issues)

Let us know if that works on your device(s) as well!

But there's no reason to use vw/h when % works. Why use vw/h when it might not work and % will work?

JSWolf · 07-03-2023, 04:32 AM

Quote:

Originally Posted by Interrobang

Per your suggestion, I changed the code as follows:

Code:

<body style="margin: 0; padding: 0; background-color:rgb(0,0,255)">
  <div style="margin: 0; padding: 0; text-align: center;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100vh" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1275 2100" width="100vw" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title/>
      <image width="1275" height="2100" xlink:href="../Images/Title_Page.png"/>
    </svg>
  </div>
</body>

Sigil displayed it fine; ADE shrank the image to about 60%; and the tablet showed it the same size as the other attempts, with a border along the bottom.

I've attached a couple of screenshots so you can see what I'm seeing.

Take out vw and replace it with % and it will work.

06-19-2023, 09:05 PM	#33
Turtle91 A Hairy Wizard Posts: 3,355 Karma: 20171571 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	The black area is the "body" … should be the whole screen unless you have some margins or padding as a default. Try adding this to the style= to see if that’s the cause. Code: <body style="background-color:rgb(0,0,0); margin:0; padding:0">

07-02-2023, 07:09 PM	#39
Turtle91 A Hairy Wizard Posts: 3,355 Karma: 20171571 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	It appears you had a margin for your <body>. I set that to 0 and it appears to work fine...in Sigil...try it on your device. Code: <body style="background-color:rgb(0,0,255); margin:0"> <div style="margin: 0; padding: 0"> <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1275 2100" xmlns:xlink="http://www.w3.org/1999/xlink"> <title/> <image width="1275" height="2100" xlink:href="../Images/Title_Page.png"/> </svg> </div> </body> I also changed the height and width to vh/vw instead of %.

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

06-19-2023, 09:14 PM	#34
Turtle91 A Hairy Wizard Posts: 3,355 Karma: 20171571 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	Also, the image dimensions and the display port viewBox dimensions should be the same. Eg. If: width="492" height="612" Then: viewBox="0 0 492 612" These should be fine since you used Sigil’s ‘add cover’ and I would think something in the translation got muffed. But it doesn’t hurt to check.

07-02-2023, 01:59 AM	#36
Interrobang Oracle Pig Keeper Posts: 26 Karma: 5024 Join Date: Jun 2023 Device: Kindle Fire HD, Samsung Tab	I wanted to update everyone on the results of my testing to date. Previously, when I used the built-in code for a cover image, code that creates an SVG wrapper, my image would not be full screen. The image would be flush along the top, a border along the bottom edge, and a larger border along both the left and right edges. Side note: I'm sure the left and right borders are a result of keeping the aspect ratio. After extensive Googling/reading/experimenting, I've discovered the following: If I use a standard <img> tag and not the <svg> wrapper, my image is larger. There is no margin along the bottom edge! Also, the size of the image doesn't change if the encapsulating <div> does or doesn't contain "height: 100vh;". These results seem opposite of what I had read, both here and on other sites, about using the SVG wrapper. With the <img> tag, if I just set "height: 100%" and no declaration for width, my image's aspect ratio is preserved, which was also supposed to be one of the benefits of using the wrapper. As it stands now, I'm just going to abandon the idea of using the SVG wrapper since I get better results with a plain image tag. If anyone has any questions about what I've tried or would like me to provide a sample epub or screenshots, just ask. Meanwhile, I'll keep experimenting since the only thing I haven't played with yet is "@media" statements, and I want to be thorough in my research.

07-02-2023, 05:32 AM	#37
Turtle91 A Hairy Wizard Posts: 3,355 Karma: 20171571 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	A sample ePub that duplicates the problem would be nice.

Advert

Advert