The math-depth property for CSS describes a notion of "depth" for each element of a mathematical formula, with respect to the top-level container of that formula. Concretely, this is used to determine the computed value of the font-size property when its specified value is math.
object.style.mathDepth = "value"; <'math-depth'> =
auto-add |
add(<integer>) |
<integer> auto-add Inherited value plus one when the inherited value of math-style is compact.
add(<integer>) Inherited value plus the specified integer.
<integer> Specifies one or more decimal digits (0-9).
<!doctype html>
<html>
<head>
<style>
math
{
font-size: math;
math-depth: add(-1);
}
</style>
</head>
<body>
<math>
<mtext>add</mtext>
<math>
<mtext>add</mtext>
<math>
<mtext>add</mtext>
</math>
</math>
</math>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
math
{
font-size: math;
math-depth: -2;
}
</style>
</head>
<body>
<math>
<mtext>integer</mtext>
<math>
<mtext>integer</mtext>
<math>
<mtext>integer</mtext>
</math>
</math>
</math>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
math
{
font-size: math;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto-add</button>
<button value="add(-1)">add</button>
<button value="-2">integer</button><br>
<math>
<mtext>math-depth</mtext>
<math>
<mtext>math-depth</mtext>
<math>
<mtext>math-depth</mtext>
</math>
</math>
</math>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
for(const mymath of document.querySelectorAll("math"))
{
mymath.style.mathDepth = myproperty;
}
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>