HTML5 MathML
HTML5 MathML Attributes
MathML elements accept attributes that control appearance and behaviour - colour, size, spacing, stretching and alignment. This page gives an overview and a table of the attributes you will use most often.
Overview
Some attributes apply to almost any element (mathcolor, mathsize), while others are specific to one element (linethickness on <mfrac>, stretchy on <mo>). The table below groups the most common attributes with the elements they apply to.
Common MathML Attributes
| Attribute | Applies to | Description |
|---|---|---|
| display | <math> | block or inline rendering. |
| dir | <math> | Text direction ltr or rtl. |
| mathcolor | most elements | Foreground (text) colour. |
| mathbackground | most elements | Background colour. |
| mathsize | token elements | Font size of the content. |
| mathvariant | <mi>, <mn>, <mo> | Font style such as bold or double-struck. |
| linethickness | <mfrac> | Thickness of the fraction bar. |
| bevelled | <mfrac> | Diagonal fraction when true. |
| numalign | <mfrac> | Numerator alignment. |
| denomalign | <mfrac> | Denominator alignment. |
| stretchy | <mo> | Whether the operator stretches. |
| largeop | <mo> | Render as a large operator. |
| movablelimits | <mo> | Allow limits to move under/over. |
| separator | <mo> | Mark the operator as a separator. |
| fence | <mo> | Mark the operator as a fence. |
| accent | <mover>, <munder> | Draw the script as a tight accent. |
| notation | <menclose> | Kind of enclosure such as box or circle. |
| actiontype | <maction> | The interactive action to perform. |
| selection | <maction> | Which child is currently shown. |
| open | <mfenced> | Opening bracket character. |
| close | <mfenced> | Closing bracket character. |
| separators | <mfenced> | Characters between children. |
| width | <mpadded>, <mspace> | Width of the space or padded box. |
| height | <mpadded>, <mspace> | Height above the baseline. |
| depth | <mpadded>, <mspace> | Depth below the baseline. |
| voffset | <mpadded> | Vertical shift of the content. |
| lspace | <mpadded>, <mo> | Space added to the left. |
| rowalign | <mtable>, <mtr> | Vertical alignment of row cells. |
| columnalign | <mtable>, <mtr> | Horizontal alignment of columns. |
Example
This applies mathcolor and mathsize to highlight part of a formula.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathML Attributes</title>
</head>
<body>
<math display="block">
<mrow>
<mi mathcolor="teal" mathsize="1.5em">E</mi>
<mo>=</mo>
<mi>m</mi>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>ℹ️
MathML Core also lets you style elements with regular CSS (color, font-size, background), which is often more reliable than the older math* presentation attributes.
Key Takeaways
- General attributes (mathcolor, mathsize) work on most elements.
- Specific attributes belong to one element, like linethickness on <mfrac>.
- CSS is a modern alternative to many presentation attributes.