math-styleプロパティは何に使用されますか？

math-styleプロパティは、MathML数式の論理的な高さを制御するために使用されます。normalとcompactの2つの値があり、数式をコンパクトに表示するかどうかを指定できます。

math-styleの値にはどのような種類がありますか？

math-styleはnormal（通常の高さで表示）とcompact（コンパクトに表示）の2つの値を指定できます。デフォルト値はnormalです。

math-styleとmath-depthはどのように連携しますか？

math-styleがcompactの場合、math-depth: auto-addは継承されたmath-depthに1を加算します。これにより、分数や上付き・下付き文字などのネストされた要素のフォントサイズが自動的に縮小され、よりコンパクトな表示になります。

【CSS】math-styleプロパティの使い方 - MathML数式の表示スタイルを制御する方法

概要

CSSのmath-styleプロパティは、MathML（Mathematical Markup Language）数式の論理的な高さ、つまり数式をどれだけコンパクトに表示するかを制御するためのプロパティです。

数式を文章中に挿入する「インライン数式」と、独立した行に表示する「ディスプレイ数式」では、求められる表示形式が異なります。math-styleプロパティを使用することで、これらの表示形式を適切に制御できます。

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

基本的な使い方

`math-style`の基本構文

/* 通常表示（デフォルト） */
.element {
  math-style: normal;
}

/* コンパクト表示 */
.element {
  math-style: compact;
}

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

値の種類と説明

値	説明
`normal`	数式を通常の高さで表示します。分数は分子・分母が縦に積み重ねられ、上付き・下付き文字は適切な位置に配置されます。これがデフォルト値です
`compact`	数式をよりコンパクトに表示します。フォントサイズが縮小され、分数や添え字などの要素が省スペースで表示されます

normalとcompactの違い

math-styleのnormalとcompactの違いは、主に以下の点で現れます。

視覚的な違い

<!-- normal（通常表示） -->
<math style="math-style: normal;" display="block">
  <mfrac>
    <mrow>
      <mi>a</mi>
      <mo>+</mo>
      <mi>b</mi>
    </mrow>
    <mrow>
      <mi>c</mi>
      <mo>+</mo>
      <mi>d</mi>
    </mrow>
  </mfrac>
</math>

<!-- compact（コンパクト表示） -->
<math style="math-style: compact;" display="block">
  <mfrac>
    <mrow>
      <mi>a</mi>
      <mo>+</mo>
      <mi>b</mi>
    </mrow>
    <mrow>
      <mi>c</mi>
      <mo>+</mo>
      <mi>d</mi>
    </mrow>
  </mfrac>
</math>

/* normalスタイルの分数 */
.normal-fraction {
  math-style: normal;
  /* 分子・分母が大きく表示される */
  /* 行間に余裕がある表示 */
}

/* compactスタイルの分数 */
.compact-fraction {
  math-style: compact;
  /* 分子・分母が縮小される */
  /* 省スペースな表示 */
}

用途の違い

スタイル	主な用途
`normal`	ディスプレイ数式（独立した行に表示する数式）、数式が主役のコンテンツ
`compact`	インライン数式（文章中に埋め込む数式）、スペースが限られた場所

math-styleとmath-depthの連携

math-styleプロパティはmath-depthプロパティと密接に連携します。特にmath-depth: auto-addを使用する場合、math-styleの値によって動作が変わります。

auto-addの動作

/* math-style: normalの場合 */
.normal-style {
  math-style: normal;
}
/* → math-depth: auto-add では深さは増加しない */

/* math-style: compactの場合 */
.compact-style {
  math-style: compact;
}
/* → math-depth: auto-add で深さが1増加し、フォントサイズが縮小される */

実践的な例

/* ディスプレイ数式とインライン数式で異なるスタイルを適用 */
.math-container {
  font-family: 'STIX Two Math', 'Cambria Math', serif;
}

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

/* インライン数式（コンパクトに表示） */
.math-container math:not([display="block"]) {
  math-style: compact; /* コンパクト表示 */
  font-size: math;     /* math-depthに基づくサイズ調整 */
}

使用例

基本的な使用例 - インライン数式とディスプレイ数式

以下の例では、同じ数式をnormalとcompactで表示した場合の違いを示します。

<p>
  文章中のインライン数式は
  <math style="math-style: compact;">
    <mfrac>
      <mi>x</mi>
      <mi>y</mi>
    </mfrac>
  </math>
  のようにコンパクトに表示されます。
</p>

<p>独立したディスプレイ数式は以下のように表示されます：</p>

<math style="math-style: normal;" display="block">
  <mfrac>
    <mi>x</mi>
    <mi>y</mi>
  </mfrac>
</math>

分数のネストにおける表示

/* ネストした分数での使用例 */
.nested-fraction-normal {
  math-style: normal;
}

.nested-fraction-compact {
  math-style: compact;
}

<!-- 通常表示のネストした分数 -->
<math class="nested-fraction-normal" display="block">
  <mfrac>
    <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mfrac>
        <mn>1</mn>
        <mi>x</mi>
      </mfrac>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>+</mo>
      <mfrac>
        <mn>1</mn>
        <mi>y</mi>
      </mfrac>
    </mrow>
  </mfrac>
