Image styling css... what do all these properties do?

[RbnJrg]

Originally Posted by JSWolf

When using the code I posted, it does not look correct in the preview of the the editor (both calibre or Sigil). It's an issue with QT not respecting %.

It's not an issue, it's not a bug but both programs treat "%" as it should be treated; the bug is in ADE 2.x/3.x! PLEASE, READ THE FOLLOWING ARTICLE, so you are going to understand how "height" works:

https://www.joshwcomeau.com/css/height-enigma/

[JSWolf]

Originally Posted by RbnJrg

It's not an issue, it's not a bug but both programs treat "%" as it should be treated; the bug is in ADE 2.x/3.x! PLEASE, READ THE FOLLOWING ARTICLE, so you are going to understand how "height" works:

https://www.joshwcomeau.com/css/height-enigma/

The code he uses is not backwards compatible with ePub2. I would never use rem when em works for both ePub2 and ePub3.

It's not a bug in ADE 2/3. They both work with SVG and they both work with the code I posted for a full screen image.

In previous versions of calibre and Sigil, they did display % correctly. But that was until a change in QT quashed that. So we just have to see the images not correct in the previewers. But it does work properly in ADE 2/3, calibre viewer, Kindle with KF8, Kobo with ePub & KePub.

[RbnJrg]

Originally Posted by JSWolf

It's not a bug in ADE 2/3. They both work with SVG and they both work with the code I posted for a full screen image.

It works because of the bug. If ADE were going to honor % height as expected, images in ADE would look as in Webkit/Readium ereaders. Your code only will work under ADE and with ereaders based on ADE.

In previous versions of calibre and Sigil, they did display % correctly. But that was until a change in QT quashed that. So we just have to see the images not correct in the previewers. But it does work properly in ADE 2/3, calibre viewer, Kindle with KF8, Kobo with ePub & KePub.

But it doesn't work on Sigil, Calibre, Readium, BibiReader, JSReader, Thorium, Kobo for Android and iOS, PocketBook, Lithium, Reasily, Cantook, Aldiko, Infinity Reader, BlueFire; your code will practically not work on any Android e-reader.

BUT IF YOU HAD READ THE ARTICLE, then you would know that what you're calling a bug isn't one, and that the correct way to deal with percentage heights is to include the following in the stylesheet:

html, body {
    height: 100%;
}

Alternatively, you also have the option to set the height of whatever twice: once in "%" and once in "vh"; like this:

.myFullHeight {
    height: 100%; /* ADE will work with this and will work because of the ADE's bug */
}

@supports (height: 99vh) { /* and QT ereader will use this; ADE will ignore this statement */
   .myFullHeight {
       height: 99vh;
    }
}

However, even though you can set a height of 100%, your code has the problem that the image width can be greater than 100%. If you set it to width: 100%, the image will be distorted. You can check that by opening the following epub anywhere and changing the width of the ereader window. By employing an svg wrapper that problem doesn't appear.


Temporal.epub

The same problem occurs when setting the height using the alternative method (see the following epub):
Temporal2.epub

But by employing a svg wrapper all problems disappear:

Temporal3.epub

Of course, you're free to continue using your own code (even if it's not the best), but you're leaving out more than half of e-readers.

[DNSB]

Originally Posted by RbnJrg

It's not an issue, it's not a bug but both programs treat "%" as it should be treated; the bug is in ADE 2.x/3.x! PLEASE, READ THE FOLLOWING ARTICLE, so you are going to understand how "height" works:

https://www.joshwcomeau.com/css/height-enigma/

Thanks for that link. I knew most of the information from learning in bits and pieces over the years but that item puts it together in a more comprehensible form!

[RbnJrg]

Originally Posted by DNSB

Thanks for that link. I knew most of the information from learning in bits and pieces over the years but that item puts it together in a more comprehensible form!

You are welcome! Indeed, the article not only describes very well how to use the "height" property (which is handled very differently than the "width"), but it's very modern and also teaches how to combine "height" with "grid" and "flex-box." It's funny because what JSWolf thinks is a bug is actually the normal behavior of the "height" property, and it's ADE that doesn't handle it properly.

[ElMiko]

Originally Posted by RbnJrg

It's not an issue, it's not a bug but both programs treat "%" as it should be treated; the bug is in ADE 2.x/3.x! PLEASE, READ THE FOLLOWING ARTICLE, so you are going to understand how "height" works:

https://www.joshwcomeau.com/css/height-enigma/

Holy *expletive-ing* *expletive* *expletive*... That article was EXACTLY what I needed. Talk about a lightbulb moment. No wonder the code in my first post wasn't "working". I just was fundamentally WRONG about how those properties even mean.

I'm still unclear in one of your latest example codes:

html, body {
    height: 100%;
}

Why is the "html" necessary? Actually, what does it even do?? I've never seen css styling on "html" as the parent element...

Regarding the Sigil plugin that should allow me to turn off my already addled brain, is it the "InsertImageSVG" plugin?

EDIT: I just reread that Josh W. Comeau article again, and I feel the need to curse again in total awe. Genuinely eye-opening.

[RbnJrg]

Originally Posted by ElMiko

I'm still unclear in one of your latest example codes:

html, body {
    height: 100%;
}

Why is the "html" necessary? Actually, what does it even do?? I've never seen css styling on "html" as the parent element...

The Josh W. Comeau article explains it Read in that article where you see "Percentages all the way down". In short, to set a height in % of a children block, first you need to set also in % the parent block. But as all tags in an epub are childrens of html and body, you need first to set "height: 100%" for <html> and <body>. But in the article you'll find the explanation in depth and with examples, so there's no point in me going into detail here when you'll have everything better explained there.

