- 数式がAndroidで見たときだけおかしくなっていた
- 配置が崩れているのではなく、文字がゴシック体になったりしている
- フォントを明示的に設定していないので、OSにあるフォントで表示しようとしているのかも？
- KaTeXのCSSが上手くやってくれているのかと思っていたけど、こちらはローカルにあるフォントを参照しようとするみたい
- 改めて、数式用のフォントを設定してみる
- 以下のようにHTMLの
<head>内でCDNのフォントを読み込む
<link href="https://fonts.cdnfonts.com/css/latin-modern-math" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/stix-two-math" rel="stylesheet">
- 以下のようにCSSで
<math>以下で使用するフォントを指定する
- 何かあったときのために別のフォントも指定しておく
- Cambria MathはWindows標準搭載のもの
math {
font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", "Noto Sans Math", serif;
}
- ついでに、KaTeXのCSSを使わないようにしてみた
displaystyle
- ブロックでもインラインのように積分記号が小さくなってしまう
\displaystyleを付けると解消されるが、手動ですべてに付けるのは面倒
- 原因が良くわからない
- KaTeXのドキュメントによれば、displayModeオプションで
\displaystyleが自動的に付与されるはず
- HugoのToMath関数のオプションは正常にKaTeXに伝わっている
- 仕方ないので、CSSで数式ブロックをdisplaystyleのスタイルに上書きする
- CSSで
math-style: normalを付けると\displaystyleを書いたときと同じようになる
- 数式ブロックだけ必ず
<mtable>で囲われるようなので、その違いを利用する