math-style CSS property

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

This property is specified as one of the following keyword 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

undefined

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

See also