math-style

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 math-style property indicates whether MathML equations should render with normal or compact height.

Syntax

/* Keyword values */
math-style: normal;
math-style: compact;

/* Global values */
math-style: inherit;
math-style: initial;
math-style: revert;
math-style: revert-layer;
math-style: unset;

Values

normal: The initial value, indicates normal rendering.
compact: The math layout on descendants tries to minimize the logical height.

Formal definition

Initial value	`normal`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	Not animatable

Formal syntax

math-style = 
  normal   |
  compact

Examples

Changing the style of a formula to compact

CSS

math {
  math-style: normal;
}
.compact {
  math-style: compact;
}

HTML

<p>
  Normal height
  <math>
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  and compact height
  <math class="compact">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  equations.
</p>

Result

Specifications

Specification
MathML Core # the-math-style-property

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`math-style`	109	109	117	95	14.1	109	117	74	14.5	21.0	109