MathJax TIPS - You / がらくた数学

　覚え書きのページ。

設定を別ファイルにまとめたい

　いろいろな方法があるが、 window.MathJax にJSONを突っ込んでおくと、MathJaxの初期化時にそれを設定として取り込んでくれるので、 .js ファイルにして <script> で読み込んでしまうのが一番楽だと思われる。

Chromeで変な縦スクロールバーが出る

　積分など、派手に上下に飛び出す数式で起こる。縦スクロールバーが出てしまう要素にCSSで padding を設定する。

別立て数式の改行幅を変えたい

　いい方法は見つからなかったが、たとえば、

TeX: {
    Macros: {
        eol: '\\\\[0.5em]'
    }
}

といったマクロを設定し、\\の変わりに\eolと書けばよい。

数式に添えた注釈のフォントが気に入らない 23 Mar 2019

　TeX側では \hbox{...} で一時的に数式モードを抜ける。 MathJax側では mtextFontInherit を true に設定する。

マイクロが立体にならない 18 Apr 2019

　UTF-8にして全角で「μ」を突っ込む。これは通常U+039Cになり、UNICODE対応のフォントならばこれでマイクロ（というかミュー）が出る。あとはこれを \hbox で立体にする。シフトJISでうまくいくかどうかは知らない。

約分などの打ち消し線 18 Apr 2019

　 TeX: extensions: ["cancel.js"] として、 \cancel{...} とする。

CommonHTMLでスタイルを設定できない

　CSSクラス名 MJXc-display か mjx-chtml に設定すればよい。 Chromeの開発者モードでエレメントを調べると分かる。 HTML-CSSの場合は MathJax_Display クラス、SVGの場合は MathJax_SVG_Display クラスになる。

横幅が変わったときに数式番号が動いてくれない

　SVGで使っていると起きる現象。 MathJax Output Formats に書いてある。 CommonHTMLかHTML-CSSにすれば直る。 MathJax的にはCommonHTMLがお勧めだそうだ。

　これをマジで対策しようとすると、 onresize で数式番号が付いている部分をすべて再描画させることになる。 iOSなんかでは上端や下端にスクロールしてアドレスバーが出てきたときも、「縦幅が変わった」ことになって onresize が発生するので、数式番号が多いとすごくウザいことになる。 SVGを使う場合は数式番号は最低限にしておいた方がいい。 onresize で再描画しなければいけない要素に対して以下のコードをほどほどに実行する。

MathJax.Callback.Queue(function() {
    MathJax.Hub.Rerender(elem);
});

elem はエレメントリストにもできるので、リロードが必要な要素には同じクラスを付けておいて（IDは同じものが存在してはいけないのでクラスを使う）、 getElementsByClassName で一網打尽にすると楽。

　ほどほどに、と書いたのは、Chromeとかではマウスでウィンドウのサイズを変えている間中 onresize が発生するからで、 onresize のたびに再描画しているとウザいことこの上ない。また、MathJaxは非同期で動いているので、再描画中に再描画を指示してしまうとにっちもさっちもいかなくなる。 onresize のときに setTimeout かなんかを設定して、タイムアウトしたら再描画するようなコードを書いた方がよい。

動的に表示するコンテンツで数式番号が（ｒｙ

　リサイズの場合と同じ。

　SVGでレンダリングしてるなら実際に表示された時点で再レンダリングすると直る。ボタンが押されるとコンテンツが表示されるなら、ボタンが押されたときに onresize と同じコードを実行すればよい。この方法だと関係ないところまで再レンダリング起きちゃうけどまぁいいや。

こちらは実際に表示された時点でタイプセットすると直る。そのためには初期タイプセットを止める必要があって、 skipStartupTypeset: true を設定する必要がある。また、最初から見えてるコンテンツはロード時にタイプセットする必要があるのだが、MathJax本体のロードが終わっていないとタイプセットを指示しても空振りに終わるので、MathJax本体のロードが終わるまで待たなければならない。結局、onload時にこんなコードを実行することになる。

MathJax.Hub.Register.StartupHook('End', function () {
    MathJax.Callback.Queue(function() {
        MathJax.Hub.Typeset(elem);
    });
});

home / junkbox / mathjax MathJax TIPS

home / junkbox / smapho 参考にしたサイト