</math>

<!-- コンパクト表示のネストした分数 -->
<math class="nested-fraction-compact" display="block">
  <mfrac>
    <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mfrac>
        <mn>1</mn>
        <mi>x</mi>
      </mfrac>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>+</mo>
      <mfrac>
        <mn>1</mn>
        <mi>y</mi>
      </mfrac>
    </mrow>
  </mfrac>
</math>

上付き・下付き文字での使用

<!-- 上付き文字と下付き文字 -->
<math display="block">
  <msubsup>
    <mi>x</mi>
    <mi>i</mi>
    <mn>2</mn>
  </msubsup>
</math>

/* 上付き・下付き文字のスタイル制御 */
.math-container msup,
.math-container msub,
.math-container msubsup {
  math-style: compact; /* 添え字をコンパクトに */
}

総和・積分記号での使用

/* 総和記号のスタイル */
.display-sum {
  math-style: normal; /* 上下に添え字を配置 */
}

.inline-sum {
  math-style: compact; /* 添え字を右側に配置 */
}

<!-- ディスプレイスタイルの総和 -->
<math class="display-sum" display="block">
  <munderover>
    <mo>&#x2211;</mo>  <!-- 総和記号 -->
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <msub>
    <mi>a</mi>
    <mi>i</mi>
  </msub>
</math>

<!-- インラインスタイルの総和 -->
<p>
  総和
  <math class="inline-sum">
    <munderover>
      <mo>&#x2211;</mo>
      <mrow>
        <mi>i</mi>
        <mo>=</mo>
        <mn>1</mn>
      </mrow>
      <mi>n</mi>
    </munderover>
    <msub>
      <mi>a</mi>
      <mi>i</mi>
    </msub>
  </math>
  の計算
</p>

実践的な活用例

数式ドキュメントのスタイル設定

/* 数式ドキュメント全体のスタイル設定 */
.math-document {
  font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', serif;
  font-size: 16px;
  line-height: 1.8;
}

/* ディスプレイ数式 */
.math-document math[display="block"] {
  display: block;
  margin: 1.5em 0;
  text-align: center;
  math-style: normal;
  font-size: math;
}

/* インライン数式 */
.math-document math:not([display="block"]) {
  math-style: compact;
  font-size: math;
}

/* 定理や証明内の数式 */
.theorem math,
.proof math {
  math-style: normal;
}

レスポンシブ対応

/* デフォルト（モバイル）はコンパクト表示 */
.responsive-math math[display="block"] {
  math-style: compact;
}

/* タブレット以上では通常表示 */
@media (min-width: 768px) {
  .responsive-math math[display="block"] {
    math-style: normal;
  }
}

印刷用スタイル

/* 画面表示 */
.print-math math {
  math-style: compact;
}

/* 印刷時は見やすく */
@media print {
  .print-math math {
    math-style: normal;
    font-size: 12pt;
  }
}

ブラウザ対応状況

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

ブラウザ	サポート状況
Chrome	109以降
Firefox	83以降
Safari	14.1以降
Edge	109以降

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

よくある問題と対策

表示スタイルが変わらない場合

MathMLが正しくサポートされていない環境では、math-styleが効かない場合があります。

<!-- 解決策1: display属性を確認 -->
<math display="block">
  <!-- display="block"でディスプレイ数式として扱われる -->
</math>

<!-- 解決策2: ポリフィルを使用 -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

インライン数式の行間への影響

インライン数式が行間を崩す場合の対策です。

/* 行間を維持しながらインライン数式を表示 */
.text-with-math {
  line-height: 1.8;
}

.text-with-math math {
  math-style: compact;
  vertical-align: middle;
}

compactスタイルで文字が小さすぎる場合

/* 最小フォントサイズを保証 */
.math-container math {
  math-style: compact;
}

.math-container math * {
  min-font-size: 10px; /* 最小10pxを保証 */
}

特定の要素だけスタイルを変更したい場合

/* 基本はcompact */
.mixed-style math {
  math-style: compact;
}

/* 分数だけは通常表示 */
.mixed-style math mfrac {
  math-style: normal;
}

まとめ

math-styleプロパティは、MathML数式の表示スタイルを制御するための重要なCSSプロパティです。normalとcompactの2つの値を使い分けることで、数式の表示形式を適切に制御できます。

主なポイント:

normalは通常の高さで表示し、ディスプレイ数式に適しています
compactはコンパクトに表示し、インライン数式や省スペースが必要な場面に適しています
math-depth: auto-addと連携し、compactの場合は自動的にフォントサイズが縮小されます
font-size: mathと組み合わせることで、より細かいサイズ制御が可能です
レスポンシブデザインや印刷用スタイルにも活用できます

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

参考文献

math-style - CSS | MDN - MDNによる公式ドキュメント
MathML Core - W3C - MathML Core仕様書
math-depth - CSS | MDN - 関連プロパティmath-depthの解説

概要