MathML – The basics of writing mathematics in a web page

Another feature of HTML5 is MathML, which is a powerful tool to add equations and mathematics within your page. In these series of posts, we want to describe them in details with practical examples. The first step is to know the basics of setting up this feature . . .

The problem arisen is the browsers compatibility; for example Internet Explorer does not show the MathML equations. To solve this, I have found a JavaScript engine called MathJax which automatically configures the equations for the browsers with no further installation on the PC. You can more about the engine on its website. Note that although the codes are working without this engine, the problems are in the shape of viewing and the browsers supporting.

First load the engine:

<script type=”text/javascript”

src=”http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML”> </script>

In fact, it’s better to put it in the pages head part, like other scripts. Now we can start mathematics with no worriment!

Add the following code:

<body style=”font-size: 18pt;”>

<math xmlns=’http://www.w3.org/1998/Math/MathML’ display=’block’>

</math>

</body>

First we have set the font size of the whole ‘body’ tag. All mathematics expressions must come within ‘<math>…</math>’. This tag has some attributes and two of them are used here. ‘xmlns‘ is the first one which I can not find why it is necessary; maybe because of some validations. And ‘display‘, which can be in two forms, ‘block‘ and ‘inline‘. The difference is obvious; when you use it as a block, the expression occupies a new line for itself, but in the inline case, you can join it with other texts and elements at the same line. So it’s better to use it inline when an alignment is important.

Different mathematics elements are inserted with different tags; three basic ones are given in the following table:

<mi>…</mi>	Identifiers, such as variables
<mn>…</mn>	Numbers, like 1, 2 and …
<mo>…</mo>	Operators, like +, – and …

Let’s write a simple example:

<mn>3</mn>

<mi>x</mi>

<mo>+</mo>

<mi>y</mi>

Put the codes within the ‘<math>’ tags and try to view the page in different browsers. You must see:

You can also write the tags in a one line, but it’s better to keep the format, especially in more complex expressions.

Another important point here is the operators; each operator has its especial HTML code:

Code	Alternate	Entity	Description
−	-	−	Minus
+	+	+	Plus
<	>	>	Greater than
>	<	<	Less than
≤	NO	≤	Less than or Equal
≥	NO	≥	Greater than or Equal
×	NO	×	Multiply
÷	NO	÷	Divide
≠	NO	≠	Not Equal
≈	NO	≈	Approximately Equal
±	NO	±	Plus or Minus

So now you are able to make simple mathematic expressions. Practice and get ready for the next post and more complex cases . . .

Learn and Practice HTML5

MathML – The basics of writing mathematics in a web page

One thought on “MathML – The basics of writing mathematics in a web page”

Leave a comment Cancel reply