MathJaxでフォント設定が上書きされてしまう場合のCSSの確認事項

2024/04/14

MathJaxにしたのにブログのフォント設定で上書きされて表示される

数式を綺麗に書くためのMathJaxですが、ブログでMathJaxを使ってもMathJax本来のTeXフォントにならず、ブログのフォントで上書きされてしまった時のことと、解決策をシェアしていきたいと思います。今考えると当たり前の原因が有ったのですが、初め分からなかったので、いつかこの記事が誰かの役に立つことを願ってシェアしたいと思います。

HTMLの動作をシミュレーションしてくれるcodepenで同じ状況を作って画像を貼ります。

MathJaxで作った数式。数式の中でも、数字のフォントがブログのものと同じになってしまうし、ルートも綺麗につながらない。

本来の数式の画像はこの様になります。

何もフォント指定をしなかった場合の数式の画像。数式の中の数字が正しいフォントで表示されている。

文章に使いたいフォントが、MathJaxが吐き出した数式にまで使われてしまっています。本来の画像と見比べると、数字のフォントが変わっている事に加えて、±や≠の記号も変わっていると分かります。

font-familyの指定で解決

前回、MathMLを使っても添字が小さくならないという事を記事にしたのですが、それと同じ様な理由でした。MathJaxも同様、フォントを全称指定のアスタリスク(*)で指定してはいけなかったのです。フォントの指定をbodyにするだけで、直ります。

/*これはダメな例👇*/
* {font-family: "Avenir Next", ...}

/*この様に書く👇*/
body {font-family: "Avenir Next", ...}

この様にフォントの指定をbodyにする様に変えるだけで、MathJaxのフォントの崩れは直りました。この様な影響を受けるのはMathJaxをCommon HTML方式で利用した場合のみです。SVG方式を利用した場合は関係ありません。

数式は数式のフォントで、本文は本文のフォントで表示された状態。

*とbodyの違い

よく似た*とbodyの指定ですが、少し違いが有ります。*はHTML上の全ての要素に例外なくかかりますが、bodyでは一般的にフォームを作る要素のinputやtextarea、button等にはかかりません。HTMLの内容は基本的にページの著者が決めるものだと思いますが、フォームは読者(ユーザー)が記入する部分のため、ユーザーのデフォルトのスタイルが優先される様です。全称指定で装飾がかからない要素は次の通りだそうです。

input
select
textarea
button
kbd

もしもフォームなどにまでスタイルを当てたい場合、CSSでinheritを使えばいいそうです。例えばこの様な形です。実際このブログでもこの様にしています。もちろん、MathJaxを使っていても、これらの要素をHTML上で使っていない方は関係ありません。bodyにしたフォント指定が全要素にかかります。

body {font-family: "Avenir Next", "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;}
input, select, textarea, button, kbd {font-family: inherit;}

一見面倒くさそうですが、とにかくCSSはbodyにかけるのが基本なので*を無闇に使うのは控えましょう。事故の元です。

参考文献

Common HTMLとSVG

MathJaxにはCommon HTMLという方式とSVGと言う方式の二つがあります。Common HTMLの方は、webページの表示の際に使われるHTMLを使って数式を表示する方法です。SVGは画像を使う方法です。僕が試した範囲では表示時間には体感上あまり違いはありませんでした。違いを簡単にまとてみました。今回の様に、数式にもCSSの装飾がかかって乱れてしまう可能性があるのは、Common HTMLの方です。Common HTMLは文字を、SVGは画像を出していると考えてください。