Documentation CSS

概要

CSSのmath-depthプロパティは、MathML（Mathematical Markup Language）数式における各要素の「深さ」を表すプロパティです。この深さは、数式のトップレベルコンテナ（<math>要素）からの相対的なネストレベルを示します。

math-depthはfont-size: mathと組み合わせることで、数式内の要素（分数、上付き・下付き文字、根号内など）のフォントサイズを自動的にスケーリングする仕組みを実現します。これにより、数学的な記法の慣例に従った、読みやすい数式表示が可能になります。

この記事では、math-depthの基本的な使い方から、math-styleとの連携、実践的な活用例まで詳しく解説します。

基本的な使い方

math-depthの基本構文

/* 自動加算（デフォルト） */
.element {
  math-depth: auto-add;
}

/* 相対値での指定 */
.element {
  math-depth: add(2);  /* 継承値に2を加算 */
  math-depth: add(-1); /* 継承値から1を減算 */
}

/* 絶対値での指定 */
.element {
  math-depth: 4; /* 深さを4に設定 */
}

/* グローバル値 */
.element {
  math-depth: inherit;
  math-depth: initial;
  math-depth: revert;
  math-depth: unset;
}

値の種類と説明

値説明
auto-add継承されたmath-styleがcompactの場合、継承されたmath-depthに1を加算します。それ以外の場合は継承値をそのまま使用します
add(<integer>)継承されたmath-depthに指定した整数値を加算します。負の値も指定可能です
<integer>math-depthを指定した整数値に直接設定します

math-depthとfont-size: mathの関係

math-depthプロパティ単体では視覚的な変化を生じません。font-size: mathと組み合わせることで、フォントサイズの自動スケーリングが実現します。

/* MathMLのデフォルトスタイル（ブラウザのUAスタイルシート） */
math {
  font-size: math; /* math-depthに基づいてフォントサイズを自動調整 */
}

スケーリングの仕組み

font-size: mathが適用されている場合、math-depthが1増加するごとにフォントサイズは約71%（正確にはscriptPercentScaleDownフォントメトリクス値）に縮小されます。

/* 深さごとのフォントサイズの例（基準サイズを16pxとした場合） */
/* math-depth: 0 → 16px（基準サイズ） */
/* math-depth: 1 → 約11.4px（16px × 0.71） */
/* math-depth: 2 → 約8.1px（16px × 0.71 × 0.71） */

使用例

基本的な使用例 - 分数のネスト

以下の例では、ネストした分数においてmath-depthがどのように機能するかを示します。

<math display="block">
  <!-- 外側の分数（math-depth: 0） -->
  <mfrac>
    <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <!-- 内側の分数（math-depth: 1） -->
      <mfrac>
        <mn>1</mn>
        <mi>x</mi>
      </mfrac>
    </mrow>
    <mn>2</mn>
  </mfrac>
</math>

この例では、内側の分数は自動的にmath-depthが増加し、フォントサイズが縮小されます。

カスタムスタイルでの使用

/* 特定のMathML要素でmath-depthを明示的に制御 */
.math-container math {
  font-size: 24px; /* 基準フォントサイズ */
}

/* 上付き・下付き文字で深さを増加 */
.math-container msup > :last-child,
.math-container msub > :last-child {
  math-depth: add(1); /* 深さを1増加 */
}

/* 特定の要素で深さをリセット */
.math-container .reset-depth {
  math-depth: 0; /* 深さを0にリセット */
}

math-styleとの連携

math-depth: auto-addはmath-styleプロパティと連携して動作します。

/* 通常表示（normalスタイル） */
.normal-math {
  math-style: normal;
}
/* → auto-addでは深さは増加しない */

/* コンパクト表示（compactスタイル） */
.compact-math {
  math-style: compact;
}
/* → auto-addで深さが1増加し、フォントサイズが縮小 */
<!-- 通常表示の数式 -->
<math class="normal-math" display="block">
  <mfrac>
    <mi>a</mi>
    <mi>b</mi>
  </mfrac>
</math>

<!-- コンパクト表示の数式 -->
<math class="compact-math" display="block">
  <mfrac>
    <mi>a</mi>
    <mi>b</mi>
  </mfrac>
