Home | Math Display Experiments | Using MathJax fonts outside of MathJax

Using MathJax fonts outside of MathJax

Overview

I've recently converted all math images on IntMath to MathJax.

Rather than converting the thousands of remaining sundry math snippets (which used italics or a CSS class) to MathJax (which would take forever), I've styled them to look like MathJax output so everything looks more consistent.

This page allows easy browser comparisons of styled math snippets and MathJax output.

The gray horizontal lines enclose the height of letters a, c, e, m, n, etc when using Arial at 1em font-size.

CSS

@font-face{font-family:MathJax_Math-italic; src:url('/includes/cssjs/katex/fonts/KaTeX_Math-Italic.woff') format('woff')}
@font-face{font-family:MathJax_Main; src:url('/includes/cssjs/katex/fonts/KaTeX_Main-Regular.woff') format('woff')}
sup,sub{font-family:MathJax_Main,"Times New Roman",Times,serif;font-size:0.9em}
i,em{font-family:MathJax_Math-italic,"Times New Roman",Times,serif;font-size:1.2em;font-style:normal /* To stop double italic on MacOS */}
sup i, sup em, sub i, sub em{font-family:MathJax_Math-italic;font-size:1em}
i sup, i sub, em sup, em sub{font-family:MathJax_Math-italic;font-size:0.7em;font-style:normal /* To stop double italic on MacOS */}
.matrixfrac .mfrac{font-size:0.9em}
.intmath{font-family:MathJax_Main,"Times New Roman",Times,serif;white-space:nowrap;font-size:1.15em} 
.intmath i, .intmath em, .intmathItalic{font-family:MathJax_Math-italic;font-size:1em;font-style:normal /* To stop double italic on MacOS */}
.intmathItalic{font-size:1.15em;white-space:nowrap;}
.intmath sup, .intmath sub{font-size:0.7em}

Observations

  1. In Firefox, font sizes & baselines for math using the "intmath" class compared to MathJax output can be made very close and are basically equivalent.
  2. In Safari (on Windows) MathJax is slightly smaller than math which uses the "intmath" class. Also, the character spacing is very close (e.g. "cos" and "sin").
  3. In Chrome (on Windows) MathJax is slightly bigger than math using the "intmath" class, and its baseline is slightly higher by 1 or 2 pixels.
  4. On iPad Safari, MathJax looks great (good baseline, good size), while math using "intmath" class is 1px too high (baseline is good).
  5. Upper-case letters in MathJax_Main and MathJax_Math have a greater height than capitals using ordinary text.
  6. In Chrome, upper-case letter baselines are well-behaved when in zoom-in mode.

Comparison Table

Using class "intmath" Using MathJax

Baseline a2 + b2 = c2

Baseline `a^2+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`

Baseline (x1, y1) and (x2, y2)

Baseline `(x_1,y_1)` and `(x_2,y_2)`

(This one uses <i> and <em> only - not "intmath" class)
Baseline The x- and y-intercepts ...

Baseline The `x`- and `y`-intercepts ...

(This uses <i>, <em>, <sub> and <sup> - not "intmath" class)
Baseline Find x1 + y5 =

Baseline Find `x_1+y^5=`

Capitals

The first one in each group is a capital letter using default font, 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`

Search IntMath, blog and Forum