KF8 relative image dimensions problem

[SBT]

In my stylesheet file, if I write something like this:

img {
width:76%;
height:auto;
}

the image is scaled accordingly on both e-ink and fire devices, but if I increase the width to 77% (or more), the width is set to 100% on eink-devices.
This happens both on the previewer and on actual devices.
Have I missed something? And is there a better workaround than using @media device-width/height and setting an absolute width?

[RbnJrg]

Originally Posted by SBT

In my stylesheet file, if I write something like this:

img {
width:76%;
height:auto;
}

the image is scaled accordingly on both e-ink and fire devices, but if I increase the width to 77% (or more), the width is set to 100% on eink-devices.
This happens both on the previewer and on actual devices.
Have I missed something? And is there a better workaround than using @media device-width/height and setting an absolute width?

What if you enclose the image in a <div> tag with the width you want? Something like:

div.image1 {
    width: 80%;
}

img {
    width: 100%;
    height: auto;
}

and in the .xhtml file:

<div class="image1">
     <img alt="" src="../Images/MyImage.png" />
</div>

Maybe that code could solve your present issues.

Regards
Rubén

[SBT]

Thanks for the suggestion, Rubén, I hadn't thought about testing that one. Sadly, that doesn't work either. The book in question is Wisting, Oscar: 16 år med Roald Amundsen, by the way.
The 76% width limit does make it natural to think of the e-ink aspect ratio, but what kind of warped logic that dictates that 77%-100% == 100% I cannot begin to fathom.

KF8 has been a bitter disappointment to me; I thought it would be an improvement to Epub2, but there are so many spurious limitations, inconsistencies and apparent bugs that it falls greatly behind. Maybe there should be a stickie in this forum with "KF8 annoyances", similar to the "ADE bugs" stickie in the epub forum?

[RbnJrg]

Originally Posted by SBT

Thanks for the suggestion, Rubén, I hadn't thought about testing that one. Sadly, that doesn't work either. The book in question is Wisting, Oscar: 16 år med Roald Amundsen, by the way.
The 76% width limit does make it natural to think of the e-ink aspect ratio, but what kind of warped logic that dictates that 77%-100% == 100% I cannot begin to fathom.

I have downloaded that book and I was studying your code. You are using the following:

  <div class="ic">
    <img alt="-*-" src="../Images/image00089.jpeg" />

    <div class="caption"></div>
  </div>

We can found the definitions of the class "ic" in your style003.css and style004.css stylesheets. There we can found:

* For portrait images:

div.ic {
    page-break-inside: avoid;
    text-align: center;
    margin: 1em 0;
}

div.ic img {
    width: 80%;
    margin-left: 10%;
}

Now do the following experiment: add a border of 1px to class "ic" and the img tag, of that way:

div.ic {
    page-break-inside: avoid;
    text-align: center;
    margin: 1em 0;
    border: 1px solid red;
}

div.ic img {
    width: 80%;
    margin-left: 10%;
    border: 1px solid blue;
}

Now you can see that images ARE NOT CENTERED! The "margin-left: 10%" style of div.ic img is not working as is expected (your images have a width of 80% and you defined a left margin of 10% and -by default- a right margin of 10%; so you want the images centered). But as we are working for kf8, I think is better to use "margin: 0 auto" instead of "margin-left: 10%". Of that way, your style could be:

div.ic img {
    width: 80%;
    margin: 0 auto;
}

By the way, AFAIK, KF8 doesn't accept a @media querie like:

@media (device-height:1024px),(device-height:800px),(device-height:1440px)

I think if we change "margin-left: 10%" by "margin: 0 auto;" the "width issue" could be solved (Right now in the computer where I'm writting these lines I don't have installed Kindle Previewer so I can't tell you if the code could work).

Regards

EDIT: Also -in this case- you can supress left/right margin for images. Just use:

div.ic img {
    width: 80%;
    margin: 0;
}

[SBT]

Thanks for taking the trouble of looking at the code. I should have made clear that the CSS as it stands does the job, the images are both centered and are limited in height so as to give room for a caption underneath on eink-kindles, while they are full-width on fire-kindles. So the @media tag works as it stands, at least.

Anyway, I've discovered that for for CSS purposes, screen dimensions are 600px*800px for both standard kindles and paperwhite, never mind that the physical resolution of paperwhite is more.
Does anybody now if this holds true also for the Voyager? If so, the relative width issue resolves itself, because I can always assume a 600x800 screen for eink-kindles.

BTW, is this documented somewhere, preferably by Amazon? Or do I risk that their next e-ink device has a different CSS-wise resolution?

[DaleDe]

Originally Posted by SBT

Anyway, I've discovered that for for CSS purposes, screen dimensions are 600px*800px for both standard kindles and paperwhite, never mind that the physical resolution of paperwhite is more.
Does anybody now if this holds true also for the Voyager? If so, the relative width issue resolves itself, because I can always assume a 600x800 screen for eink-kindles.

BTW, is this documented somewhere, preferably by Amazon? Or do I risk that their next e-ink device has a different CSS-wise resolution?

Interesting observation. This would seem to be an instance of the CSS pixel as mentioned in our wiki CSS#The_CSS_pixel.

See also http://www.w3.org/TR/css3-values/#reference-pixel

Dale

[SBT]

Thanks, DaleDe. The reference pixel was a new one for me. After a little cogitation, I see that it makes some sense – border lines etc. that are commonly given width in pixels will show uniformly across devices. And now I can have some confidence that all 6" e-ink kindles will have 600x800 reference pixels.
I'll check if the Fire also deals with reference pixels ASAP.
I still don't get why the eink kindles cannot deal with percentage dimensions in a sane manner, though.

Somewhat related, in this book (very soon to be updated with corrections), I struggled with full-height, floating images, admittedly with ragged edges. Depending on font size, the first line on the next page was completely or partly cut off vertically. The workaround I've used is to reduce the vertical height to 96% (or thereabouts), and add a blank image, full-width and height 40px or thereabouts to ensure that if anything is cut off, it'll be the blank strip.