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
Formal definition
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | Not 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