CSS - math-depth

• トップ
• CSSリファレンス
• math-depth

概要

説明

MathML における深さを制御します。深さとは例えば、分子/分母になると深さが 1 増します。分母がさらに分子/分母になると深さがさらに 1 増します。深くなるほどフォントサイズは小さくなります。

auto-add

math-style が compact の時、継承した値に 1 を加えます。

add(<integer>)

継承した値に <integer> を加えます。<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 を指定していますが、正直効果が分かりませんでした。誰か効果のあるサンプルを知ってる方が居れば教えてください。

リンク

• https://w3c.github.io/mathml-core/#the-math-script-level-property
• https://developer.mozilla.org/en-US/docs/Web/CSS/math-depth
• https://caniuse.com/mdn-css_properties_math-depth