Scaled images in iBooks

[ckirchho]

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:

<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

[kjk]

Christian,
Try here: http://www.pigsgourdsandwikis.com/20...ibooks-on.html

[ckirchho]

Thank you, that is definitely a valuable source. I am afraid my problem is more specific, and I still would be interested in other developers' experiences.

The problem:
- I'd like to get it to work with SVG graphics
- I'd like to get it to work with inline graphics

This is because I want to insert mathematical formulas that appear in the text (and not in separate paragraphs). They should scale with the text, of course.

Why not use PNGs? Well, for comparison I am using PNGs right now. And if the eventual outcome will be that what I want is not achievable with SVGs then I will use PNGs instead. It's more that the customer was putting a strong emphasize on the usage of SVGs and we wanted to satisfy him.

Anyway I work on a dummy EPUB right now with many examples. I only inertsed the SVG with an img tag before. Now I additionally insert the svg :
- using an object tag
- by inserting the svg code itself

The images (img, object and svg) are embedded in a p tag. For testing the different impacts of styling this or that,fixed or em based, some of the p tag's width is set in a style attribute (either to fixed pixel width or to em width). The width of the img/object/svg is set to 100% in another style attribute.

Though every approach works more or less on ADE, on the iPad viewed in iBooks they all go wrong:

1. The svg inserted with an img tag
doesn't scale at all, it is always rendered in its default size.

2. The svg inserted as the actual svg code
The scaling itself works well here, but the image appears alone on a page. When I set a red border for the surrounding p I can see that the p's width is 1em (as I set it), but the height is almost exactly the height of the page. I thought that usually the sizes are computed by a reciprocal process:
- width of the p is defined in px or em, so it is computed to an actual value
- width of svg id 100%, so it is the same as the p's width
- height of svg is computed proprtionally
- height of p is height of svg

But apparently that is not the case on the iPad.

If I instead define the height of the p and set the height of the svg to 100%, then again the svg is scaled properly, and this time the height of the p is as I defined it, but now it's width is 100% of the page width. Which is logical, cause as a block level element the default width of the p is 100% of the surrounding block's width (simplified, but anyway). The svg again appears centered within the p.

3. The svg inserted with an object tag
Again, it only works partially. Meaning: Yes, the svg scales, but it is cropped. If I set "overflow: visible;" for the p tag, it is still dropped. Which lets me think that the bounding box or crop box of the svg is correctly scaled to the width of the p, but it's contents are scaled bigger (around 3 or 4 times too big) and then cropped. If I change the font size in iBooks, the svg in the p is scaled properly as far as I can see it).

By the way:
I left the svg file untouched, I didn't change it's height, width ot viewport attribute. I saved the svg with illustrator.

For the svg code that I inserted directly into the html code I deleted the width and height attributes and instead inserted: style="height: 100%;"

I will try to prep up the dummy EPUB and upload it here tomorrow.

Still I would be very interested in the opinions and experiences of others.

Best regards,

Christian

[ckirchho]

I guess the problem was that the image's original size was too small because iBooks doesn't scale images up (according to http://infogridpacific.typepad.com/u...est-cases.html)

I now made the svg bigger, and it scales properly.

Anyway I created an EPUB with several image scaling tests, in case anyone likes to take a look at it.

[kjk]

Originally Posted by ckirchho

I guess the problem was that the image's original size was too small because iBooks doesn't scale images up (according to http://infogridpacific.typepad.com/u...est-cases.html)

I now made the svg bigger, and it scales properly.

Anyway I created an EPUB with several image scaling tests, in case anyone likes to take a look at it.

Great news! So ckirchho, are they actual SVG files or did they get converted? I know some people have posted that SVGs don't even show up in iBooks at all.

[ckirchho]

Yes, they are SVGs. I made the experience that they don't show up as well a couple of times, though I didn't reproduce any of those scenarios in the EPUB file I provided.