<mstyle>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2023.
* Some parts of this feature may have varying levels of support.
The <mstyle> MathML element is used to change the style of its children.
Note:
Historically, this element accepted almost all the MathML attributes and it was used to override the default attribute values of its descendants. It was later restricted to only a few relevant styling attributes that were used in existing web pages. Nowadays, these styling attributes are common to all MathML elements and so <mstyle> is really just equivalent to an <mrow> element. However, <mstyle> may still be relevant for compatibility with MathML implementations outside browsers.
Attributes
This element's attributes include the global MathML attributes as well as the following deprecated attributes:
background-
Use CSS property
background-colorinstead. color-
Use CSS property
colorinstead. fontsize-
Use CSS property
font-sizeinstead. fontstyle-
Use CSS property
font-styleinstead. fontweight-
Use CSS property
font-weightinstead.
Examples
Attributes mapped to CSS
The following example uses global attributes displaystyle and mathcolor to respectively override the math-style and color of the <munder> and <munderover> children:
<math display="block">
<mstyle displaystyle="false" mathcolor="teal">
<munder>
<mo>∑</mo>
<mi>I</mi>
</munder>
<munderover>
<mo>∏</mo>
<mrow>
<mi>i</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mi>N</mi>
</munderover>
</mstyle>
</math>
Legacy script attributes
The following example shows a formula with font-size set to 128pt. It contains numbers that are placed in nested superscripts as well as an <mstyle> element with legacy attributes scriptsizemultiplier and scriptminsize. The font-size is multiplied by 0.5 when entering each superscript as long as that does not make it smaller than 16pt.
<math display="block">
<mstyle scriptsizemultiplier="0.5" scriptminsize="16pt">
<msup>
<mn>2</mn>
<msup>
<mn>2</mn>
<msup>
<mn>2</mn>
<msup>
<mn>2</mn>
<msup>
<mn>2</mn>
<msup>
<mn>2</mn>
<mn>2</mn>
</msup>
</msup>
</msup>
</msup>
</msup>
</msup>
</mstyle>
</math>
math {
font-size: 128pt;
}
Technical summary
| Implicit ARIA role | None |
|---|
Specifications
| Specification |
|---|
| MathML Core # style-change-mstyle |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
mstyle
|
|
|
|
|
|
|
|
|
|
|
|
|
background
|
|
|
|
|
|
|
|
|
|
|
|
|
color
|
|
|
|
|
|
|
|
|
|
|
|
|
fontsize
|
|
|
|
|
|
|
|
|
|
|
|
|
fontstyle
|
|
|
|
|
|
|
|
|
|
|
|
|
fontweight
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- See implementation notes.
- Has more compatibility info.