Issues with specificity (epub > azw3)

[jugaor]

Hello.

For a while now I've been using the "Single file solution for full-screen images with captions" method from here:
https://github.com/jstallent/ImagesSingleFile
which basically is to use two types of measures for images (percentage and viewport).

.image1 img {
   height: 85%;
}
.image1 img:only-of-type {
   height: 85vh;
}

Devices/apps with only CSS2 support will use the first and those with CSS3 will use the second, so they will always display the image with the correct height.

However, placed like this, the Calibre conversion to azw3 takes the last measure (viewport), which Kindle doesn't recognize.
If we invert them, everything is fine (it takes the last one, percentage this time):

.image1 img:only-of-type {
   height: 85vh;
}
.image1 img {
   height: 85%;
}

That is: Calibre seems to not respect the higher specificity of the pseudo-class, only the order of classes within the css (or I'm doing something wrong…?).

So far, the latter way has worked fine for me, both in epubs and converted azw3s (and thus avoids adding an extra @media amzn-kf8).
I would like to know if this behavior is as expected or if it could change in the future…

An idea: if both measurements are found and the conversion is for Kindle, could Calibre automatically discard viewport and use percentage?

Thanks in advance (and sorry for my terrible English).



[Calibre 6.29.0, Windows 11-64bits, default conversion options (I think).
I'm attaching the test epub, the converted azw3 and the log.]

[kovidgoyal]

Just use svg it has worked well on all devices for over a decade. No need to try and get overly clever with css. calibre conversion uses the specificity that comes from the css_parser (fork of cssutils) python library, so you would need to check there.

See https://manual.calibre-ebook.com/con...ormatting-demo for an demo epub file which shows you how to do full screen images with text

[kovidgoyal]

And that's the fix for css-parser: https://github.com/ebook-utils/css-p...ded44ad99d2ddf

[Quoth]

Never use vh.