MathML

MathML stands for "Mathematical Markup Language" and that pretty much tells you what it is. It's an XML based subset of HTML5 and it's been an ISO standard since 2015. My testing of the parts I care about seens to show that it is properly rendered by modern versions of Firefox, Chrome, and Safari.

This page collects together some tips and various MathML constructs that I use. I like to learn by example, and I find it a lot easier to copy something close to what I ultimately want, and tweak it, rather than to build from scratch using a standards manual as a reference.

I've found looking at the source code behind the examples at a Mozilla test page and another Mozilla test page to be extremely instructive. I've used them as a starting point for my examples below. If no existing example is a good enough starting point, the official presentation documentation might help.

If you really want to learn more theory, there's a wikipedia article on the topic, and there's an official W3C page. It's good to know they exist, but I haven't gotten much use out of them after skimming them once. Maybe it's because I'm already familiar with LaTeX, which MathML is loosely based on. And I've used lots of mark up elsewhere.

Tips

Firstly, I've found it useful to test with several browsers to make sure that a specific MathML construct works as I want it to. The ones I use are Firefox, Chrome, and Safari. In my experience, each will catch problems that the others don't.

Secondly, some MathML elements are now deprecated. I recommend checking the documentation on any tag that you're using for the first time. Some website tutorials have examples using deprecated constructs. Caveat emptor. The documentation at this Mozilla page is what I use.

Thirdly, although HTML5 allows special codes for mathematical symbols, I prefer to use a unicode character directly whenever possible. In other words, in the html source code, instead of representing the greek letter pi i.e. π by codes like the html named code &pi; or the html decimal numeric code &#960; or the html hex numeric code &#x3c0;, I prefer to use the unicode character π directly. The easiest way to allow this is to put the following meta tag in the head section of the html page: <meta charset="UTF-8" /> If you look in the source code of this page you should see that I've done exactly that for this page.

If you follow the above tip and you use tidy to catch problems, which I recommend and do routinely, you will probably want to use the -utf8 option, i.e. use
tidy -utf8 -xml -qe filename.html

Examples

Function with parentheses: $$f\left(x\right)=x+5$$

Function without parentheses using ApplyFunction
Do not use this. Inconsistent results across browsers $$fx=x+5$$

Function without parentheses using mspace: $$fx=x+5$$

Definite integral evaluation $${\int }_0^1{e}^x\mathrm{dx}=e-1$$

Simple limit example: $$\underset{x\to 0}{lim}\frac{\sin x}{x}=1$$

Summation example $$\sum _{1\le i\le j\le n}{x}_i{x}_j$$

Using text in a mathematical expression $$\left\{x\right|x'' is\; a\; positive\; integer''\}$$

Combinatorial n choose r $$\left(\genfrac{}{}{0em}{}{n}{r}\right)$$

Stirling's formula $$\frac{1}{\sqrt{2\pi n}}{\left(\frac{n}{e}\right)}^n~n!$$

Double integral $$\underset{-\infty }{\overset{+\infty }{\iint }}\frac{\mathrm{dx}\mathrm{dy}}{1+x^4{y}^4}$$

Contour integral $$\underset{\left|z\right|=2}{\oint }\frac{\mathrm{dz}}{\sqrt{1+z^{10}}}$$

Feedback

If you have corrections, additions, modifications, etc please let me know mailto:walterv@gbbservices.com