The Design and Construction of eBooks, by Steve Thomas


There is a standard markup language for the presentation of Mathematical equations, MathML, but currently it seems to be well supported only by Firefox. It’s also rather unwieldy. For example, here’s the simple quadratic equation ax² + bx + c expressed in MathML:

<math xmlns="">
      <mo>&InvisibleTimes; </mo>

Now, I could learn to live with that, but since it’s not yet widely supported, I decided to make my own CSS to present Math equations:

.math, {

and the HTML is simply:

<span class="math">ax<sup>2</sup> + bx + c = 0</span>

which produces: ax2 + bx + c = 0

Now, obviously, that’s a rather trivial example, so let’s look at the well-known solution to the quadratic:

<span class="math">x =
    <span class="math">
        <span class="math bb">−b ± √<
            span class="math bt">b<sup>2</sup> − 4ac</span>
        </span><br />
        <span class="math">2a</span>

which produces this very attractive result: x = −b ± √b2 − 4ac

The salient points to note are:

For a real example of the use of this style, see The System of the World, by Isaac Newton.

Last updated Tuesday, January 26, 2016 at 23:27