math-style
Baseline 2023 Newly available
Since August 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
Loading…