</math>

scriptlevel属性との対応

MathMLのscriptlevel属性は、math-depthプロパティのプレゼンテーション属性として機能します。

<!-- scriptlevel属性を使用した例 -->
<math display="block">
  <mrow>
    <!-- 深さを明示的に指定 -->
    <mrow scriptlevel="2">
      <mi>x</mi>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>
  </mrow>
</math>
<!-- 相対的な深さの指定 -->
<math display="block">
  <mrow>
    <!-- 現在の深さに1を加算 -->
    <mrow scriptlevel="+1">
      <mi>smaller</mi>
    </mrow>
    <!-- 現在の深さから1を減算 -->
    <mrow scriptlevel="-1">
      <mi>larger</mi>
    </mrow>
  </mrow>
</math>

実践的な活用例

数式エディタでの使用

数式エディタやドキュメントシステムで、一貫した数式表示を実現するための設定例です。

/* 数式コンテナの基本設定 */
.equation-container {
  font-family: 'STIX Two Math', 'Cambria Math', serif;
  font-size: 18px;
}

/* ディスプレイ数式（大きく表示） */
.equation-container math[display="block"] {
  font-size: math;
  math-style: normal; /* 通常サイズで表示 */
}

/* インライン数式（テキストに馴染むサイズ） */
.equation-container math:not([display="block"]) {
  font-size: math;
  math-style: compact; /* コンパクトに表示 */
}

/* 深くネストした要素の最小フォントサイズを保証 */
.equation-container math * {
  min-font-size: 8px;
}

特定要素でのスケーリング制御

/* 極限記号の上下添え字 */
.math-container munder > :last-child,
.math-container mover > :last-child {
  math-depth: add(1); /* 深さを増加 */
}

/* 行列内のセルは深さを増加しない */
.math-container mtable mtd {
  math-depth: add(0); /* 深さを維持 */
}

/* 大きな演算子の添え字 */
.math-container mo[largeop="true"] ~ * {
  math-depth: add(1); /* 添え字のサイズを縮小 */
}

ブラウザ対応状況

math-depthプロパティはMathML Coreの一部として、主要なモダンブラウザでサポートされています。

ブラウザサポート状況
Chrome109以降
Firefox83以降
Safari14.1以降
Edge109以降

古いブラウザでは、MathML自体のサポートが限定的な場合があるため、MathJaxなどのポリフィルライブラリの使用を検討してください。

よくある問題と対策

フォントサイズが変化しない場合

math-depthを変更してもフォントサイズが変わらない場合は、font-size: mathが適用されているか確認してください。

/* 解決策: font-size: mathを明示的に指定 */
math {
  font-size: math; /* これがないとmath-depthは視覚的効果を持たない */
}

過度なスケーリングを防ぐ

深くネストした数式で文字が小さくなりすぎる問題を防ぐ方法です。

/* 最小フォントサイズを設定 */
math * {
  min-font-size: 10px;
}

/* または、特定の深さで固定 */
.deep-formula {
  math-depth: 2; /* これ以上深くならない */
}

継承の問題

math-depthは継承されるプロパティです。意図しない継承を防ぐには、明示的に値を設定してください。

/* 特定の要素で深さをリセット */
.math-reset {
  math-depth: 0;
  math-style: normal;
}

まとめ

math-depthプロパティは、MathML数式における要素のネストレベルを制御し、font-size: mathと組み合わせることでフォントサイズの自動スケーリングを実現する重要なCSSプロパティです。

主なポイント:

  • math-depthは数式要素の「深さ」を表し、トップレベルからの相対的なネストレベルを示します
  • auto-add、add(<integer>)、<integer>の3種類の値を使用できます
  • font-size: mathと組み合わせることで、深さに応じたフォントサイズの自動調整が可能です
  • math-style: compactとの連携により、コンパクトな数式表示を実現できます
  • MathMLのscriptlevel属性はmath-depthのプレゼンテーション属性として機能します

数学的なコンテンツを含むWebページやアプリケーションを開発する際に、math-depthを適切に活用することで、読みやすく美しい数式表示を実現できます。

参考文献

円