CSS math-depth Property

Description

The CSS math-depth property specifies the depth of a mathematical formula element relative to the top-level container of that formula. This is used to scale the font size of elements when the font-size: math property is applied. When the font-size: math property is applied to an element, the browser will scale the font size of the element based on its math-depth property and the font-size property of its parent element. The following table shows how the font size of an element is scaled based on its math-depth property:

Initial value
0
Applies to
all elements
Inherited
yes
Computed value
as specified
Animatable
no
JavaScript syntax
object.style.mathDepth

Syntax

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

Values

  • auto-addSet 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.

Example

<p style="font-size: 3rem; margin: 1rem 0">
<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>

Browser Support

The following table will show you the current browser support for the CSS math-depth property.

Desktop
Edge Chrome Firefox Opera Safari
10910911795x
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
10911774x21109

Last updated by CSSPortal on: 31st December 2023