kindle bug with scaled images

[poetrycoder]

Hi,

Has anyone else experienced this? I find that when I scale an image using ems, it works great on Kindle Fire (and on Kindle Previewer 3), except for one thing: If the user increases the font size so that the width of the image takes up the entire screen, it "locks" at that size, and subsequently the image no longer scales down with the font size; it simply takes up the entire width of the screen.

Before-and-after screenshots attached. This example is an in-line image used in kind of a weird way, but the same thing happens with all the images I've used in the book (a lot). Here's the CSS


img.under{
display:inline-block;
width:10em;
top:.7em;
right:10em;
}
span.under img.under{
vertical-align: baseline;
position: relative;
top: .7em;
}

<span class="under"><img class="under" src="images/underline.jpg" alt=""/>

Thanks!

—Chris

[theducks]

Hmm

Is there a reason to NOT use text-decoration: underline?

Or another span cheat: border bottom: black solid 2pt; padding- bottom adjusts the spacing

[poetrycoder]

Thanks for the tip!

The short answer I'd like to keep the EPUB experience as close to the printed text as possible. I know that's a Quixotic effort but I got pretty close here.

[Turtle91]

I'm not sure how widely supported background images are, but you could give a span the background image??

span.under {
    background-image: url("../Images/under.gif");
    background-repeat: no-repeat;
    background-position:center bottom
    }

<p>...in a rapturous frenzy, <span class="under">that she read to write.</span>
 So there is an irony there....</p>

You will want to make sure it's a .png or .gif with transparency, and you'll have to make sure the image is tall enough so that it vertically aligns properly.

You could also add css that would provide for those systems that don't render background images (eg text-decoration: underline), but someone else with more experience in that area would have to help with that.

Hope that helps!

[SBT]

Just confirming that I've experienced the same bug. However, flipping a few pages forwards/backwards, and back again, seems to reset the size to the correct one.

As to the actual task in question, personally I'd go for a SVG solution – maybe even code the SVG straight into the document. And resign myself to using plain underline for the mobi fallback.

[SBT]

A MWE, only tested in a browser, would be interesting to know if it works in KF8:

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<svg xmlns="http://www.w3.org/2000/svg"
height="1em" width="4em"
style="inline;position:relative;left:-4.2em;top:1.1em;margin-right:-4.2em;" viewBox="77 480 330 100">
    <path
       d="m 77,498 c 130,-52 270,59 408,-30"
       style="stroke:#000000;fill:none;stroke-width:0.5em;" />
    </svg>  
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

[Doitsu]

Originally Posted by SBT

A MWE, only tested in a browser, would be interesting to know if it works in KF8:

Unfortunately, it didn't work with the Kindle app and my PW2.

[SBT]

Originally Posted by Doitsu

Unfortunately, it didn't work with the Kindle app and my PW2.

@Doitsu: Thanks for checking it out.
Investigating it further, I did get the wavy line to show in the Previewer by wrapping the <svg> in a <span> and replacing em units with px inside the svg tag, but then ran up against a brick wall trying to get the inline SVG to scale with font size So it seems one has to store the line in an img file, but at least it should be OK to use SVG there.