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

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>