MathMLの指数や添字が小さくならない時の確認事項

2024/03/21

MathMLで指数なのに底と同じサイズ

数式を書くためのMathMLですが、ブログでMathMLを使って指数を使った数式を書こうとして思い通りの表示にならなかった時がありました。それもそのはず、という原因があったのですが、初め分からなかったので、いつかこの記事が誰かの役に立つものと思ってシェアしたいと思います。

どういうことかと言うと、数式で右肩に指数を乗せる時に使うmsupや右下に添字を書く時に使うmsubが、どちらも何階層目でも元の文字と同じ大きさだったのです。HTMLの動作をシミュレーションしてくれるcodepenで同じ状況を作って画像を貼ります(もう直してしまったので)。

2の右上に2が置かれ、その右上にまた2が置かれた画像。全ての2が同じ大きさで表示されている。

指数なのに底と同じ大きさで表示されてしまう。

普通にMathMLで書けば、次の様に指数は底より小さくなっていくはずです。

2の右上に2が置かれ、その右上にまた2が置かれた画像。右上のものほど小さく表示されている。

本来想定される表示。指数は底より少し小さくなる。

初期化CSSに原因が有った

どうしたら良いのか分からず途方に暮れました。CSSのfont-sizeを使って大きさを整える方法も考えたのですが、そうすると元々のスタイルを壊してしまいそうです。何よりも、本来はブラウザがやってくれるはずの事をわざわざ誤ったスタイルの指定で破壊して、その上にさらにそれを修正するためのスタイルを書き込むのは無駄です。

その後、何かテーマの既存のCSSでfont-sizeを指定しているところは無いのか調べようと考えた時、解決に至る道筋が見えました。

これで解決

原因はアスタリスク(*)で全要素のサイズを100%に指定していた事でした。次の様なCSSが記載されていました。

*{
  font-size: 100%;
}

ブログのテーマに使われていた初期化CSSというものの部分にこの無意味な指定が有りました。こんなふうに書いてしまったら、指数や添字として描かれるMathMLの要素も全てfont-size: 100%で表示されてしまいます。不必要な記述だと思いましたので消しました。それで何の問題も無かったです。

同じ様な効果は、本来HTMLの1番上の要素のbodyにするものかと思います。次の記述であれば、MathMLを邪魔しません。ただし、通常ブラウザはとりあえず何も指定がなければ文字を100%のサイズで表示するでしょうから、これもそもそも必要ない記述の様に思えます。過去はこれで表示が変わったんでしょうか。

body{
  font-size: 100%;
}

なお、styleタグで同じ状況を再現した時のソースコードと、どう表示されるかを置いておきます。効果が見やすい様に、文字は大きな2emにしてあります。まずは普通に書いた場合。

<math display="block" style="font-size:2em"><msup><mn>2</mn><mrow><msup><mn>2</mn><mn>2</mn></msup></mrow></msup></math>

あなたのブラウザでの表示はこちらです。

2^{2^{2}}

続いて同じものを、*{font-size: 100%}を指定してしまった状態でどうなるか見てみます。

<math display="block" class="asterisk" style="font-size:2em"><msup><mn>2</mn><mrow><msup><mn>2</mn><mn>2</mn></msup></mrow></msup></math>

<style>math.asterisk * {font-size: 100%}</style>

あなたのブラウザでの表示はこちらです。