CSS math-depth Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

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