Embedding LaTeX equations into a webpage

I'd like to include some basic math equations into a webpage. Is there an easy way of either compiling the LaTeX into an image which I can upload, or else of having the browser parse the code?

-
Should this perhaps be community wiki, since it is asking for a sorted list of resources? – Scott Morrison Jul 26 '10 at 20:44

mathURL is pretty cool. It's specifically for mathematics though.

-
This wins for simplicity. – Jeremy Hurwitz Jul 28 '10 at 22:44

jsMath and its successor MathJax are JavaScript libraries which provide client side rendering of LaTeX formulas. (jsMath is what MathOverflow uses to render LaTeX.)

-
+1 Didn't know about MathJax- glad to see the ideas introduced by jsMath are evolving! – Sharpie Jul 26 '10 at 20:35
Could we have different suggestions in separate answers? That way, they can be up/down-voted independently. – ShreevatsaR Jul 26 '10 at 20:43
ShreevatsaR, I've edited my answer to remove mathURL, since it is the subject of another answer. – Chris Phan Jul 26 '10 at 20:56
@ChrisPhan I think MathOverflow uses MathJax as default. – student Jan 30 '12 at 17:47
@student, they do now. I think they switched a few months after I wrote this. – Chris Phan Feb 8 '12 at 23:11

When embedding mathematics into a webpage, there are two primary questions:

1. What format should be used to display it?
2. Where should the conversion be done?

In my opinion, each of these has a definite answer and a different solution should only be used if the optimal solution really cannot be done.

1. MathML. Reasons:

1. It is the only accessible way of doing this. Putting the original LaTeX in an alt tag on an image is not accessible - it relies on the recipient being able to understand raw LaTeX source code (more on this in a moment). Also, not all of those requiring accessible webpages use screen readers, some simply need to enlarge the page.
2. It is styleable (not sure if that's a word). Since MathML is part of the XHTML suite, it can be styled in the same fashion as the rest of the document (namely, via CSS), so the resulting display is far more harmonious than any other (try changing the background colour to something easier on the eyes at one of those wordpress blogs and you'll see what I mean).
3. It is small. A quick test on my system with 515 simple files that I happened to have lying around showed that PNGs weighed in at 175kB whilst the MathML equivalents were a shade under 60kB. The PNGs were not large resolution, for example the PNG containing the Zeta symbol was a 9x13 image.
2. Server-side. Reasons:

1. It is small. Instead of sending both the source and the instructions on how to compile it, you just send the result.
2. It is reliable. You can easily check that what you want the person to see is what they should see. In particular, a javascript solution relies on two things being correct: the javascript script and the implementation of javascript in the browser. MathML just relies on the MathML implementation in the browser.
3. It is fast. With server-side caching, you only need to process the mathematics once and then it's done.
4. It is verifiable (similar to reliable, I guess). I don't fully understand the differences between the types of spec that w3c produce, but MathML is certainly a recommendation. Even though browser support is variable, the variations are known because they can be measured using the open standard, and thus can be taken into account.

Server-side MathML is the optimal solution. Of course, it's not always possible and then other solutions are useful.

There are various standard arguments against using server-side MathML and other myths about mathematics in webpages that are worth taking a minute over.

Myths

1. Sending the raw LaTeX code in an alt tag makes images accessible.

When people say this, they mean that they can read $a^2 + b^2 = c^2$ and understand it. Try them on something a little more complicated and you'll soon see that this is complete rubbish. For example, try having someone read out the following to you: $\begin{array}\ell^0(\mathbb{R})&\;\mapsto&\;\ell^2(\mathbb{R})\\\downarrow&&\uparrow\\L^2(\mathbb{R})&\subseteq\,&L^\infty(\mathbb{R})\end{array}$. Of course, there's going to be people who will say, "I can understand that!" but that's not the point. You write a webpage for other people and the more complicated the LaTeX, the fewer the number of people who can instantly read it.

