Embedding LaTeX equations into a webpage

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.

2. MathML is badly supported.

   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.

Answer 4

Google Charts has an output format for LaTeX:

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

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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