The Design and Construction of eBooks, by Steve Thomas

Maths

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="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>a</mi>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mi>b</mi>
<mo>&InvisibleTimes; </mo>
<mi>x</mi>
<mo>+</mo>
<mi>c</mi>
</mrow>
[/itex]
```

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, {
display:inline-block;
text-align:center;
text-indent:0;
vertical-align:middle;
}
```

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>
</span>
</span>
```

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

The salient points to note are:

• we use nested `span`s, defining parts of the equation separately as required;
• `display:inline-block` ensures that the equation stays inline no matter how many levels of division we have;
• `vertical-align:middle` makes the equation sit vertically centered in the line;
• the under- and over- lines are produced with a couple of style "atoms", bb and bt (for border-bottom and border-top);

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