CSS math-depth Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The math-depth property is intended as a semantic styling hook that reflects the nesting level of subexpressions inside mathematical notation. Rather than being about precise layout calculations, it signals the logical depth of an expression — for example, whether an atom is at the top level, inside a fraction, inside an exponent of an exponent, and so on — so that authors and user agents can apply different visual treatments depending on how deeply the content is nested. This makes it easier to create consistent, readable math styles that adapt to complex structures without manually annotating every subexpression.

In practice the presence of depth information lets typographic systems alter how they render operators, delimiters, and script sizes in a way that preserves readability across nesting. Authors typically use it to influence scaling, spacing or color contrasts for nested components so that small superscripts remain legible and fences (parentheses, brackets) expand or contract appropriately relative to their context. When combined with typographic controls such as font-size, designers can create stepwise size ramps or proportional spacing rules tied to nesting level; when combined with transform effects such as transform, subtle visual emphasis or de-emphasis of deep subexpressions can be applied without altering the underlying semantic structure.

Because math-depth represents a structural attribute rather than a pure presentational value, it works best as part of a broader style strategy: use it to scope rules that improve legibility (for example, increasing inter-element spacing or reducing decoration intensity for very deep nests), to adapt math for small-screen or high-density contexts, or to create consistent visual themes for mathematical content across a site or document. It also helps when authors want to target only parts of a math tree for animation, printing tweaks, or accessibility-focused adjustments, since depth-aware styling can be combined with other cascading rules and media-driven changes to produce predictable, maintainable results.

Definition

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

<div class='container'>

  <div class='box'>

    <div class='label'>math-depth: 0 (default)</div>

    <math xmlns='http://www.w3.org/1998/Math/MathML' class='math-default'>

      <msup>

        <mi>a</mi>

        <msup>

          <mi>b</mi>

          <mi>c</mi>

        </msup>

      </msup>

    </math>

  </div>



  <div class='box'>

    <div class='label'>math-depth: 1</div>

    <math xmlns='http://www.w3.org/1998/Math/MathML' class='math-1'>

      <msup>

        <mi>a</mi>

        <msup>

          <mi>b</mi>

          <mi>c</mi>

        </msup>

      </msup>

    </math>

  </div>



  <div class='box'>

    <div class='label'>math-depth: 3</div>

    <math xmlns='http://www.w3.org/1998/Math/MathML' class='math-3'>

      <msup>

        <mi>a</mi>

        <msup>

          <mi>b</mi>

          <mi>c</mi>

        </msup>

      </msup>

    </math>

  </div>

</div>

CSS

.container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px;
  background: #fafafa;
}

.box {
  width: 220px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.label {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: 13px;
  color: #334155;
  margin-bottom: 8px;
}

math {
  display: block;
  font-size: 28px; /* scale the math so differences are visible */
  line-height: 1;
}

/* Examples of the CSS math-depth property applied at different values */
.math-default {
  math-depth: 0;
}

.math-1 {
  math-depth: 1;
}

.math-3 {
  math-depth: 3;
}

/* Small visual hint for browsers that don't support math-depth */
math:not([style]) {
  transition: transform 160ms ease;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS math-depth property. Hover over a browser icon to see the version that first introduced support for this CSS property.