Presentation MathML and examples

NOTE: this is a standard HTML page that cannot render the MathML examples below! Click on this MathML examples twin page made with the XHTML that actually can render equations (of course, only if your browser supports MathML).

In short, I am not satisfied with the MathML.

Let me explain... the MathML is overly complicated. The reason is, obviously, because authors wanted to embrace all the math, and math is a huge subject. In addition, the MathML is verbose and clumsy.

It is not that MathML authors made a poor job. They actually made it exactly as they wanted it. But what they wanted, is not what we wanted. We wanted a small simple and effective 'language' to describe general math equations. At least, I wanted that.

90% of all math used on the web is actually pretty simple. I feel that it would be better if MathML covered this 90%, forgetting the rest. The remaining 10% is where unneeded complexity is. This way the MathML would spread much faster.... Who cares about tensors and other exotic stuff (don't worry about real mathematicians, they will manage their way).

Sure, It is expected for standardization bodies and committees to make that kind of 'mistake'. Standardization committees should standardize existing things, not inventing new ones. Making MathML complex and standard at the same time, the Consortium effectively retarded the math adoption over the web.

In any case, the examples that follow are computer-generated using Math-o-mir software. If you, on the other hand, write the MathML directly by hand you can actually make it more compact than in these examples, but it is not worth it.

Example: a+b

You see 'mi' and 'mo' tokens used to insert identifiers and operators. You also see the 'mrow' tag that is used to make an expression a single unit.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<mi>a</mi>
	<mo>+</mo>
	<mi>b</mi>
	</mrow>
</math>
a + b

Example: a1+b1

The 'msub' tag is used for indexes. The order matters, the first element under the 'msub' tag is written as normal tekst, while the second element is written as subscript. Note that the index is embraced into the 'mrow'..'/mrow' (not needed in this case because there is only one element in the index). Also note the 'mn' token, used for numbers.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<msub>
	<mi>a</mi>
		<mrow>
		<mn>1</mn>
		</mrow>
	</msub>
	<mo>+</mo>
	<msub>
	<mi>b</mi>
		<mrow>
		<mn>1</mn>
		</mrow>
	</msub>
	</mrow>
</math>
a 1 + b 1

Example: a2+b2

Almost exactly the same as the above example, only the 'msup' tag is used instead of 'msub'.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<msup>
		<mrow>
		<mi>a</mi>
		</mrow>
		<mrow>
		<mn>2</mn>
		</mrow>
	</msup>
	<mo>+</mo>
	<msup>
		<mrow>
		<mi>b</mi>
		</mrow>
		<mrow>
		<mn>2</mn>
		</mrow>
	</msup>
	</mrow>
</math>
a 2 + b 2

Example: a(b+c)

The 'mfenced' tag is used for parentheses. However notice the '&it;' operator (it can also be written as '&InvisibleTimes;'). It is recommanded to insert the reference to the invisible times operator whenever it actually exists in your formula (as between variable 'a' and parentheses in this example).

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<mi>a</mi>
	<mo>&it;</mo>
		<mfenced open="(" close=")">
		<mrow>
		<mi>b</mi>
		<mo>+</mo>
		<mi>c</mi>
		</mrow>
		</mfenced>
	</mrow>
</math>
a b + c

Example: sqrt(a) * 3rd_root(b)

Here you can see how to use the 'msqrt' and 'mroot' tags. Again, the order matters for the 'mroot' tag.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<msqrt>
		<mrow>
		<mi>a</mi>
		</mrow>
	</msqrt>
	<mo>&CenterDot;</mo>
	<mroot>
		<mrow>
		<mi>b</mi>
		</mrow>
		<mrow>
		<mn>3</mn>
		</mrow>
	</mroot>
	</mrow>
</math>
a · b 3

Example: a/b=c

Also a simple example to demonstrate the 'mfrac' tag.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<mfrac>
		<mrow>
		<mi>a</mi>
		</mrow>
		<mrow>
		<mi>b</mi>
		</mrow>
	</mfrac>
	<mo>=</mo>
	<mi>c</mi>
	</mrow>
</math>
a b = c

Example: sin pi = 0

A bit stupid way to write a function. Notice the usage of the '&af;' operator (aka. '&ApplyFunction;). You should (must) put the 'apply function' operator between function name identifier and function argument. That is why, among many things, the Presentation MathML is no good for data exchange.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<mi>sin</mi>
	<mo>&af;</mo>
		<mrow>
		<mi>&#x03C0;</mi>
		</mrow>
	<mo>=</mo>
	<mn>0</mn>
	</mrow>
</math>
sin π = 0

Example: ai2=C

Two things are to be seen here. First you see what you have to do to power an idexed variable. To do this you must use the 'msubsup' tag. The 'msubsup' is different than using 'msup' inside the 'msub'(exponent would be moved to the right). Second, you see the usage of the 'mathvariant' attribute. We wanted the 'C' in bold.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
		<mrow>
		<msubsup>
		<mi>a</mi>
			<mrow>
			<mi>i</mi>
			</mrow>
			<mrow>
			<mn>2</mn>
			</mrow>
		</msubsup>
		</mrow>
	<mo>=</mo>
	<mi mathvariant="bold">C</mi>
	</mrow>
</math>
a i 2 = C

Example: SUM n2 (where n goes from 1 to 5)

The 'munderover' tag is used to display summation limits where they should be (strange, in the FireFox, the 'munderover' and the 'msubsup' behave the same)

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<munderover>
	<mo>&Sum;</mo>
		<mrow>
		<mi>n</mi>
		<mo>=</mo>
		<mn>1</mn>
		</mrow>
		<mrow>
		<mn>5</mn>
		</mrow>
	</munderover>
	<mrow>
	<msup>
		<mrow>
		<mi>n</mi>
		</mrow>
		<mrow>
		<mn>2</mn>
		</mrow>
	</msup>
	</mrow>
	</mrow>
</math>
n = 1 5 n 2

Example: a(vector) + b(vector)

Here, vectors are represented with small arrows above variables 'a' and 'b'. To make this, again we use 'mover' tag. I found this also a bit stupid, maybe there is a better way. The right arrow is inserted as an operator.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<mover>
	<mi>a</mi>
	<mo>&RightArrow;</mo>
	</mover>
	<mo>+</mo>
	<mover>
	<mi>b</mi>
	<mo>&RightArrow;</mo>
	</mover>
	</mrow>
</math>
a + b

Example: a+b+c=10+20+30 (where 'b+c' is red colored, and '10+20' is encircled)

Here you can see about 'mstyle' and 'menclose' tags that can be used to decorate your equations.

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<mi>a</mi>
	<mo>+</mo>
	<mstyle mathcolor="red">
	<mi>b</mi>
	<mo>+</mo>
	<mi>c</mi>
	</mstyle>
	<mo>=</mo>
	<menclose notation="circle">
	<mn>10</mn>
	<mo>+</mo>
	<mn>20</mn>
	</menclose>
	<mo>+</mo>
	<mn>30</mn>
	</mrow>
</math>
a + b + c = 10 + 20 + 30

Example: 2x2 matrix (a,b,c,d)

The 'mtable' is to be used for matrices. Separate rows by 'mtr' and columns by 'mtd'. Note that 'mtable' doesnt mean matrix but table (we had to put fences around for the table to look as matrix).

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
		<mfenced open="[" close="]">
		<mrow>
		<mtable>
		<mtr>
		<mtd>
		<mi>a</mi>
		</mtd>
		<mtd>
		<mi>b</mi>
		</mtd>
		</mtr>
		<mtr>
		<mtd>
		<mi>c</mi>
		</mtd>
		<mtd>
		<mi>d</mi>
		</mtd>
		</mtr>
		</mtable>
		</mrow>
		</mfenced>
	</mrow>
</math>
a b c d

Example: just a complicated meaningless formula

MathML code Your browser renders as
<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
	<mfrac>
		<mrow>
		<msup>
			<mrow>
			<mi>x</mi>
			</mrow>
			<mrow>
			<mn>2</mn>
			</mrow>
		</msup>
		<mo>+</mo>
		<mn>2</mn>
		<mo>&it;</mo>
		<msqrt>
			<mrow>
			<mn>5.12</mn>
			<mo>·</mo>
			<msup>
				<mrow>
				<mn>10</mn>
				</mrow>
				<mrow>
				<mn>3</mn>
				</mrow>
			</msup>
			<mo>+</mo>
			<mi>c</mi>
			</mrow>
		</msqrt>
		</mrow>
		<mrow>
		<mn>12</mn>
		<mo>&it;</mo>
		<mi>j</mi>
		<mo>+</mo>
			<mrow>
			<msubsup>
			<mi>n</mi>
				<mrow>
				<mn>1</mn>
				</mrow>
				<mrow>
				<mn>2</mn>
				</mrow>
			</msubsup>
			</mrow>
		<mo>+</mo>
		<mfrac>
			<mrow>
			<mi>y</mi>
			</mrow>
			<mrow>
			<mn>4</mn>
			</mrow>
		</mfrac>
		<mo>-</mo>
		<mn>1</mn>
		</mrow>
	</mfrac>
	<mo>+</mo>
	<mover>
	<mi>h</mi>
	<mo>&HorizontalLine;</mo>
	</mover>
	<mo>&RightArrow;</mo>
	<mn>0</mn>
	</mrow>
</math>
x 2 + 2 5.12 · 10 3 + c 12 j + n 1 2 + y 4 - 1 + h 0

Danijel Gorupec, 2010