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

math-shiftプロパティは、MathML数式における上付き文字（superscript）の垂直位置を制御するために使用されます。normalとcompactの2つのモードで、上付き文字の高さを調整できます。

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

math-shiftはnormal（通常の高さ）とcompact（低い位置、cramped mode）の2種類の値を指定できます。

math-shiftのcompactはどのような場合に使用されますか？

compactモードは、平方根の根号の下など、限られたスペースに上付き文字を収める必要がある場合に使用されます。これはLaTeXのcramped modeに相当します。

【CSS】math-shiftプロパティの使い方 - MathML数式の上付き文字の位置を制御する方法

概要

CSSのmath-shiftプロパティは、MathML（Mathematical Markup Language）数式における上付き文字（superscript）の垂直位置を制御するプロパティです。

数学的な表記において、上付き文字の位置は文脈によって異なることがあります。例えば、通常の指数表記では上付き文字は高い位置に配置されますが、平方根の中など限られたスペースでは、より低い位置（cramped mode）に配置される場合があります。math-shiftプロパティを使用することで、この垂直位置の調整を明示的に制御できます。

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

基本的な使い方

`math-shift`の基本構文

/* キーワード値 */
/* 通常の高さで上付き文字を表示 */
.normal-shift {
  math-shift: normal;
}

/* コンパクト（低い位置）で上付き文字を表示 */
.compact-shift {
  math-shift: compact;
}

/* グローバル値 */
.element {
  math-shift: inherit;  /* 親要素から継承 */
  math-shift: initial;  /* 初期値（normal）に設定 */
  math-shift: revert;   /* ブラウザのデフォルトに戻す */
  math-shift: unset;    /* 継承またはデフォルト値を使用 */
}

値の種類と説明

値	説明
`normal`	初期値。通常の上付き文字の位置を使用します。OpenType MATHテーブルの`superscriptShiftUp`パラメータを参照します
`compact`	コンパクトな上付き文字の位置を使用します。OpenType MATHテーブルの`superscriptShiftUpCramped`パラメータを参照し、通常より低い位置に配置されます

形式的な定義

プロパティ	値
初期値	`normal`
適用対象	すべての要素
継承	あり
計算値	指定された値
アニメーション	不可

normalとcompactの違い

math-shiftのnormalとcompactの違いを理解するために、具体的な例を見てみましょう。

視覚的な比較

<!-- 通常のシフト（normal） -->
<math>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

<!-- コンパクトなシフト（compact） -->
<math class="cramped">
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

/* 通常の上付き文字位置 */
math {
  font-size: 48pt;
  math-shift: normal;
}

/* コンパクトな上付き文字位置 */
math.cramped {
  math-shift: compact;
}

compactを使用すると、上付き文字の「2」がnormalに比べてやや低い位置に配置されます。

なぜ2つのモードが必要なのか

数学的な組版において、上付き文字の位置を文脈によって変える必要があるケースがあります。

通常の指数表記: 上付き文字は高い位置に配置し、読みやすさを確保
根号内や分数内: スペースが限られるため、上付き文字を低めに配置してはみ出しを防ぐ

これはLaTeXでは「cramped mode」（圧縮モード）と呼ばれる概念に相当します。

使用例

基本的な使用例 - 指数表記

<math display="block">
  <!-- 通常の指数 -->
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <mo>+</mo>
  <!-- コンパクトな指数 -->
  <msup class="compact">
    <mi>y</mi>
    <mn>3</mn>
  </msup>
</math>

/* 基本スタイル */
math {
  font-size: 32px;
  font-family: 'STIX Two Math', 'Cambria Math', serif;
}

/* 通常モード（デフォルト） */
math msup {
  math-shift: normal;
}

/* コンパクトモード */
math msup.compact {
  math-shift: compact;
}

平方根内での使用

平方根の中では、上付き文字を低い位置に配置することで、根号線との重なりを避けることができます。

<math display="block">
  <!-- 平方根内の指数 -->
  <msqrt>
    <msup>
      <mi>a</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <msup>
      <mi>b</mi>
      <mn>2</mn>
    </msup>
  </msqrt>
</math>

/* 平方根内はcompactモードを使用 */
math msqrt {
  math-shift: compact;
}

