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

<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>

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

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