slides-mathjax
MathJax
beautiful mathematics on the web
Peter Krautzberger (MathJax)
What is MathJax for?
$$\frac{1}{2 \pi} \int_{-\pi}^\pi e^{i(n \tau - x \sin(\tau))} \,d\tau = \sum\limits_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + n + 1)}{\left({\frac{x}{2}}\right)}^{2 m + n}$$
Not that spectacular, right?But it is!
- high-quality typography
- using web standards
- on all browsers & platforms
- open source (Apache)
Why MathJax?
Enabling mathematics natively on the web
very short history of math on the web
- 1995: HTML 3 proposes <math> tag
-
1997: rejected with HTML 3.2
- XML/modularization
- 1998: MathML
-
Early 2000s:
- MathPlayer for IE
- Mozilla/Firefox with (some) MathML support
- 2014: Firefox with good MathML support, Safari with basic support
The other side
- Images
- Images
- Images
- 2004: jsmath, asciimathml
- 2009: MathJax, jqmath
Native mathematical rendering means...
- Actual (text) layout
- Reflow (example)
-
Interactivity (click me!)
- $\require{action} \toggle{\frac{1}{2}+\frac{1}{3}}{\frac{1\cdot 3}{2\cdot 3}+\frac{1\cdot 2}{3 \cdot 2}}{\frac{3+2}{6}}\endtoggle$
- Accessibility (MathPlayer, ChromeVox)
How does MathJax work?
-
JavaScript
-
client-side
- asynchronous
- modular
Format agnostic
- Input: TeX, MathML, Asciimath
- Ouput: HTML-CSS, SVG, MathML
- internally: XML/MathML
High quality layout
- TeX layout algorithm
- CSS inheritance, webfonts, em/ex matching
- Some examples:
Rich APIs
One line for easy setup, rich APIs for developer needs.
More examples:
- live (math) editing: OERpub editor
- interactive learning: Numbas
- web and mobile apps: xcas
- more at mathjax.org