Tuesday, 14 December 2010

Equations online

Do you need to include equations on your webpage or blog? I didn't think so. But at some point, maybe I will. So I started looking at how to accomplish that. It turns out that, like getting the world to agree on climate change targets, it isn't easy. Here are the options I've found. I'm presuming the kind of person looking to put an equation online is the kind of person who's familiar with LaTeX so all these tools will make use of it.

The language of maths on the web is supposed to be MathML but, although it's been around a while, it's generally poorly adopted. MathML is a part of HTML5, the next najor revision of web-formatting as a whole, but that's a work in progress and implementation is variable. MathML code is also very, very ugly. Given that LaTeX was created to make things more compact, MathML looks like a big step backwards. Apparently this makes it versatile. If I need 23 open and close tags to write the quadratic formula, I'm not convinced that this constitutes progress...

Embedded images

One way of putting equations on your webpage is to create images of your equations and host those. At first glance, that isn't that easy, since you'll want a quick way of producing the images from (La)TeX. Fortunately, CodeCogs have created an online equation editor that'll do the image creation for you. Punch in your equation and you'll be given an image in a chosen format. Better still, you can choose "HTML" from the drop down menu at the bottom and it'll give you an HTML snippet that you can copy. This way they host the image for you. For example,

Note that on some web interfaces, like Blogger, you may have to flip to editing in HTML mode when you paste. Also, I've chosen PNG as the format but it pixelates when scaled. I'm not sure anything else is much better since implementation is iffy. I'd choose SVG (also part of the HTML5 standard) but Internet Explorer is notorious for being the last major browser that doesn't support it. Then again, it's just another reason you shouldn't be using IE anyway.


Another option is to use JavaScript to generate MathML from (La)TeX markup in the page. Dr Douglas R. Woodall created such a script. A newer version exists but I haven't tried it. You can download the script to your own page or link to the version on his site. Either way, you'll need a snippet like

<script type="text/javascript"

inside the "head" block of your HTML file. All very well on your own site but what about a blog? On Blogger/Blogspot, you can do this by clicking "Design" (top right) then "Edit HTML". Place the snippet above after the <head> tag and you're good to go. I'm not sure how you'd do this on other Blog hosting sites. If you know, feel free to add a comment.

You can now include TeX in \$ ... \$ blocks. For example,

$G_{\mu\nu}+\Lambda g_{\mu\nu}=\frac{8\pi G}{c^4}T_{\mu\nu}$


$G_{\mu\nu}+\Lambda g_{\mu\nu}=\frac{8\pi G}{c^4}T_{\mu\nu}$

As before, you may need to edit in HTML mode or similar. If you want a plain \$ sign, mark it up as \\$. This method might be better for inlining stuff. Also, you might not see that properly in Internet Explorer without the MathPlayer plugin. Did I mention that you shouldn't be using IE?

Pure MathML

The final option is to write your equation in MathML. It's a crap option, even if in the future it's meant to be the most universal. The hard part is converting (La)TeX into MathML. One way of doing this is to create a page using the JavaScript above, selecting the equation portion, right-clicking and selecting "View Selection Source". Well, in Firefox 3.6, anyway. Another way, in theory, might be to use the TeX/LaTeX to MathML Online Translator, except that it appears to load for five minutes and then times out when I try to use it. Did I get your hopes up there? I hope so. It got my hopes up too.

Back on track, this is what the MathML produces here on Blogger.


If you want to know, this is the markup that I used:


Did I mention that MathML is ugly? Did you believe me? I bet you do now. There's an obvious catch: this doesn't seem to work! (Let me know what browser you're using if the equation is rendered properly.) I don't understand why not. I'm pretty sure the markup is correct. I tried the example source on Wikipedia and that didn't work either. The JavaScript is turning the TeX markup into MathML, which is then rendered. Yet if I just plug in the MathML, Firefox ignores the tags? I presume there's something about the Blogger implementation that's doing this so it might work on other blogging sites. Either way, it's a lot like my PhD inasmuch as it doesn't make sense.

My choice

Really, MathML should be the way. It should platform-independent and keep the page self-contained. Unfortunately, the Internet cares about standards about as much as Douglas Adams cares about deadlines. Wikipedia realised this too, which is why that invented their own markup that generates embedded images. The same (with CodeCogs' gadget) is my choice for now.


  1. > Did I mention that MathML is ugly?

    TeX would also look ugly if you put in a couple of layers of redundant {} around every symbol. the mstyle and most of the mrows are not doing anything except making your excerpt look ugly:-)

    html5 is work in progress but math in html5 works now in FF4 and webkit nightlies (and soon again in IE+mathplayer) SVG also works in IE9.

    your mathml fragment works for me in firefox 4, not sure why it's not working in IE, a script that does work in FF and IE+mathplayer and to a degree in safari/chrome/opera is demonstrated in an old blogger post of mine at


    The orcca online translator's a bit old now, there are plenty of newer projects, if you want to put tex syntax in the page rather than mathml then you may also want to look at mathjax.

  2. Granted, most of the MathML elements are a sort of bracketing but it still seems that nearly every element has to be tagged in some way. What parts of the excerpt aren't necessary?

    Also, why it isn't possible to create an element so that one could markup a LaTeX-type expression inside "< math>" tags (much like Wikipedia)? I appreciate that there might be a sound reason for this, I just don't know what it is!

    As for rendering, it looks like the implementation consistency is worse than I knew. I'm using FireFox 3.6.13 now. I just tried some others on my Eee. As you say, FF 4b7 renders everything perfectly but surprisingly, Chrome (8.0.552.215) doesn't render either the explicit MathML or the JavaScripted version.

  3. > What parts of the excerpt aren't necessary?

    as I said, the mstyle and most of the mrows, the version I think at the end (untested)

    > Also, why it isn't possible to create an
    > element so that one could markup a LaTeX-type
    > expression inside "< math>

    well you can of course; that's what latexmathml, or mathjax or several other javascript libraries (including one on wikipedia that has a mathml rendering variant now) do. But the question is exactly like asking why html has all these <tr><td> tags instead of using a more linear wiki markup (or using latex). They all have their uses wikis and latex, but tag based html markup isn't going away any time soon.

    Using the richly tagged mathml form has many advantages eg for accesibility (It is required in DAISY and in tagged PDF for accesibility reasons in some contracts) Also unlike a TeX based syntax it is much easier to incorporate into many different environments, for example I note you comment elsewhere on openoffice, all the maths in openoffice is stored as mathml, so if you want a change from latex you can use that (or microsoft office for that matter) to generate the mathml.

    I like the latex syntax (I donated a fair chunk of my life to developing latex2e) but the mathml syntax allows expressions to be generated and shared between tex users (tex4ht and latexml are both pretty good translators) word and open office users, web browsers and CA systems like mathematica and maple. We'd never have achieved that with a tex-like syntax. Within a purely browser context if math had required a special parser parsing an untagged string then it would always be an opaque foreign blob difficult to manipulate with css and javascript dom scripting, by specifying a full element structure allows css and javascript access to the mathematical structure.

    as for rendering: FF4 is the only one (other than webkit nightlies) to have support for html5 specified mathml-in-html. Firefox (since before version 1) has had support for mathml in xhtml served with an xml mime type. The slightly modified latexmathml script that I mentioned on my blog allows older firefox (or internet explorer) to render mathml in html by taking the html dom fragment and walking over it to make an xml dom fragment and then re-inserting it. the only addition I added was for chrome/safari/opera where I added some css to make the maths legible.


  4. Bluehost is one of the best web-hosting provider with plans for all of your hosting requirments.