How to make images scale with text size on an Amazon Kindle?

Question

I am trying to create an book for use on my Kindle. The text has mathematical inline formulas rendered as images and for the formulas to fit in well, the images need to scale with the text size. I got this to work for epub files, using tags like <img src="int.png" style="width: 20.35ex; height: 3.76ex; vertical-align: middle"/>, but when I convert the epub file to mobi format, the image scaling breaks and the formulas come out the wrong size, looking for example like this oversized integral.

Is there a way to make my images scale proportional to the font size on a Kindle, either in a mobi file, or in any other format the kindle will display?

Updates:

1. I am using Calibre to convert epub to mobi.
2. The approach described above works with Amazon's kindlegen utility. Because of kindlegen's somewhat restrictive term's of use, I am still looking for a solution which works with Calibre.

Answer 1

First, I don't know the specifics of using Calibre for images, but here is the css code I use to make images work in epubs which will be converted by kindlegen to Kindle.

https://ebooks.stackexchange.com/a/6515/417

Generally I upload d a high resolution image and then specify the width for certain sizes. Kindlegen will downconvert the images as needed.

From my example, I said that width was 95%, but you can make it 30%, 50%, whatever.

I don't know why you're using ex as units -- especially because you dealing with images of text rather than actual fonts as text. I'm guessing you're looking at autogenerated code from MS Word or Indesign?

For more background about formatting images for kindles, see their publishing guidelines. http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf

Eventually I imagine you could use MathML instead of a graphic, but that's not supported yet in Kindle.

Answer 2

I am using Calibre to convert epub to mobi.

This will generate the old mobi7 format. Select AZW3 instead.

IMHO, the best cross-platform solution would be to convert MathML formulas with SVGMath to SVG images.

They're supported by Adobe Digital Editions and all current Kindle models and apps.

Since SVG is a vector format, SVG images will usually scale proportionally with the text.

If you don't limit yourself to Kindles, you also might want to consider creating ePub3 books with MathML formulas. For an example, see this formula heavy textbook created by Infogrid Pacific.

OTOH, if you want to publish your book through Amazon KDP, you'll have to embed fallback bitmap images and add media queries for older Kindle models.