What's the best way to write Mathematical Equations on the Web?

Question

I am working on a Math related web page and am looking for a solution to writing Mathematical equations easily onto a web page. There are several solutions readily available to me at the moment:

• Use LaTeX and publish them on my web page as images.
• Use MathML

Both of these solutions aren't ideal and seem somewhat dated. Replacing what should be text with an image is never a good idea and MathML isn't compliant with all browsers/operating systems.

I'm hoping that there is a modern solution to using images or MathML, perhaps something utilising sIFR to display mathematical equations? After a bit of research I am still yet to find any real solution.

Please note that I am asking for a new way of publishing equations. I do not want images to be the output that is displayed on the web page and would rather have these equations rendered as textual data. MathML is the closest I've come, but it's still not ideal. I've wondered for a while whether a replacement tool like sIFR could be utilised to create equations in Flash. Anyone have any suggestions on this front?

EDIT: It's been a while since I last updated this post, but with HTML5 becoming adopted by browsers there is a new player in the game that introduces LaTeX and MathML back into the mix, MathJax!. MathJax are definitely the way to go!

Similar Question: Math equations on the web

Answer 1

The jsMath package is an 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.

Answer 2

I've just written a javascript module to do this, named jqmath. See http://mathscribe.com/author/jqmath.html

It's sort of similar to MathJax, but simpler, smaller, and faster.

Answer 3

I have been using borderless tables with merged cells in my website to display math equations. It works excellent for most equations. However, since the markup is usually a bit complex, it would be time consuming in case of hard core mathematics websites.

Here is the code:

<style type="text/css">
  table.math{font:17px georgia, times, serif;border-collapse:collapse;border:none;}
  td.a{text-align:center;}
  td.b{padding:0 2px;}
  td.c{border-top:1px solid #505050;border-left:1px solid #505050;border-bottom:1px solid #505050;}
  td.d{border-top:1px solid #505050;border-right:1px solid #505050;border-bottom:1px solid #505050;}
  td.e{text-align:center;border-top:1px solid #505050;}
</style>
<table class="math">
  <tr>
    <td class="a">1</td>
    <td class="b" rowspan="2">&times;</td>
    <td class="c" rowspan="2">&nbsp;</td>
    <td class="a">8</td>
    <td class="b" rowspan="2">+</td>
    <td class="a">1</td>
    <td class="d" rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td class="e">x + 2</td>
    <td class="e">x + 2</td>
    <td class="e">x &minus; 1</td>
  </tr>
</table>

Here is the output of the above code:

Answer 4

LaTeX is use extensively already on the net and in academia to render equations.

A great example of this is wikipedia have a look at this page for 1 example.

http://en.wikipedia.org/wiki/Latitude

I know this is a generlisation but: Using images is a viable way to achieve many things on the web in a browser compatible way - provided you provision for some of the shortcomings. ( eg. Google Maps, Rounded Corners, graphs, advanced typography )

Also 'dated' could be interpreted as 'tried, tested and feature complete'

and thanks for point out sIFR - something i'm going to look at later, i already have a list of things to explore with it, such as printing? ( html + images can do this pretty well, can sIFR?....)