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

css
/* 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 valuenormal
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typeNot animatable

Formal syntax

math-style = 
normal |
compact

Examples

Changing the style of a formula to compact

CSS

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

HTML

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
math-style

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

See also