math-depth
The math-depth
property describes a notion of depth for each element of a mathematical formula, with respect to the top-level container of that formula. This is used to scale the computed value of the font-size of elements when font-size: math
is applied.
Note: font-size: math
is the default for <math>
elements in the MathML Core User Agent stylesheet, so it's not necessary to specify it explicitly.
Syntax
/* Keyword values */
math-depth: auto-add;
/* Relative values */
math-depth: add(2);
math-depth: add(-2);
/* Absolute value */
math-depth: 4;
/* Global values */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;
Values
auto-add
-
Set to the inherited
math-depth
plus 1 when inherited math-style iscompact
. add(
<integer>
)-
Set to the inherited
math-depth
plus the specified integer. <integer>
-
Set to the specified integer.
Formal definition
Initial value | 0 |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | Not animatable |
Formal syntax
Examples
Specifying a math depth
The following example shows the effect of changing the math-depth
property on the font size of subformulas.
The numbers in each subformula indicate the math-depth
and scale factor applied.
The first <mtext>
element is used as a reference to other subformulas and has no specific styles applied.
The second and third subformulas have math-depth
set to auto-add
and show the effect of scaling depending on the math-style
.
The last two subformulas show the effect of setting math-depth
to a specific value.
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>
Result
Specifications
Specification |
---|
MathML Core # the-math-script-level-property |
Browser compatibility
BCD tables only load in the browser