View Full Version : Maths and EPUB - best option?

02-25-2013, 06:18 PM
(A question that has been covered before, I know, but not recently I believe...)
I'm working on "Men of Mathematics" by E.T. Bell, and wondering what is the best option for reproducing the maths exposited within. I know concensus is that SVG is the best course, but I'm currently of the mind that I would like to to it with CSS:

Mathematical symbols are constantly referred to within the text; it seems kludgy to use SVG for every x, y, and theta.
Most of the formulae are (typographically) simple. The most complicated are integrals of a fraction. I can do that in HTML/CSS
The required symbols are available in Unicode.

The problems that I see as possible are patchy UTF support, and inconsistent parsing of CSS margin values in readers, leading to ugly relative placements of symbols.

Anybody with views/experience of the issues?

02-25-2013, 07:52 PM
From what I understand, displaying Math symbology appropriately in a flowable ePub is VERY difficult...that was one of the issues that ePub3 solved. It can easily display the MathML. The problem is finding reader support for ePub3.

There seems to be some method of using mathjax...but I haven't delved into that area too much yet. You might be able to find some info here:


02-25-2013, 08:15 PM
Well, progress on integrating MathML in just about anything sounds pretty depressing these days, with support for it removed from Chrome...

My biggest fear is that it'll prove too difficult to get consistent placement of stuff like indexes with HTML/CSS, even if I use tailor-made classes rather than <sup>/<sub>. Oh well, I suppose I'll have to resort to tables ... that'll make for nice, readable code :p
Anyway, at this stage I am hedging my bets and coding all the maths as LaTex, and then I'll convert it to the most suitable format at the end.

There are 3 kinds of people: Those who can count, and those who cannot.

02-26-2013, 02:10 AM
I'm in the same boat with an economics textbook, where there are even in-line fractions.

I wonder how InDesign handles them... It probably saves them as PNG or something like that, to ensure maximum compatibility (some e-readers don't support SVG, and neither does Mobi).

02-26-2013, 03:49 AM
Right... (deep breath)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content= "text/html; charset=utf8" />
<style type="text/css">
span.rootkernel { border-style:solid none none none; border-width:1px; }
sup,sub { font-size:0.6em; }
sub.align {margin:auto 0.5em auto -0.5em;}
td.enumerator {border-style:none none solid none;border-width:1px;text-align:center;}
tr.denominator {height:1.8em;}
td.denominator {text-align:center;vertical-align:top;}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
<table style="vertical-align:text-top;font-size:0.5em;display:inline-table">
<!-- integral symbol -->
<td rowspan="2">
<span style="margin-right:-0.1em;font-size:2.5em;">&int;</span>
<!-- integral limits -->
<!-- fraction -->
<td class="enumerator">
sin<sup>-1</sup> &theta;
<!-- integral symbol -->
<td rowspan="2" style="padding-bottom:0.4em;font-size:1.3em;">
<!-- fraction -->
<tr class="denominator">
<td><sub class="align">0</sub></td>
<td class="denominator">
<!-- square root -->
&radic;<span class="rootkernel">a<sup>2</sup> + b<sup>2</sup><sub class="align">n</sub><i>x</i></span>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
Not exactly readable, but not as ugly as I feared it could get. Of course in real life you wouldn't put a formula like this inline, but this is a proof of concept. I was pleasantly surprised that reducing font size of <sup>/<sub> seems to make them more well-behaved. This is what it look like in Chrome:

02-26-2013, 05:21 AM
You should probably use the right character for the minus sign, instead of the hyphen.

02-26-2013, 05:49 AM
So far I used Codecogs ( to create the formula and create an SVG from it. I can then display it as an image and remain scalable.

02-27-2013, 07:52 PM
So far I used Codecogs ( to create the formula and create an SVG from it. I can then display it as an image and remain scalable.

That is a great way to do math.

03-06-2013, 12:06 PM
Afaik no e-ink reader has MathML support yet, but most support SVG and embedded fonts.

The most future-proof way to write math formulas is still to use MathML (some HTML editors like Amaya and BlueGriffon feature tools for MathML) and make a SVG-only version of the book by using a XSLT processor and pmml2svg ( to automatically convert all MathML markup of a HTML file to embedded SVG markup. You'll also need the STIXBeta fonts, so either it'll have to be embedded in the epub or installed on the reader (it's possible with PRS+ on Sony readers)