Math equations on the web

Question

How can I render Math equations on the web? I am already familiar with LaTeX's Math mode.

Solution 1

It turns out this is a bit of a pain.

You can use MathML, but browser support is still iffy. If you are starting with latex you've got a few options for converting to html, but they'll all typically end up rendering the actual equations to images and inlining those.

Nothings all that pretty (unless you resort to pdf or something). What's best will depend a bit on what sort of content, how many equations, and how complicated the equations are.

Here is a decent summary.

Solution 2

The other answers are out-of-date. As of 2012, beautiful math is easy to write and render. The technology is called MathJax. You can see it in quiet action on MathOverflow and hundreds of math blogs.

MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers. No more setup for readers. No more browser plugins. No more font installations… It just works.

Mathjax is reliable and unobtrusive, so you just need to write the math. You do so in Tex (Latex), a concise syntax with which most scientists and mathematicians are familiar (and have shared decades of good tutorials). For Mathjax, you simply write Tex code in-line in your HTML between double dollar signs, eg.

When $$a \ne 0$$, there are two solutions to $$ax^2 + bx + c = 0$$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

To use Mathjax to render your math, put a Javascript line in your HTML header:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>

If you publish on a platform such as Wordpress, Tumblr or Blogger there are plug-ins in their galleries to do this (Wordpress).

How does Mathjax render math? With Javascript it renders your math to beautiful HTML and CSS (remarkably resembling Latex) in a fraction of a second. If a browser supports MathML, it can render math through that too, but that's not important. It's a popular success because the end-user workflow is easy, not because of the technology behind it.

You can choose to use Mathjax (over png images) on Wikipedia if you have an account. Look for Special:Preferences / Appearance.

---

MathML is ridiculous. It's neither human-readable nor human-writable (the quadratic equation takes 800 characters - it's 50 in Tex). It's just another pointless XML language . Thankfully, it's obsolete before most browsers support it. It doesn't even look as good as Tex or Mathjax's HTML-CSS!

Solution 3

My two favorite approaches:

• Client-side: MathJax. See some examples here. It is very easy to use and install and its development is backed by the AMS and SIAM among other scientific institutions. I expect this to become the defacto standard for displaying math on the Web.

• Server-side: LaTeXML. This is used for producing the NIST Digital Library of Mathematical Functions. It tends to hiccup if you have custom macros in your TeX sources but in general it does give very good results.

Solution 4

The jsMath package is another option that uses LaTeX markup and native fonts. Quoting from their webpage http://www.math.union.edu/~dpvc/jsMath/:

The jsMath package provides a method of including mathematics in HTML pages that works across multiple browsers under Windows, Macintosh OS X, Linux and other flavors of unix. It overcomes a number of the shortcomings of the traditional method of using images to represent mathematics: jsMath uses native fonts, so they resize when you change the size of the text in your browser, they print at the full resolution of your printer, and you don't have to wait for dozens of images to be downloaded in order to see the mathematics in a web page. There are also advantages for web-page authors, as there is no need to preprocess your web pages to generate any images, and the mathematics is entered in TeX form, so it is easy to create and maintain your web pages.

See for example this page or that one.

Solution 5

Katex

A couple of developers from the Khan Academy released a blazing quick library based off of Tex called Katex:

• Fast
• High-quality
• Self-contained; and,
• Can be rendered on the server

Looks like a great modern option.

View more solutions

Comments

[Jeremy]

I've actually done a fair amount of this. And all I can say is make sure you want to go down this path before you get started and Good Luck.

[Mica]

firefox and gecko based browsers support MathML... what more do you want?

[Rich]

Note that not all solutions embed images. MathJax for example renders math with pure HTML and CSS.

[Colonel Panic]

jsMath is now the delightful MathJax

[simon]

Joey, I'm pretty sure MathJax wasn't around when this was answered. Answer is getting a bit old but fundamentally math on the web is still a problem, but better than when I wrote this.

[Alexandre Martins]

I understand and agree with your point about MathML not being human readable or writable. But when you want the machine to read, generate and validate semantically correct math, MathML Content is the way to go. And it is tremendously easy to generate MathML Presentation (which MathJax can render), LaTeX or AsciiMathML from MathML Content.

[Tortoise]

@Joey I use MathML on my blog, where I'm glad to drop support for my least favorite browsers (Chrome and IE) to promote open technologies on the browsers I believe are not evil (Firefox and Opera). Of course, I use MathJax/images on clients' sites.

[Skippy le Grand Gourou]

+1 for the tip on using simple HTML for simple formulas, thanks for the link.

[Silvio Mayolo]

I'm glad I scrolled down far enough to see this answer; it's so much easier than MathML and easy to set up too. I recommend this to anybody looking to render math.

[Peter Krautzberger]

Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips.