math-style

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

BCD tables only load in the browser

See also