This is the classic chicken-and-egg. MathML support is absolutely fine in Firefox, in IE with the MathPlayer plugin, and in Amaya (what's that?, I hear you cry!). Plus there are groups working on it for Opera and WebKit who just need a little encouragement! Sending them an email saying, "I love your browser but until it has proper MathML support then I can't use it" would provide them with a little more motivation. Of course, there are bugs in the implementations in Firefox and the others, but those are known and so can be worked around.

3. MathML requires documents to be valid XHTML.

Actually, this isn't a myth. It's absolutely true. But surely your pages were valid to begin with! I'm a mathematician and my ideal document is one that cannot be misunderstood. That's impossible, so I try for the lesser goal of where any misunderstanding can be laid at the door of the person reading it rather than me. MathML, as it's an open standard, allows me to reach that goal on webpages - at least technically, the contents are more variable!

Finally - on this part - for those that still worry about Joe Blogs (or Ola Nordmann, to be geographically correct) not being able to read your webpage due to using an old version of IE and refusing to install plugins, it is actually possible to have two versions of the mathematics on your server and send MathML to those that can see it and PNGs to those that can't, thus getting the best of both worlds.

What about implementation? Well, there you're in luck. iTeX can do it all, and in spades. iTeX is a fast c++ program that converts a subset of LaTeX mathematical language into MathML. The original package comes with bindings for ruby, and I've extended this to PHP, Perl, and Python. By combining it with other packages, in particular svgmath or gtkmathview, it is possible to further convert the MathML to an image for broken browsers. (Contact me for these extensions; I haven't gotten round to writing them up yet - it's on my TODO list!)

For examples, see the nlab (pure MathML) and the nforum (MathML, SVG, or PNG depending on what browser you are using).

Lastly, although I'm concerned with accessibility, I'm not an expert. So I've cross-posted my answer to the blindmath mailing list and shall update this according to the response that I get there.

-
Well, there's still the other argument against MathML: the output often looks ugly (esp. kerning) compared to LaTeX. :-( – ShreevatsaR Jul 27 '10 at 12:20
Firstly, can you back that up with an example? Secondly, a lot of ugliness can be overcome by good use of CSS. Thirdly, that's an issue with the rendering not the format and the rendering will only improve as it's developed (and will apply retrospectively!). – Loop Space Jul 27 '10 at 12:39
I use Firefox, so I can see the MathML on places like the <a href="ncatlab.org/nlab/show/HomePage">nlab</a>;, which is good; the irritating part is <a href="developer.mozilla.org/en/Mozilla_MathML_Project/… to install fonts</a> so that calligraphic letters and such appear as something other than blocks. Not so bad, in the grand scheme of things, but I hope somebody can make it go away . . . – Blake Stacey Jul 27 '10 at 17:05
I should have put that in the myths. Why is installing fonts a bad thing? Now that the STIX fonts are public, this excuse fades in to insignificance. If you go for the jsMath/MathJaX route then it installs the fonts every time! Nonetheless, I believe that using the CSS3 @font-face directive (supported by most browers, I think) then this font issue could be overcome. – Loop Space Jul 27 '10 at 21:06

Google Charts has an output format for LaTeX:

If you prefer client-side rendering, jsmath is popular (and the system used on MathOverflow)

-
Very nice tip! I'll definitely be using this! – Juan A. Navarro Jul 27 '10 at 11:04
MathJax now, not jsmath. – qubyte Dec 4 '11 at 14:20
@MichaelMrozek: Can you update your answer? I am having a hard time finding "an output format for LaTeX" under Google Charts. – Sony Dec 4 '11 at 15:30
@Sony I don't know if it's part of their interface or not, but you just use http://chart.apis.google.com/chart?cht=tx&chl=(your equation). You can see examples in the images I included – Michael Mrozek Dec 4 '11 at 16:54

If you are using a Mac, LaTeXit is a great utility that lets you type in a bit of latex (intended for equations, but it will work with valid latex), runs latex of it and produces an image. It embeds the latex in the image, so of you open the image latter, you can edit the latex. This means you don't need a bunch of tiny .tex files laying around.

-

A friend of mine hacked together mathcache: put a short <script> block at the end of a webpage, and it parses all text within the standard delimiters as math formulas, inserting them into the page the viewer sees as PNG images (or SVG, if the browser supports them).

It's probably worth noting that blogs hosted on WordPress.com have LaTeX support. Text beginning with $latex and ending with $ is parsed as LaTeX code and rendered as PNG. Terry Tao uses a more elaborate system, LaTeX2WP, which operates on the document level, turning a LaTeX file into something which can be pasted into WordPress. This allows for referencing by equation number; the \ref command gives clickable links.

-

If you put

\usepackage[active,displaymath,textmath,tightpage]{preview}


into a document of yours, the resulting DVI or PDF file will contain one page per graphic with appropriate size information.

Use dvips (on DVI, or just run GhostScript directly on PDF) and then

gs -sDEVICE=png16m -dTextAlphaBits=4 -r300 -dGraphicsAlphaBits=4 -dSAFER -q -dNOPAUSE -sOutputFile=OUTPUTFILE%d.png INPUTFILE.ps


(taken from the documentation of preview.sty). It might also be worth looking at the documentation of dvipng for a faster conversion not involving Ghostscript. dvipng has a number of options for generating images and HTML scraps intended for inclusion in web pages.

-

CodeCogs turns LaTeX into the picture format of your choice and hosts it. They do ask for money if you are going to be hitting them more than a few thousand times a day, though.

This meta topic is essentially the same question.

-
After playing around with this, I don't consider it a satisfactory solution. Since it displays as images, the math is slightly offset, so it looks like my terrible Wordpress blog! – levitopher Jun 24 at 14:38

LaTeXML is a very powerful server-side tool to convert LaTeX documents and math expressions to HTML/MathML. It works well to serve LaTeXML-produced MathML and use MathJax to render it in the browser.

-

One more alternative for WordPress based site is my GFormula plugin, which allows you to compile the LaTeX into an image and past into a post. You can also set image dimensions for compiled image, background and foreground colors.

-
• mimetex is a very simple way to have equations automatically rendered from (La)TeX source, and even includes a rudimentary picture environment. It also is dynamic, so images are generated on the fly.
• jsmath is a very good javascript option. The rendering is excellent but requires fonts (for good output) on the user's end.

There are other solutions but I think these are the easiest/best.

-