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?

[RbnJrg]

Originally Posted by ElMiko

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.

You didn't try "preserveAspectRatio="xMidYMid slice"", otherwise you had realized that no white space is generated. If you see someone, is due to margins or paddings.

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?

Okay, there's something you need to be clear about:

1) If you define the height of an image and want the image to maintain its aspect ratio, then its width must be set to auto. In this case:
a) If the viewport width is insufficient to contain the image width, you'll see a truncated image.
b) If the viewport width is greater than the image width, then you'll see white space on the left and right sides.
c) The only way to avoid blank margins or overflows is for the viewport width to be equal to the image width.

2) If you don't define the height or width of an image, but rather define the width and height of the image container, if you want the image to maintain its aspect ratio, then:
a) an image inside an SVG wrapper will maintain its aspect ratio but will likely generate white space if you use:

preserveAspectRatio="xMidYMid slice"

b) an image inside an SVG container will maintain its aspect ratio and will not generate white space if you use:

preserveAspectRatio="xMidYMid slice"

Read the following to better understand the concept:

https://codepen.io/tigt/post/why-and...rveaspectratio

c) within epub3, the object-fit:contain property will necessarily create white space to maintain the image's aspect ratio unless the width and height of the containing block are equal to the width and height of the image.
d) the object-fit: cover property will occupy the entire container space, there will be no blank spaces, but the image will be distorted.

In your initial post you wrote:

In the Kindle OS, images with a fixed height (and no specified width) that would exceed the screen width are resized proportionally to fit the screen width. In other words the fixed height is functionally overwritten to fit the image proportionally to the screen if honoring it (proportionally) would result in the image's exceeding the screen width. Otherwise, the fixed height value is honored as long as the implied image width is less than the width of the screen.

Well, there's no way to do this without generating white space when the image's height is greater than its width. If the image's width is greater than its height, then the solution for epub2 based on an SVG container is the correct one, and it doesn't generate white space, unless it's due to margins or padding. And under epub3, the solution is even simpler: give the image "max-height: 4em" and "width: auto."

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>

  <p class="autoImg"><img alt="Hello" src="../Images/Hello.jpg"/></p>

  <p>Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>

And the .css is:

.autoImg {
  text-indent: 0;
  max-height: 4em !important; /* Try changing here the max-height to 25em to see what happens*/
  width: auto !important;
  margin: 0;
}

.autoImg img {
  display: block;
  width: 100%;
  margin: 0;
}

See the attached epub with the solution for epub2 and epub3. Open the epub with any ereader and increase/decrease the width of the ereader to see how the image is displayed.

[ElMiko]

@RbnJrg Thank you for outlining it in bullet form. Let me try to articulate my goal in a similar format.

I want to set an image height to X and its width to auto so that:

A) if the screen width and height do not interfere with the defined dimension, the image is displayed at the height defined with a professional width. That is, the image in a massive window, the image will not exceed the height (and proportional "auto" width) explicitly defined in the CSS. In other words, such a scenario WOULD have white space on the left and right of the image.

B) if the defined height would result in the image being too large (width-wise or height-wise) for the window/viewport, then the image is resized proportionally.

I'll give the examples you've mentioned a shot, and revert back on how things look.

[RbnJrg]

Originally Posted by ElMiko

B) if the defined height would result in the image being too large (width-wise or height-wise) for the window/viewport, then the image is resized proportionally.

If the height is greater than the width, and the the height must be a constant (and width: auto), then is almost impossible to avoid blank spaces at left and right (only when the proportion of the viewport is equal to the proportion of the image). So for example is the proportion of the ereader screen is 4:3 and the proportion of the image is also 4:3, then in that case is possible to avoid blank spaces. But as not all ereaders have the same proportion, is impossible to avoid blank spaces -at left and right- everywhere (when the height is greater than the width).

[ElMiko]

Okay, let me try again, because I'm obviously not describing things clearly.

Imagine an image that is 6 times wider than it is tall. So, height of 1, width of 6.

I set the height at 2em and the width at auto. That should mean that the implied width is 12em.

what i want is the following:

a) if the window is narrower than would accommodate a 2em height and proportional width (e.g. the WINDOW width is equivalent to 11em), the image is shrunk to fit the screen width-wise, maintaining a proportional height (i.e. resulting in an image that functionally has a height of 1.8333em and a width of 11em).

b) if the window is wider than the proportional width of the image at a height of 2em (e.g. 14em wide), it will honor the 2em height with proportionaly width (resulting in 1em of white space to the left and right of the image).

c) if the window matches the proportional width of the image at the defined 2em height, it would would look like scenario a, except the image would be exactly 2em (as defined) rather than shrinking to fit the window.

In NONE of the above cases would there be additional white space above and below the image.

In your earlier post using svg, you wrote that if the height were changed to 15em, it would result in white space above and below the image if the window weren't wide enough to accommodate it proportionally. Obviously, that's not really ideal. Potentially generating random white spaces doesn't make sense from a reader's perspective. Also, I don't want the image disproportionately distorted. That ALSO doesn't make sense from a reader's perspective.

[RbnJrg]

Originally Posted by ElMiko

Okay, let me try again, because I'm obviously not describing things clearly.

Imagine an image that is 6 times wider than it is tall. So, height of 1, width of 6.

I set the height at 2em and the width at auto. That should mean that the implied width is 12em.

In that case, with a image wider than highter, the solutions you can read in the last epub I uploaded will work for you; images won't have any blank spaces and they will maintain their proportions. But under epub3, don't set the height by the "height" property, instead use "max-height: 2em; width: auto" and all of your conditions will be satisfied.

[ElMiko]

Originally Posted by RbnJrg

In that case, with a image wider than highter, the solutions you can read in the last epub I uploaded will work for you; images won't have any blank spaces and they will maintain their proportions. But under epub3, don't set the height by the "height" property, instead use "max-height: 2em; width: auto" and all of your conditions will be satisfied.

Sorry @RbnJrg, I've been away from my computer for a week, so haven't really had a chance to play around with this until now.

For the epub2, it doesn't honor a specific height (as the value there is set to "auto") making it ALWAYS 100% of the width of the window. (unless of course I change that value to Xem, in which case it runs the risk of the white space above and below if the screen is too narrow for the image)

For the epub3 solution, it's a little funkier still... Changing the max-height value doesn't seem to have any effect at all—4em (as it is set in the original file) and 2em (as you said above) render the image exactly the same: always 100% of the width of the window, at a proportional height. Even more bizarrely, setting it to 1em results in the image's overlapping the paragraph below it.