View Full Version : Adding a scaleable inline image within a paragraph

02-02-2012, 06:41 PM
I'm looking to create an epub of some science papers, and I'm finding problems creating one thing.. formulas within the text. On occasion, there are small formulas, usually fractions (in this case, σ/√n) that are located in a paragraph, and I'd like them to be sized to look appropriate with the font-size that is around it. In the above case, I probably just use text, but it gets more complicated when you have formulas divided by other formulas so I've gone with creating them as images.

I was hoping that I could size the images using 'ems' so that they scale as the user increases the font size. But this doesn't work (unless i'm not doing it right, in which!)

Is there a way to do this with SVG or is that only for fullscreen? I'm really at a loss.


02-03-2012, 01:59 AM
Should work just fine without using an svg wrapper. Just add "width:#em;" the the image's css class (where "#" is the actual numerical width you want it, you'll probably have to fiddle with the exact width to get it to look right).

I've uploaded a sample ePUB showing how to do it.

02-03-2012, 02:54 AM
Actually, I would use SVG for this. The main benefit in that would be the scaling. When you use images, the quality can really suffer from scaling. With SVG this will not happen. I use codecogs ( for this.

02-03-2012, 04:43 AM
But the question is do all readers support SVG?

02-03-2012, 11:20 AM
They should, it is in the specs. So far I haven't seen a reader than didn't support the formula's as I used them.