MathML: Write Math Like HTML
Published
•1 min read
I
Front-end developer
MathML or Mathematics Markup Language is used to write mathematical formulas such as functions, fractions, scripts, radicals, matrices, integrals, series, etc. It is based on XML and generally embedded in HTML documents.
Syntax
MathML uses the same syntax as HTML. For example, each mathematical formula is placed in <math> tag. Another example is <mfrac> which represents a fraction with a nominator and denominator. This example shows some common math formulas written using MathML:
<body>
<math>
<mtext>Pythagorean Theorem:</mtext>
</math>
<math>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
<math>
<mtext>Quadratic Formula:</mtext>
</math>
<math>
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>4</mn>
<mo>⁢</mo>
<mi>a</mi>
<mo>⁢</mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
<math>
<msup>
<mi>x</mi>
<mi>y</mi>
</msup>
<mo>≡</mo>
<msup>
<mi>y</mi>
<mi>x</mi>
</msup>
</math>
</body>
Style
Styling MathML is the same as HTML. You can use CSS to style the MathML tags. This example is the style for the above sample:
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
math {
font-size: 24px;
font-family: Latin Modern Math;
}
mi {
color: blueviolet;
font-size: 48px;
}
mn {
color: brown;
font-size: 36px;
}
