math-shift CSS property
Baseline
2025
Newly available
Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The math-shift property indicates whether superscripts inside MathML formulas should be raised by a normal or compact shift.
Syntax
/* Keyword values */
math-shift: normal;
math-shift: compact;
/* Global values */
math-shift: inherit;
math-shift: initial;
math-shift: revert;
math-shift: revert-layer;
math-shift: unset;
Values
normal-
The initial value, indicates normal rendering. Superscripts in MathML formulas use the superscriptShiftUp parameter from the OpenType MATH table.
compact-
Indicates compact rendering. Superscripts in MathML formulas use the superscriptShiftUpCramped parameter from the OpenType MATH table, which is generally smaller.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |
Formal syntax
math-shift =
normal |
compact
Examples
Normal and compact shift
The following MathML displays two versions of "x squared" using a font with an OpenType MATH table.
The math-shift property is used to raise the superscripts using the normal and compact shift.
CSS
math {
font-size: 64pt;
math-shift: normal;
}
.compact-shift {
math-shift: compact;
}
MathML
<math>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<msup class="compact-shift">
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
Results
Note that the second "2" has a more compact (lower) shift.
Specifications
| Specification |
|---|
| MathML Core # the-math-shift |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
math-shift
|
|
|
|
|
|
|
|
|
|
|
|
|
compact
|
|
|
|
|
|
|
|
|
|
|
|
|
normal
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support