9 Tools to Display Math on Web

, , …,

MathJax for Web Publishing

MathJax. Home at: www.mathjax.org.

MathJax is a JavaScript library for displaying math in browsers.

You can use any of {MathML, LaTeX, ASCIIMathML} markup for input.

Here's a example of using it. Put the following in your HTML page.

<script defer src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

then, in your web page, you can enter this plain text:

$$
\Pr\left(\bigcup_i \Omega_i\right)=\sum_i \Pr(\Omega_i)=\sum_i\Pr(X=u_i)=1
$$

it'll display like this:

$$ \Pr\left(\bigcup_i \Omega_i\right)=\sum_i \Pr(\Omega_i)=\sum_i\Pr(X=u_i)=1 $$

if your math expression has any of {&, >, <} symbols, you need to put space on both sides of the symbol. Or, to be absolutely safe, change them to {&amp;, &gt;, &lt;}. 〔➤ HTML/XML Entities List

MathJax Examples

math formula MathJax
math formula rendered by MathJax

here's what your browser shows:

$$ \sum_{n=1}^k \frac{1}{n} ≻ \int_1^{k+1} \frac{1}{x} dx = \ln(k+1) $$
$$ \sum_{n = 0}^\infty \frac{(-1)^{n}}{2n+1} = 1 - \frac{1}{3} + \frac{1}{5} - \frac{1}{7} + \cdots = \frac{\pi}{4} $$
$$ \int_a^b \! f(x) dx = F(b) - F(a) $$
$$ f'(a)=\lim_{h\to 0}\frac{f(a+h)-f(a)}{h} $$
$$ \overline{(z/w)} = \bar{z}/\bar{w} $$
$$ \textstyle r=|z|=\sqrt{x^2+y^2} $$
$$ \begin{bmatrix} 1 & 2\\ 3 & 4\\ \end{bmatrix} \begin{bmatrix} 0 & 1\\ 0 & 0\\ \end{bmatrix}= \begin{bmatrix} 0 & 1\\ 0 & 3\\ \end{bmatrix} $$

right click on the formula to get its TeX input.

mathurl.com

http://mathurl.com/ is a very simple web site for creating math notations then you can point a URL to. You type LaTeX code, it displays the results as a image immediately as you edit. It also comes with a short perm URL that you can point to. You can come back to the URL later and edit the expression anytime.

List & Search Unicode Math Symbols

This page lists all math symbols and lets you search by name. Unicode: Math Symbols ∑ ∞ ∫ π ∈ ℝ²

Unicode Search

Detexify

Detexify is a tool that lets you draw a math symbol and it shows you the code for LaTeX. The tool is created by Daniel Kirsch at detexify.kirelabs.org

Creating Keyboard Layout for Inputing Math Symbols

You can actually create your own keyboard layout, so that the symbols you use most often can be readily typed. It might take a few hours to do, but isn't hard. See: How to Create a APL or Math Symbols Keyboard Layout ⌨

If you are a emacs user and live in emacs, it's even easier. See:

Mathematica

Of course, you can get Mathematica. Student or hobbyist can get it for ≈$300. This is the most robust, convient, powerful, professional, solution. (i'm a dedicated Mathematica fan)

For a example of its output, in PDF, HTML, MathML/XML, see: Math Typesetting, Mathematica, MathML.

Mathematica linear algebra screenshot
Mathematica linear algebra screenshot

Use Plain Mathematica Notation

Mathematica has a simple notation that's easy to learn, easy to read, and unambiguous. Here's the basics.

Examples:

Sum[1/n, {n,1,k}] ≻ Integrate[ 1/x ,{1,k+1}] = ln[k + 1]

Sum[ (-1)^n/(2*n + 1), {n, 0, ∞}] = 1 - 1/3 + 1/5 + 1/7 + … = π/4

Integrate[ f[x] ,{x,a,b}] = F[b] - F[a]

f'[a] = Limit[ (f[a+h]-f[a])/h,{h,0}]

Overbar[z/w] = Overbar[z]/Overbar[w]

r = Abs[z] = Sqrt[x^2+y^2]

{{1,2},{3,4}} * {{0,1},{0,0}} = {{0,1},{0,3}}

GNU TeXmacs

GNU TeXmacs. A word-processor-like program that renders 2D math formulas, using graphical user interface.

TeXmacs borrows ideas from TeX and Emacs but is not dependent on TeX nor Emacs.

FireMath, a MathML Editor for Firefox

FireMath is a MathML editor as a Firefox plugin. Home at www.firemath.info

Other

For a list of more, see: Formula editor.

Rant

The technology to display math notation on the web browser, is really dismal. MathML is released in 1998. Now, it is over 10 years, but it is still not widely supported in web browsers. Authors need to invest huge amount of time experimenting with several solutions, and in most cases, requires knowledge of HTML, CSS, XML, MathML, JavaScript, TeX, to various degrees. One early solution is to resort to some tool to turn math notations into images. This means, the browser needs to load a huge bunch of images, and the images are ugly, not scalable, cannot be copy and pasted. Images for math notation are still widely practiced today. Another solution requires readers to download some special plug-in. Another solution is to simply discard the web and use PDF instead.

In the past 10 years, huge amount of web technologies have developed, from blog to wiki to instant messaging to Twitter to interactive road maps to online videos to voice and video chats. Digital video is much more technically complex than math display system, but when it comes to math, sadly, the situation is rather stagnant. This is, of course, because relatively very few people need it. Perhaps 0.01% of web users.

blog comments powered by Disqus