Each feature in detail
MDN The math-depth property describes a notion of depth for each element of a mathematical formula, with respect to the top-level container of that formula. This is used to scale the computed value of the font-size of elements when font-size: math is applied.
Live preview Example from MDN
p {
font-size: 3rem;
margin: 1rem 0;
}
<p>
<math>
<mtext>0</mtext>
<!-- auto-add value has no effect when math-style is normal -->
<mrow style="math-style: normal">
<mrow style="math-depth: auto-add">
<mtext>0</mtext>
</mrow>
</mrow>
<!-- the inherited math-style is compact, so math-depth is set to 1 -->
<mrow style="math-depth: auto-add">
<mtext>1</mtext>
</mrow>
<mrow style="math-depth: add(2)">
<mtext>2</mtext>
<mrow style="math-depth: add(-1)">
<mtext>1</mtext>
</mrow>
<mrow style="math-depth: 0">
<mtext>0</mtext>
</mrow>
</mrow>
</math>
</p>
Syntax
auto-add | add(<integer>) | <integer>
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 0
- Applies to
- All elements
- Inherited
- yes
- Percentages
- n/a
- Computed value
- an integer, see below
- Canonical order
- n/a
- Animation type
- by computed value type
Browser support
First browser version supporting math-depth | Chrome | 109 |
| Edge | 109 |
| Firefox | 117 |
| Safari | 26.4 |
| Chrome Android | 109 |
| Safari iOS | 26.4 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The math-shift property indicates whether superscripts inside MathML formulas should be raised by a normal or compact shift.
Live preview Example from MDN
math {
font-size: 64pt;
math-shift: normal;
}
.compact-shift {
math-shift: compact;
}
<math>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<msup class="compact-shift">
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
Syntax
normal | compact
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- normal
- Applies to
- All elements
- Inherited
- yes
- Percentages
- n/a
- Computed value
- specified keyword
- Canonical order
- n/a
- Animation type
- by computed value type
Browser support
First browser version supporting math-shift | Chrome | 109 |
| Edge | 109 |
| Firefox | 146 |
| Safari | 26.2 |
| Chrome Android | 109 |
| Safari iOS | 26.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The math-style property indicates whether MathML equations should render with normal or compact height.
Live preview Example from MDN
math {
math-style: normal;
}
.compact {
math-style: compact;
}
<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>
Syntax
normal | compact
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- normal
- Applies to
- All elements
- Inherited
- yes
- Percentages
- n/a
- Computed value
- specified keyword
- Canonical order
- n/a
- Animation type
- by computed value type
Browser support
First browser version supporting math-style | Chrome | 109 |
| Edge | 109 |
| Firefox | 117 |
| Safari | 14.1 |
| Chrome Android | 109 |
| Safari iOS | 14.5 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