`math-depth` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since January 2023.

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.

Note: font-size: math is the default for <math> elements in the MathML Core User Agent stylesheet, so it's not necessary to specify it explicitly.

Syntax

/* Keyword values */
math-depth: auto-add;

/* Relative values */
math-depth: add(2);
math-depth: add(-2);

/* Absolute value */
math-depth: 4;

/* Global values */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;

Values

auto-add: Set to the inherited math-depth plus 1 when inherited math-style is compact.
add(<integer>): Set to the inherited math-depth plus the specified integer.
<integer>: Set to the specified integer.

Formal definition

Initial value	0
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	Not animatable

Formal syntax

math-depth = 
  auto-add |
  add(<integer>) |
  <integer>

<integer> = 
  <number-token>

Examples

Specifying a math depth

The following example shows the effect of changing the math-depth property on the font size of subformulas. The numbers in each subformula indicate the math-depth and scale factor applied.

The first <mtext> element is used as a reference to other subformulas and has no specific styles applied. The second and third subformulas have math-depth set to auto-add and show the effect of scaling depending on the math-style.

The last two subformulas show the effect of setting math-depth to a specific value.

HTML

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

p {
  font-size: 3rem;
  margin: 1rem 0;
}

Result

Specifications

Specification
MathML Core # the-math-script-level-property

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`math-depth`	109	109	117	95	26.4	109	117	74	26.4	21.0	109	26.4
`auto-add`	109	109	117	95	26.4	109	117	74	26.4	21.0	109	26.4