The previous blog “Wrestling with SVG in ePub for Kindle KF8” detailed our attempt to make SVG images work well within the Kindle range from Amazon. The main reason for doing so was a project from a client that used a lot of math formulas and data in the main text and tables. One of the best ways to best ways to create and embed these in HTML was with the use of MathML.

MathML is a markup language for making mathematical notations with structure and content. It can be a bit of a pain having to put the element into every use of it in your markup but it worked beautifully in ePub 3 on an iPad, as a block –

Tables-002

in tables –

Tables-001

and inline –

Tables-003

The problem is, Kindle/Amazon’s .mobi format does not support MathML so another way had to be found for them. This meant images. We could have used PNGs or GIFs but this would not have given us the clarity we required, especially with the inline equations. This is where SVG stepped in and gave Sarah no end of grief (see previous post).

Unfortunately, MathML also does not work inside Adobe Illustrator. We could have used math generators like MathMagic or MathType but they are usually for printed documents and can be on the pricey side, plus the images they generate are GIFs. So Sarah had to create the images we needed, from scratch, by using the document text and a character map with the STIX font. With a font size of 10pt/13px, Sarah created a series of Illustrator files of the formulas. These were then converted to SVG and smoothed out in Inkscape to remove some of the cruft and correct the X,Y viewport co-ordinates bug.

Why SVG? Well, in simple terms it’s a widely supported scalable vector format. Enabling the SVGs was somewhat vexatious, but we’ve been over that ground already. We also found that the some ereaders do not support SVG well; these include Kobo and Amazon’s e-ink readers. SVGs will especially not work on 1st and 2nd-gen readers and here we could go into a long rant about people needing to upgrade their machines every so often. The parallels with creating new websites and having to hack them to work with IE6 still give developers nightmares, but it’s old ground and not something Sarah wishes to remember. Having said that we needed to make sure sure that people with older ereaders (you know who you are) could still read the book, so…

SVGs are nice and small in size. In this case they came in at less than 10kb, sometimes as low as 2 or 3 owing to the lack of colour in the equations. Also, we were able to embed them without resorting to object tags, just using simple image tags and some span classes was enough.

For the compatibility problem we employed a CSS switch. It may seem a little odd to include all the files twice, but to ensure that a low res device such as 1st generation or Kindle DX would be able to have the mathematical notations we had to include bitmap images. We decided on GIFs because the images would be of very low colour and so small in size. To switch out the SVG/GIF  we employed the “Display” property in the CSS dependent on which device was being used:

@media amzn-mobi {
        .kf8only {
                display: none;
        }
        .mobionly {
                display: inline;
        }
}

@media not amzn-mobi {
        .kf8only {
                display: inline;
        }
        .mobionly {
                display: none;
        }
}

This seemed to work well. Kindle Voyage and other high resolution Kindle devices (such as the Fire HD) showed the crisp SVG images, while the Kindle DX showed the GIF images. Of course, we’re taking the Kindlegen Previewer’s word for this, as although files can be loaded on to the Kindle it’s a little bit of a chore. So we usually only test through their emulation software.

One of the reasons for this blog is that a lot of the manuals and online sites for ePub have good tips for making SVGs and other images work well in ePub. What they do not have are tips/tutorials on how to make sure that said images are formatted well in the first place. Sarah’s trials and tribulations with SVG made her start to pull her hair out, so we hope that both Parts One and Two of making SVGs work in ePub help.

Pin It on Pinterest

Cookies will not run on this website until you 'Accept' them. - more information about our cookies

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close