Variable/fixed image height

[RbnJrg]

Originally Posted by ElMiko

@RbnJrg - From what I can tell the 4em height isn't ever being applied here; the size is always being determined by the screen width (i.e. scaled to fit at 100% of the screen width). What I'm trying to reproduce is the way Kindle OS handles image heights that would result an an image that doesn't fit the screen (either because it's too tall or because it's too wide). Namely, it will honor the defined height unless the resulting image is too large for the screen, at which point it will resize the image to fit the screen (maintaining its original aspect ratio). For images that are wider than they are tall, this means it will make the image fill 100% of the width of the window; for images that are taller than they are wide, it will make the image fill 100% of the height of the window.

What I'm trying to acheive in epub is a similar kind of contingent behavior whereby the original height parameter is honored UNLESS it results in an image that is too large, at which point it is resized (proportionally) as described above.

To be clear, what I'm looking for may not be possible; I just hoped that since the behavior could be defined (at least in one case) at the OS level, it could also be explicitly defined at the input level...

With an svg wrapper the only thing you need to do is to add the height you wish to the style .svg_online.



Your style would be:

.svg_inline {
  display: inline-block;
  width: 100%;
  height: 4em; /* Or whatever height you wish */
  margin: 1em 0;
  text-indent: 0;
}

Now, suppose you want a height of 15em; in that case, your output would be:



Since the svg wrapper maintains the proportion of the image, to honor the height, it will add blank spaces to the picture.

[RbnJrg]

Originally Posted by Jellby

As far as I remember, "inline-block" is not an epub2 property (i.e. it is not required to be supported by epub2 readers).

The property "display: inline-block" is part of the css2.1 protocol and is honored by ADE 2.x. (I don't know any epub2 ereader that doesn't support display: inline-block; even CoolReader support it). All engines based on RMDSK support "display: inline-block". But OTOH, they don't support the property "max-width" and "max-height", that you include in your answer ("max-height: 4em; max-width: 100%"). That "solution" is not honored by ADE 2.x/3.x/4.x for an epub2 ebook (ADE 4.x will honor it only for epub3 ebooks).

[Quoth]

Indeed max-width or max-height are ignored by many epub2.

[Jellby]

But I didn't say my "solution" was epub2-compliant

For the record, here's the CSS properties supported by the epub2 spec: https://idpf.org/epub/20/spec/OPS_2....htm#Section3.3
display:inline-block is indeed not there, max/min-width/height are.

So, one thing is ADE-2.x compliance, a quite different thing is epub2 compliance. Of course one could argue that the former more relevant

[Quoth]

Originally Posted by Jellby

…
For the record, here's the CSS properties supported by the epub2 spec: https://idpf.org/epub/20/spec/OPS_2....htm#Section3.3
display:inline-block is indeed not there, max/min-width/height are.

So, one thing is ADE-2.x compliance, a quite different thing is epub2 compliance. Of course one could argue that the former more relevant

Indeed it's like web pages. Especially years ago when MS IE 4.0 (or similar) was pre-installed.

Do you only care about the W3C spec, or do you test on all the well known / popular browsers (and code for lowest common support), or just code for Chrome / Chromium based browsers and reinforce Google's attempt to control the "Web"?

EDIT:
And also there are things in all specs and maybe widely supported that might be stupid to use, simply because you can.

[Jellby]

Personally, I use whatever works for me on my reader (KOReader, currently), and I try to make it spec-compliant. Then, if it doesn't work elsewhere, I can safely blame the reader (software)

[ElMiko]

Originally Posted by RbnJrg

With an svg wrapper the only thing you need to do is to add the height you wish to the style .svg_online.

Attachment 218388 Attachment 218389

Your style would be:

.svg_inline {
  display: inline-block;
  width: 100%;
  height: 4em; /* Or whatever height you wish */
  margin: 1em 0;
  text-indent: 0;
}

Now, suppose you want a height of 15em; in that case, your output would be:

Attachment 218391

Since the svg wrapper maintains the proportion of the image, to honor the height, it will add blank spaces to the picture.

Okay, that's interesting. Going to have to think about the downside of that versus a stretchy image...

I'm curious, if this were epub3, would there be a perfect solution? Or does this kind of conditional formatting need to be defined at the OS/application level?

[RbnJrg]

Originally Posted by ElMiko

Okay, that's interesting. Going to have to think about the downside of that versus a stretchy image...

If you want a stretchy image, inside the svg wrapper, instead of

preserveAspectRatio="xMidYMid meet"

employ

preserveAspectRatio="xMidYMid slice"

If the image can be distorted, then you don't need a svg wrapper, just the properties "height: 4em; width: 100%".

I'm curious, if this were epub3, would there be a perfect solution?

Under epub3 you can use the <img> tag, with the height and width you wish and with the property "objet-fit". Read the following:

https://www.w3schools.com/css/css3_object-fit.asp

Or does this kind of conditional formatting need to be defined at the OS/application level?

No, it doesn't.

[ElMiko]

Originally Posted by RbnJrg

If you want a stretchy image, inside the svg wrapper....

Sorry, I wasn't clear: I didn't want a stretchy image... but I also don't want white space on top and bottom, so I was saying I'd have to think about which one I want LEAST since a perfect solution in epub2 sounds impossible.

I looked at object-fit and it looks like scale-down is the value I'd need to use... except, from the description it looks like if it is forced to scale down, it created white space on top and bottom. Is that correct, or is that just a function of the example W3 chose?