分数との組み合わせ

分数内の上付き文字も、スペースを効率的に使うためにcompactモードが有効です。

<math display="block">
  <mfrac>
    <msup>
      <mi>x</mi>
      <mn>n</mn>
    </msup>
    <msup>
      <mi>y</mi>
      <mn>m</mn>
    </msup>
  </mfrac>
</math>

/* 分数内の要素はcompactモードを使用 */
math mfrac > * {
  math-shift: compact;
}

実践的な活用例

数式エディタでの一貫した表示

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

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

/* ディスプレイ数式（通常モード） */
.equation-container math[display="block"] {
  math-shift: normal;
}

/* インライン数式や限られたスペースではcompact */
.equation-container math:not([display="block"]) {
  math-shift: compact;
}

/* 根号内は常にcompact */
.equation-container math msqrt,
.equation-container math mroot {
  math-shift: compact;
}

文脈に応じた自動切り替え

/* 基本は通常モード */
math {
  math-shift: normal;
}

/* 以下の要素内ではcompactモードに自動切り替え */
/* 平方根 */
math msqrt > *,
math mroot > * {
  math-shift: compact;
}

/* 分数の分子・分母 */
math mfrac > * {
  math-shift: compact;
}

/* 上付き・下付きの添字 */
math msubsup > :nth-child(2),
math msubsup > :nth-child(3) {
  math-shift: compact;
}

math-depthとの連携

math-shiftはmath-depthプロパティと組み合わせることで、より洗練された数式表示を実現できます。

/* 深いネストレベルではcompactモードを使用 */
math {
  font-size: math;
  math-shift: normal;
}

/* math-depthが増加した要素ではcompact */
math [style*="math-depth"] {
  math-shift: compact;
}

/* または明示的に設定 */
.deep-nested {
  math-depth: add(1);
  math-shift: compact;
}

ブラウザ対応状況

math-shiftプロパティは2025年12月に主要ブラウザで利用可能になりました（Baseline 2025）。

ブラウザ	サポート状況
Chrome	138以降
Firefox	146以降
Safari	18.3以降
Edge	138以降

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

よくある問題と対策

上付き文字の位置が変わらない場合

math-shiftを変更しても視覚的な変化がない場合は、以下を確認してください。

/* 1. 数学フォントが正しく読み込まれているか確認 */
math {
  /* OpenType MATH tableを持つフォントが必要 */
  font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', serif;
}

/* 2. フォントサイズが十分に大きいか確認 */
math {
  /* 小さいフォントサイズでは差が見えにくい */
  font-size: 24px;
}

OpenType MATHテーブル対応フォント

math-shiftが正しく機能するためには、OpenType MATHテーブルを持つフォントが必要です。

/* 推奨される数学フォント */
math {
  font-family:
    'STIX Two Math',      /* オープンソースの数学フォント */
    'Cambria Math',       /* Windows標準 */
    'Latin Modern Math',  /* LaTeX由来 */
    'Libertinus Math',    /* オープンソース */
    serif;
}

継承の問題

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

/* 特定の要素でモードをリセット */
.math-normal {
  math-shift: normal;
}

/* 特定の要素でcompactを強制 */
.math-compact {
  math-shift: compact;
}

プロパティ	説明
`math-depth`	数式要素の深さを制御し、フォントサイズの自動スケーリングに影響
`math-style`	数式の表示スタイル（normalまたはcompact）を制御
`font-size: math`	math-depthに基づいてフォントサイズを自動調整

まとめ

math-shiftプロパティは、MathML数式における上付き文字の垂直位置を制御する重要なCSSプロパティです。

主なポイント:

math-shiftは上付き文字（superscript）の垂直位置をnormalまたはcompactで制御します
normalは通常の高さ、compactはより低い位置（cramped mode）に配置します
平方根内や分数内など、限られたスペースではcompactが有効です
OpenType MATHテーブルを持つ数学フォントと組み合わせることで正しく機能します
math-depthやmath-styleと連携して、より洗練された数式表示を実現できます

数学的なコンテンツを含むWebページやアプリケーションを開発する際に、math-shiftを適切に活用することで、LaTeXのような高品質な数式表示を実現できます。

参考文献

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

概要