CSS math-style Property

Description

The CSS math-style property specifies whether MathML equations should render with normal or compact height. The two possible values are normal and compact. The math-style property can be applied to any element that contains MathML equations. It can also be inherited by child elements.

Initial value: normal
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: no
JavaScript syntax: object.style.mathStyle

Syntax

math-style: normal | compact

Values

normalThe initial value, indicates normal rendering.
compactThe math layout on descendants tries to minimize the logical height.

Example

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>

CSS

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

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS math-style property.

Desktop

109	109	117	95	14.1

Tablets / Mobile

109	117	74	14.5	21	109

Last updated by CSSPortal on: 31st December 2023

Support Us