math-depth

math-depth プロパティは、数式の各要素について、その数式の最上位コンテナーに対する 深さ の概念を記述します。これは、 font-size: math が適用されたとき、要素の font-size の計算値を調整するために使用されます。

メモ: font-size: math は MathML Core のユーザーエージェントスタイルシートにおける <math> 要素の既定値ですので、明示的に指定する必要はありません。

構文

css
/* キーワード値 */
math-depth: auto-add;

/* 相対値 */
math-depth: add(2);
math-depth: add(-2);

/* 絶対値 */
math-depth: 4;

/* グローバル値 */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;

値

auto-add

継承された math-style が compact の場合、継承された math-depth に 1 を足した値を設定します。

add(<integer>)

継承された math-depth に指定した整数を足した値に設定します。

<integer>

指定された整数に設定します。

公式定義

初期値0
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

math-depth = 
  auto-add          |
  add( <integer> )  |
  <integer>

例

数式の深さの指定

以下の例では、math-depthプロパティを変更したときのサブ数式のフォントサイズへの影響を示しています。 各サブ数式の数字は適用された math-depth と拡大率を示しています。

最初の <mtext> 要素は他のサブ数式への参照として使用され、特定のスタイルは適用されていません。 2番目と3番目のサブ数式は math-depth が auto-add に設定され、math-style に応じた倍率の効果が表示されます。

最後の2つのサブ数式は、 math-depth を特定の値に設定した場合の効果を示しています。

HTML

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>

結果

仕様書

Specification
MathML Core
# the-math-script-level-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報