Math equations on the web

问题:

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

回答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.

回答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!

回答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.

回答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.

回答5:

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.

回答6:

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.

回答7:

texvc can convert LaTeX math equations to png or HTML.

回答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).

回答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.

回答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.

回答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.

回答12:

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

回答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.)

回答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.

回答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.

回答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.