math-style

Baseline 2023

Newly available

Since January 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

math-style プロパティは、 MathML の数式を通常の高さで表示するか、コンパクトな高さで表示するかを指定します。

構文

css
/* キーワード値 */
math-style: normal;
math-style: compact;

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

値

normal

初期値であり、通常のレンダリングを示します。

compact

子孫の数式のレイアウトの論理高を最小化しようとします。

公式定義

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

形式文法

math-style = 
  normal   |
  compact

例

数式のスタイルを compact に変更

CSS

css
math {
  math-style: normal;
}
.compact {
  math-style: compact;
}

HTML

html
<p>
  Normal height
  <math>
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  and compact height
  <math class="compact">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
    </mrow>
  </math>
  equations.
</p>

結果

仕様書

Specification
MathML Core
# the-math-style-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報