Home | Math Display Experiments | Using MathJax fonts outside of MathJax
Using KaTeX (and MathJax) fonts outside of KaTeX (and MathJax). Processor: MathJax
Page last updated: 22 Sep 2019.
Overview
Some time ago I converted all math images on IntMath to MathJax, and subsequently to KaTeX.
Rather than converting the thousands of remaining sundry math snippets (which used italics, subscripts, superscripts or a CSS class) to MathJax/KaTeX (which would take forever), I've styled them to look like KaTeX output so everything looks more consistent.
I made this page so I can easily compare (and fix) styled math snippets with MathJax or KaTeX fonts, or full output.
The gray horizontal lines enclose the height of letters a, c, e, m, n, etc when using Arial at 1em font-size. (You can remove those lines using the button.) The word "Baseline" is there for aligning the (you guessed it) baseline.
CSS
@font-face{font-family:MathJax_Math; src:url('/includes/cssjs/katex/fonts/MathJax_Math.woff2') format('woff');
font-weight:400;
font-style:italic}
@font-face{font-family:MathJax_Math; src:url('/includes/cssjs/katex/fonts/MathJax_Math-Italic.woff2') format('woff');
font-weight:400;
font-style:italic}
@font-face{font-family:MathJax_Main; src:url('/includes/cssjs/katex/fonts/MathJax_Main-Regular.woff2') format('woff');
font-weight:400;
font-style:normal}
@font-face{font-family:MathJax_Main; src:url('/includes/cssjs/katex/fonts/MathJax_Main-Italic.woff2') format('woff');
font-weight:400;
font-style:italic}sup,sub,.intmath{font-family:MathJax_Main,"Times New Roman",Times,serif}
i,em{font-family:MathJax_Math,"Times New Roman",Times,serif;font-style:normal}
.intmath{white-space:nowrap}
.intmathItalic{font-family:MathJax_Math,"Times New Roman",Times,serif}
sup, sub{font-size:0.8em}
.intmath, .intmathItalic{font-size:1.15em}
.intmath sup, .intmath sub, .intmathItalic sup, .intmathItalic sub{font-size:0.7em}
i, em{font-size:1.15em}
.intmath i, .intmath em{font-size:1em}
#content sup{margin-left:1px}
Comparison Table
Process with KaTex Processed by MathJax
| HTML tags using class "intmath" (with MathJax fonts) |
Processed by MathJax |
|---|---|
Baseline a2 sin(θ) + b2 ≡ c2 |
Baseline `a^(2sin(theta))+b^2-=c^2` |
Baseline x2 + y3 = sin θ |
Baseline `x^2+y^3=sin theta` |
Baseline x = 0 to x = π |
Baseline `x=0` to `x=pi` |
Baseline (1 − cos2 α) = sin2 α |
Baseline `(1-cos^2 alpha)` `=sin^2 alpha` |
Baseline sin2 θ + cos2 θ = 1 |
Baseline `sin^2 theta + cos^2 theta=1` |
Baseline As x → −∞, dy/dx → 1 |
Baseline As `x-> -oo`, `dy//dx -> 1` |
Baseline ∫ dy = ∫ 1 dy |
Baseline `int dy = int1 dy` |
Baseline f(x) = (5x + 7θ)b = 7 |
Baseline `f(x)` `=(5^x+7^theta)^b=7` |
Baseline f(x) = x2, so f′(3) = 6 |
Baseline `f(x)=x^2`, so `f'(3)=6` |
Baseline θ = 15○ |
Baseline `theta=15^@` |
Baseline y = x1/2 |
Baseline `y=x^(1//2)` |
Baseline P(t) = pQ |
Baseline `P(t)=pQ` |
| (uses <p class="intmath"> ...</span> a1/n × a1/n ... × a1/n = a | Baseline `a^(1//n)xxa^(1//n)...` `xxa^(1//n) = a` |
Baseline (x1, y1) and (x2, y2) |
Baseline `(x_1,y_1)` and `(x_2,y_2)` |
(This one uses "intmathItalic" class. There is no need to add <i>, <em> tags for math symbols.) |
Baseline `F(θ + q_0) = 5αζx^2` |
(This one uses <i> and <em> only - not "intmath" class) |
Baseline The `x`- and `y`-intercepts ... |
(This uses <i>, <em>, <sub> and <sup> - not "intmath" class) |
Baseline Find `x_1+y^5=sqrt(sigma)` |
Capitals and numbers
The first one in each group is a capital letter using default font (Arial), the second is italic, and the third is MathJax:
A A `A` B B `B` C C `C` D D `D` K K `K` P P `P` Q Q `Q` R R `R` X X `X` Y Y `Y` Z Z `Z`
The first number in each group uses default font, and the second is MathJax:
0 `0` 1 `1` 5 `5` 7 `7` 8 `8` 9 `9`
Font sizes and readability
Occasionally, odd things happen at different pixel sizes. The following table shows how the math looks for a range of font sizes.
Some observations:
- Using KaTeX fonts, the spacing of the dots of the divide sign is strange at smaller font sizes (it's OK with MathJax fonts)
- Using KaTeX fonts, minus sign is too thin for some font sizes (less than 16.5px), and almost disappears (it's OK with MathJax fonts)
- Sometimes the fraction lines disappear in KaTeX rendering at certain font sizes and certain browsers
Currently: MathJax fonts, MathJax rendering
NOTE
- "1em" by default is 16px on most browsers.
- IntMath uses 1em for main page fonts and 1.15em for the .katex and .intmath classes.
| Page font em | Page font px | MathJax font 1.15em | MathJax font px | HTML (<em>, <sup>, etc) | MathJax |
|---|---|---|---|---|---|
| 0.87500 | 14.0 | 1.00625 | 16.100 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.88125 | 14.1 | 1.01344 | 16.215 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.88750 | 14.2 | 1.02063 | 16.330 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.89375 | 14.3 | 1.02781 | 16.445 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.90000 | 14.4 | 1.03500 | 16.560 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.90625 | 14.5 | 1.04219 | 16.675 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.91250 | 14.6 | 1.04938 | 16.790 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.91875 | 14.7 | 1.05656 | 16.905 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.92500 | 14.8 | 1.06375 | 17.020 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.93125 | 14.9 | 1.07094 | 17.135 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.93750 | 15.0 | 1.07813 | 17.250 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.94375 | 15.1 | 1.08531 | 17.365 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.95000 | 15.2 | 1.09250 | 17.480 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.95625 | 15.3 | 1.09969 | 17.595 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.96250 | 15.4 | 1.10688 | 17.710 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.96875 | 15.5 | 1.11406 | 17.825 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.97500 | 15.6 | 1.12125 | 17.940 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.98125 | 15.7 | 1.12844 | 18.055 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.98750 | 15.8 | 1.13563 | 18.170 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.99375 | 15.9 | 1.14281 | 18.285 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.00000 | 16.0 | 1.15000 | 18.400 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.00625 | 16.1 | 1.15719 | 18.515 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.01250 | 16.2 | 1.16438 | 18.630 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.01875 | 16.3 | 1.17156 | 18.745 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.02500 | 16.4 | 1.17875 | 18.860 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.03125 | 16.5 | 1.18594 | 18.975 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.03750 | 16.6 | 1.19313 | 19.090 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.04375 | 16.7 | 1.20031 | 19.205 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.05000 | 16.8 | 1.20750 | 19.320 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.05625 | 16.9 | 1.21469 | 19.435 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.06250 | 17.0 | 1.22188 | 19.550 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.06875 | 17.1 | 1.22906 | 19.665 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.07500 | 17.2 | 1.23625 | 19.780 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.08125 | 17.3 | 1.24344 | 19.895 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.08750 | 17.4 | 1.25063 | 20.010 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.09375 | 17.5 | 1.25781 | 20.125 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.10000 | 17.6 | 1.26500 | 20.240 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.10625 | 17.7 | 1.27219 | 20.355 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.11250 | 17.8 | 1.27938 | 20.470 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.11875 | 17.9 | 1.28656 | 20.585 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.12500 | 18.0 | 1.29375 | 20.700 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
Simple decimal products of em
This shows simple em products with the resulting pixel sizes.
| Page font em | Page font px | MathJax font 1.15em | MathJax font px | HTML (<em>, <sup>, etc) | MathJax |
|---|---|---|---|---|---|
| 0.70 | 11.2 | 0.80500 | 12.880 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.75 | 12.0 | 0.86250 | 13.800 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.80 | 12.8 | 0.92000 | 14.720 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.85 | 13.6 | 0.97750 | 15.640 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.90 | 14.4 | 1.03500 | 16.560 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 0.95 | 15.2 | 1.09250 | 17.480 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.00 | 16.0 | 1.15000 | 18.400 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.05 | 16.8 | 1.20750 | 19.320 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.10 | 17.6 | 1.26500 | 20.240 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.15 | 18.4 | 1.32250 | 21.160 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
| 1.20 | 19.2 | 1.38000 | 22.080 | [x2] = |6 ÷ 3 − 2| ≥ 0 | `(d(vec x))/dt = sqrt(3/(2r))` |
Process with KaTex Processed by MathJax