<mstyle>

Baseline 2023

Newly available

Since January 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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 background-color instead.

color

Use color instead.

fontsize

Use font-size instead.

fontstyle

Use font-style instead.

fontweight

Use font-weight instead.

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:

html
<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.

html
<math display="block" style="font-size: 128pt">
  <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>

Technical summary

Implicit ARIA role None

Specifications

Specification
MathML Core
# style-change-mstyle

Browser compatibility

BCD tables only load in the browser