The Design and Construction of eBooks by Unknown

Author:Unknown
Format: epub
Publisher: The University of Adelaide Library
Published: 2015-01-17T16:00:00+00:00

https://ebooks.adelaide.edu.au/about/part2.8.html

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

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> </math>

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² + 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² − 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 spans, 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);

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.