|
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
|