Regarding the Sigil plugin that should allow me to turn off my already addled brain, is it the "InsertImageSVG" plugin?

Yes, it is; that is

EDIT: I just reread that Josh W. Comeau article again, and I feel the need to curse again in total awe. Genuinely eye-opening.

It's a very good article and a modern one. Reading it will teach you many things in these yours first steps with epub.

[JSWolf]

Originally Posted by RbnJrg

It works because of the bug. If ADE were going to honor % height as expected, images in ADE would look as in Webkit/Readium ereaders. Your code only will work under ADE and with ereaders based on ADE.

But it doesn't work on Sigil, Calibre, Readium, BibiReader, JSReader, Thorium, Kobo for Android and iOS, PocketBook, Lithium, Reasily, Cantook, Aldiko, Infinity Reader, BlueFire; your code will practically not work on any Android e-reader.

Sorry, but you are wrong. It works with calibre's viewer. It works with ADE 2/3. It works with KePub. It works with Thorium. It works with BookFusion on iPhone/iPad with the latest version of iOS/iPadOS. It works in Bluefire.

The reason it doesn't work in Sigil's or calibre's preview is becuase of a bug in QT that doesn't respect %.

[RbnJrg]

Originally Posted by JSWolf

Sorry, but you are wrong. It works with calibre's viewer. It works with ADE 2/3. It works with KePub. It works with Thorium. It works with BookFusion on iPhone/iPad with the latest version of iOS/iPadOS. It works in Bluefire.

Does it work with Readium, BibiReader, JSReader, Sigil, Calibre Editor, PocketBook, Kobo for Android (an iOS), Lithium, Reasily, Infinity Reader, to name a few e-readers? So nobody with an Android ereader can read your epubs. Are you okay with that? The funny thing is, you can fix it, you have the tools to do it, to make everything work everywhere, and you don't want to do it.

The reason it doesn't work in Sigil's or calibre's preview is because of a bug in QT that doesn't respect %.

It's not a bug, QT respect "%"; you are employing them wrongly. Do you want to "fix" (it's not a fix) the things in Sigil and Calibre? Well, just erase all your code to handle a full page image and instead of all what you had written, employ the following:

1. In your .css stylesheet:

img {
   width: 100%;
}

2. In your .xhtml file:

<div>
    <img alt="" src="../Image/your_image.jpg" />
</div>

It couldn't be simpler than that, and the image will look good in Sigil and, surprisingly (but apparently), also in Readium, Bibi Reader, and JSReader. What happened? A miracle? No, no miracle, because if you open the ePub that has that simple code for handling images with one of the Sigil plugins (do the try with Readium) and expand the eReader window to to make it wider, you'll see that the image doesn't fit on the screen. Why? Because you need to define a height and after that, to define a width according to the height (to maintain the proportion of the image). The easier way to do that is by mean of a svg wrapper (any heigh you wish, a width of 100% and the image will adapt to those dimensions while maintaining the proportion). BUT you need to define the height as I explained in my previous posts. You want to use %? Ok, continue doing what you are doing until now but include, in your style sheet, the following code:

html, body {
    height: 100%;
}

and the QT "bug" (it's not a bug) will disappear.

[DiapDealer]

Your "bug" theory has been completely and competently disproven, Jon. Any further attempts by you to pretend everyone else (including experts in the field) "is wrong" are going to be deleted. Your petty coding vendettas will not be tolerated here. Take it somewhere else.

[ElMiko]

@ RbnJrg -- yeah, so setting html and body to 100% only works for an image (or, really, anything) that is intended to fit ONLY one page, right? If one were to insert the image amidst a whole chapter's worth of text, would it force all the text to fit in a single "screen" too?

[RbnJrg]

Originally Posted by ElMiko

@ RbnJrg -- yeah, so setting html and body to 100% only works for an image (or, really, anything) that is intended to fit ONLY one page, right?

Exactly.

If one were to insert the image amidst a whole chapter's worth of text, would it force all the text to fit in a single "screen" too?

On epub2, to insert an image amidst a whole chapter's worth of text it will create a blank space before the image and whose dimension will depend on the size of the image and where it was inserted. If you are going to insert those kind of images, then don't use html, body {100%} and instead of that use the alternative code I posted before:

a) In your .css stylesheet:

.myHeight {
    height: 100%; /* ADE will work with this and will work because of the ADE's bug */
}

@supports (height: 99vh) { /* and QT ereader will use this; ADE will ignore this statement */
   .myHeight {
       height: 99vh;
    }
}

b) In your .xhtml file:

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

Of course, instead of 100% or 99vh (maybe is better 98vh or 95vh for full page images since this way you avoid the risk of generating an additional blank page) you can use any other height of your wish.

In epub3 the situation is distinct. You can force the image to float vertically, thus avoiding any white space because the space generated by the image's movement is occupied by text. But the code to achieve this is a bit different from the code used in epub2.

[Falkor]

Setting the height to 99vh for the div is the only way I can make it work on the Tolino Shine 5.
Not using a div and simply setting it in the svg seems to work fine in Thorium, Apple Books and Calibre’s ebook viewer.

[RbnJrg]

Originally Posted by Falkor

Setting the height to 99vh for the div is the only way I can make it work on the Tolino Shine 5.
Not using a div and simply setting it in the svg seems to work fine in Thorium, Apple Books and Calibre’s ebook viewer.

Not using a div to enclose the svg wrapper? What is the output of epubcheck in your epub?

[Falkor]

No idea, I can't get the sigil plugin to work.