How CSS math-depth Manages MathML Script Styling

The CSS math-depth property controls the nesting level of mathematical expressions within MathML, directly regulating how subscript, superscript, and nested sub-formulas are scaled and styled. By monitoring and calculating hierarchical depth, it automates the progressive reduction of font sizes and triggers math-specific OpenType font features, ensuring that mathematical typography remains readable, balanced, and structurally accurate across complex equations.

Understanding math-depth in MathML

In traditional typography and mathematical typesetting (such as TeX), nested elements like indices, superscripts, and fractions require smaller text sizes to denote hierarchy and conserve vertical space. MathML Core integrates this behavior into CSS through the math-depth property.

The math-depth property calculates an integer value representing the mathematical nesting level of an element. As expressions nest deeper—such as a superscript inside another superscript—the value of math-depth increases, signaling the rendering engine to adapt the typography accordingly.

Values and Syntax

The math-depth property accepts explicit numbers, relative adjustments, or keyword values:

  • auto-add: The default behavior. If an element naturally introduces a script level change (such as an <msup>, <msub>, or <mroot> element), the browser automatically increments the depth by one.
  • add(<integer>): Inherits the computed depth from the parent and modifies it by the specified integer (e.g., math-depth: add(1) or math-depth: add(-1)).
  • <integer>: Explicitly sets an absolute depth level, overriding any inherited values (e.g., math-depth: 0).

How math-depth Affects Visual Styling

The primary function of math-depth is to adjust typography and font sizing based on depth calculations:

1. Dynamic Font Scaling

When math-depth increments, user-agent stylesheets apply font scaling based on parameters defined in the font's OpenType MATH table (specifically ScriptPercentScaleDown and ScriptScriptPercentScaleDown). Typically:

  • A depth of 0 renders at the base font size (100%).
  • A depth of 1 scales down (typically around 70–75% of the base size).
  • A depth of 2 scales down further (typically around 50–60% of the base size).

To prevent text from becoming unreadable, browsers generally cap the automated reduction beyond a depth of 2, maintaining the minimum readable size for subsequent nested layers unless overridden by author styles.

2. Activation of OpenType Math Features

Certain OpenType math fonts include specialized glyph variants designed explicitly for scripts. The math-depth property instructs the browser to enable OpenType features such as ssty (Math Script Style Alternates). At depth 1, the browser enables the first alternate (ssty=1); at depth 2, it enables the second alternate (ssty=2), providing glyphs with thicker stems and adjusted proportions tailored for small-scale readability.

3. Interaction with math-style

The math-depth property works in tandem with the math-style property, which toggles between normal (display style) and compact (inline style). While math-style determines whether an expression is spaced compactly or displayed openly, math-depth strictly manages script shrinkage and hierarchy.

Practical Overrides and Customization

Authors can use math-depth to correct rendering issues in deeply nested equations or to prevent unwanted font shrinking:

/* Prevent superscripts from shrinking in a specific formula */
math .no-shrink msup > :last-child {
  math-depth: 0;
}

/* Force a sub-expression to render as a nested script */
.custom-script {
  math-depth: add(1);
}

By standardizing math hierarchy management into CSS, math-depth bridges the gap between semantic MathML markups and modern web font engines, enabling predictable, typographically sound mathematical layouts.