Hello,
I was trying to find information about practises for scaling of (inline) images. We want to convert a book that contains lots of mathematical formulas to an EPUB.
In order to achieve transparency (in case of changing background colors) and scalability, I created one of the formulas as SVG and as a PNG, text in both images converted to paths/vectors.
Until now I was only testing on ADE and a Sony Reader 505, now we added an iPad.
My first experience was that on ADE the svg image was way too small. Of course I could modify the svg itself, but in the end I wanted a scalable image (cause when the user changes the font size I want the size of the formulas to change accordingly).
So I copied the img tag and applied different scaling techniques:
1. setting the width attribute of the img tag
2. setting the style attribute of the img tag to "width: 2.2em;"
Both worked in ADE and on the Sony reader. But not in iBooks. In iBooks the images appear in the same way they appeared in ADE when I tested the first version of the EPUB without any scaling applied to the images.
So I tried this as a third alternative:
Code:
<span style="display: block; float: left; width: 2.4em;"><img src="images/F1_1.svg" alt="Images" style="width: 100%;"/></span>
But it doesn't change much. The spans seem to scale, but the images in the spans do not adjust their size accordingly.
Are there any techniques to perform em scaling on images that would work on the iPad?
Any help would be greatly appreciated.
Best regards,
Christian