Web上で数式を表現するために (2)

ファイル load-mathjax.js によって，MathJax を設定して利用する方法について紹介する。
１年以上前から，ファイル load-mathjax.js を利用していたが， 一般の文字サイズと数式の文字サイズのバランスが良くなかった。 scale を使うことによってフォントサイズを縮小することができる。
これで英数字や数式はバランスが良くなったが， これでは数式だけでなく他の文字もすべて縮小される。
半角英数字のフォントにおいて，どのフォントを指定するかによって，MathJax を利用したときの数式や英数字のフォントサイズが違う。
そこで，scale を使ってフォントサイズを縮小するのは止めて， 数式を書く場面でのフォントファミリーを変更することでバランスをとることにした。
ファイル「load-mathjax.js」の内容は，以下のように修正した。（2025.9.30）

window.MathJax = {
chtml: {
mtextInheritFont: true,    ← 親要素で設定されたフォントが数式に継承される
matchFontHeight: false,    ← フォントの高さの自動調整を無効に設定
scale: 0.85    ← 追加（フォントサイズを85%に）
},
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],    ← 数式をインライン（行内）表示するための設定
processEscapes: true,    ← 数式外で $（ドルマーク）が使えるようにする設定
tags: 'ams'    ← 式番号を自動で振る
},
svg: {
fontCache: 'global', ← フォントデータをブラウザキャッシュに格納する設定
scale: 0.85    ← 追加（フォントサイズを85%に）
}
};

(function () {
const script = document.createElement('script');
if (navigator.userAgent.includes("Chrome") || navigator.userAgent.includes("Firefox"))
script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
else
script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js";
script.async = true;
document.head.appendChild(script);
})();

上記の設定では，AIの回答と「MathJax の使い方」のページを参考にした。

load-mathjax.js の数式フォントサイズを変更する設定

MathJax の使い方

MathJax を利用するために，HTMLファイルの headタグ内に以下のコードを記述する。
ただし，ファイル load-mathjax.js が，下位フォルダ js 内に置かれている設定になっている。
<script src="./js/load-mathjax.js" async ></script>

数式を書く場面では，本文全体またはブロックを次のように指定して，数式のサイズを調整することにした。

<body style="line-height: 150%;font-family:'Meiryo';margin:1em;">

～

</body>

bodyタグの代わりに，divタグで設定してもよい。