| 属性名 | math-depth |
|---|---|
| 値 | auto-add | add(<integer>) | <integer> |
| 初期値 | 0 |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/mdn-css_properties_math-depth |
MathML における深さを制御します。深さとは例えば、分子/分母になると深さが 1 増します。分母がさらに分子/分母になると深さがさらに 1 増します。深くなるほどフォントサイズは小さくなります。
math-style が compact の時、継承した値に 1 を加えます。<integer> を加えます。<integer> に負数を指定すると減算します。<integer> に設定します。
.my-example {
display: flex;
gap: 1rem;
math {
math-style: normal;
.math-depth-0 {
color: red;
math-depth: 0;
}
.math-depth-add-2 {
color: red;
math-depth: add(2);
}
.math-depth-auto-add {
color: red;
math-depth: auto-add;
}
}
}
<div class="my-example">
<math style="font-size:32px;">
<mfrac>
<mn>123456</mn>
<mfrac>
<mn>12345</mn>
<mfrac>
<mn>1234</mn>
<mn>123</mn>
</mfrac>
</mfrac>
</mfrac>
</math>
<math style="font-size:32px;">
<mfrac>
<mn>123456</mn>
<mfrac>
<mn>12345</mn>
<mfrac>
<mn class="math-depth-0">1234</mn>
<mn>123</mn>
</mfrac>
</mfrac>
</mfrac>
</math>
<math style="font-size:32px;">
<mfrac>
<mn>123456</mn>
<mfrac>
<mn>12345</mn>
<mfrac>
<mn class="math-depth-add-2">1234</mn>
<mn>123</mn>
</mfrac>
</mfrac>
</mfrac>
</math>
<math style="font-size:32px; math-style:compact;">
<mfrac>
<mn>123456</mn>
<mfrac>
<mn>12345</mn>
<mfrac>
<mn class="math-depth-auto-add">1234</mn>
<mn>123</mn>
</mfrac>
</mfrac>
</mfrac>
</math>
</div>
最初の分数は通常通り表示しています。深さが増すとフォントサイズが小さくなります。2個目の分数は 1234 に math-depth: 0 を指定しています。深さ 0 の 123456 と同じ大きさになります。3個目の分数は 1234 に math-depth: add(2) を指定しています。通常は 1 段階深さが増すのに対して 2 段階増しているのでより小さくなります。4個目の分数は math-style: compact を指定して math-depth: auto-add を指定していますが、正直効果が分かりませんでした。誰か効果のあるサンプルを知ってる方が居れば教えてください。