Math equations on the web

Question

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

Mother

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. – Stanford

Answer 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.

Teaser

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

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

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. – Teaser

@Honorific 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. – Feuar

Answer 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!

Shorthorn

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. – Esquiline

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. – Nikolaos

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

Answer 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.

Endocrine

Answer 4

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.

Batholith

My tiny bit of research shows that it's the option that's most simple and closest to on-paper math. You don't need to painstakingly right-click on every single equation, and click 'copy' if you want the actual latex. You can just select it, press Ctrl+C, and the latex's in your clipboard. Most equations copy perfectly, some require correcting afterwards. It doesn't quite work with multiple equations selected, though. There's an argument to be made that MathJax offers better accessibility options. But if the page is laid out correctly, you can just increase page scaling in the browser itself. – Lowrance

Answer 5

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.

Seignior

jsMath is now the delightful MathJax – Shorthorn

Answer 6

You can do more math directly in HTML than most people realize. See these notes.

The only safe way to render LaTeX is to save the output as an image. Some sites try to use tools to do this on the fly, and they never work reliably. For example, on some blogs, this works if you visit the web page directly but not if you go through Feedburner/Google Reader.

I've had terrible experience with MathML browser support, both in Firefox and IE. Don't even try it. Not yet. Maybe in a few years.

Here's the site I use to compile LaTeX to gifs.

If you're willing to use PDF instead of HTML, things get much easier. Just create your LaTeX document and use pdflatex to compile it to PDF. If you do go the PDF route, you may be interested in how to include PDF properties such as author, keywords, etc. in your LaTeX file. Also, this page explains how to mark up the LaTeX to make links in your PDF.

Kierstenkieselguhr

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

Answer 7

texvc can convert LaTeX math equations to png or HTML.

Waldo

Answer 8

LaTeX and MathML are the only "right" ways to do this. However each has severe limitations. The other options are images (not really optimal if you need to edit the equations later) or complex HTML(requires some training but can be done).

Stanford

Answer 9

I do render LaTeX formulas "on demand" in my wiki. Basically, I extract the latex code from each wiki section and put it into a .tex file (whose filename is an md5sum of the latex, so if the same code is used again, the same tex and therefore the same image will be used). The tex file is then latex compiled by a cron task every minute, to produce first a .ps, then with the convert program a .png (named again with the original md5). The wiki entry replaces the latex text with an img tag referring to this png (with the original latex code as an alt, for text readers).

If you want to go this way, be very careful to sanitize your latex as much as you can. there are commands in latex, like \input, that you definitely do not want to let go through, as anybody able to use them would be able to include any readable file in your server disk and include it in the resulting latex output.

To solve this issue, Mediawiki (of wikipedia fame) has a special plugin which sanitizes the latex input, but I didn't want to use it for two reasons: first I did not use mediawiki, second it's written in OCaml and I didn't want to mess with a language I don't know.

Thelma

Answer 10

I've used ASCIIMathML for this in the past. It's essentially a JavaScript library and can use a plugin in IE to optimize performance, but also works without it in IE & Firefox/Mozilla (although a bit slower). The syntax supports a subset of LaTeX, but the differences cause some confusion, so it may confuse your users, depending on where they are coming from.

Here are some links so you can check it out yourself:

• ASCIIMathML
• ASCIIMath Tutorial

Not perfect and doesn't work in all browsers (Safari, etc) but it's something that works today at least, albeit in a somewhat selective subset of the web.

Throckmorton

Answer 11

I've written an open source javascript module to do this, named jqmath. See http://mathscribe.com/author/jqmath.html. You type equations in a simplified TeX-like syntax, and jqmath converts them to MathML or simple HTML and CSS, depending on the browser. This is more efficient and accessible than using images.

By the way, some of the summaries and notes mentioned in the other answers here are pretty outdated now. Also, Firefox supports MathML now, and webkit (Chrome and Safari) have it in their nightly builds, though they haven't released it yet. Internet Explorer renders MathML if you have the MathPlayer plugin. Opera fakes MathML with a stylesheet. MathML is part of the HTML 5 standard, so presumably all these browsers will natively support it sooner rather than later. It's true that until then, jqmath's output will not look as good as TeX's, but it's certainly readable, and is definitely a better solution for web pages going forward.

Zenas

Answer 12

If you do use images, will a reader for a blind user be able to read the equation? Some may want to.

Hymenium

Answer 13

There is a little Mac App called LatexIt that makes it very easy to convert LaTeX equations to PDF, PNGs etc.

(I use it to create equations for my slides in Keynote or PowerPoint. It's very nice, with drag 'n drop support, so you can just 'drag' the equations anywhere to insert them.)

Hyperextension

Answer 14

I have the impression that MediaWiki will allow you to enter LaTeX markup (or something similar) and dynamically decide the best way to display it. Currently I think that uses HTML where possible for small expressions and images for more complicated expressions that cannot be represented otherwise; I suspect that one day it may take advantage of whatever other methods become state of the art, i.e., MathML if browsers start supporting it. So I think you might find that if you use MediaWiki as if it were your website engine you'll be forward-compatible with whatever comes in the future.

Extortioner

Answer 15

You can generate equation image on-the-fly via a LaTeX server.

http://www.forkosh.com/mimetex.html

If you are using WordPress, you can use LaTeX for WordPress (http://wordpress.org/extend/plugins/latex/) plugin.

Sullyprudhomme

Answer 16

Currently the state of client side MathML rendering isn't ready for broad adoption. The means you really need to render the MathML as an image. How you do this will depend on your environment.

Do you have root access to your own server? Are you comfortable installing software on it? In this case, you can render your own images. If your running blogging software or a wiki, generally you can find a plugin which will take advantage of your platforms capabilities. This is usually the idea scenario if you plan to write a lot of math expressions.

If you host your own images, you can either pre-render them, or use an extension like mimetex.cgi. If you allow arbitrary MathML expressions to be rendered, you run the risk of other websites hot linking to your image renderer. If you put a filter in on your web server to prevent hot linking, then people viewing your site through a feed reader will also be blocked.

If you can't render your own images, or if you only have a few expressions you want to render, then you can usually have another service generate the image, and you hot link the image on your site. The downside of course is your dependent on another site, who gets nothing in return for serving up images for you.

Examples of other services (as mentioned in other comments) include: * http://www.artofproblemsolving.com/LaTeX/AoPS_L_TeXer.php : alt text http://alt2.artofproblemsolving.com/Forum/latexrender/pictures/a/f/c/afc183343d84d030898f589bac12a8d9cf04558a.gif * http://www.forkosh.com/mimetex.html : mimetex.cgi http://www.forkosh.dreamhost.com/mimetex.cgi?c=%5Csqrt%7Ba%5E2+b%5E2%7D

The advantage of using mimetex is one can easily change the formula and have it re-rendered.

Clamant