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

Evan

Same as this StackOverflow question: https://mcmap.net/q/352795/-math-equations-on-the-web – Demavend

The title is the same, but I am asking for a specific solution not involving images. These solutions are dated and this question is about finding a newer method of inserting equations in a text form that could possibly be styled using CSS or Flash, instead of using an image. – Evan

On a related note, does anyone know if these options are present in Stack overflow? – Alcantara

As of early last year, SE now uses MathJax. mathjax.org/2011/04/12/news/… – Evan

Yep, and math.se has used various math rendering libraries for quite some time now, for... reasons... – Interline

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.

Ego

This is very close to what I'm looking for, and I'm glad to see that there is at least some research on these topics. – Evan

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.

Grapefruit

This looks great, and hopefully in the next few weeks I'll give it a proper test drive and see how it performs. – Evan

Hi again! Does your jqmath work with ASCIIMath? I'm trying to achieve two goals, which I have achieved with MathJax already. (But I want a faster webpage.) 1. To be able to type `math here`. 2. To be able to type math into a textarea and see the result form in realtime. (Get JavaScript to update the contents of a div that shows the result.) Is this easy to do with jqmath? The solution with MathJax is to use their implementation of ASCIIMathML.js to do point 1, and to use the original ASCIIMathML.js to do point 2. – Camelopardalis

@50ndr33 jqMath uses Unicode, not ASCIIMath ASCII notation. See #8517834 for your point 2. – Grapefruit

mathscribe.com is down. – Stirring

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:

Rebato

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?....)

Tanga

My issue with them is that they're not easy to crawl like textual data, the output is rendered entirely different to text on a web page, and they're not accessible. In academia there are plugin's for browsers to render equations as if they were text so I've wondered if it's possible to do so with what we currently already have (Flash, JavaScript, etc). If a solution hasn't already been found it could be an interesting problem to solve. sIFR is a good replacement tool and text always looks good, but it's still no genuine replacement. – Evan

How would query for an equation? You are better including enough searchable/crawlable textual information on the page. And making sure that your equations are presentable to humans. Are these academia plug ins not available to you - surely you are better of aheduring to one of these as a standard? – Tanga

Answer 5

I've been using the LaTeX plugin for the Confluence wiki to write equations on the web (well, on the intranet). It displays an image in the web browser, but you can still see the LaTeX source if you edit the page.

I don't know what you're using to host the web site, but you could maybe use a similar approach: embed the LaTeX source in the page, and render it as an image for the web browser.

Prevaricate

Answer 6

MathTran is the nicest solution that I've come across to this:

http://www.mathtran.org/

Disputation

Answer 7

I like both MathBin.net and Roger's Online Equation Editor. The latter lets you control the quality of the output.

Dg

Answer 8

Try my LaTeX2Flash solution! :)

http://validi.fi/latex2flash

http://sourceforge.net/projects/latex2flash/

Citreous

Looks like a good idea! Is it used like sIFR is by replacing text, or do you need to use Flash to build it? – Evan

There's plugin panel for Flash IDE (Windows) or you can also use AS3. – Citreous

Answer 9

You can write your latex directly in your HTML page and display it dynamically using this library :

http://www.codecogs.com/components/equationeditor/equationeditor.php

Conceal

Answer 10

The solution is to use http://www.codecogs.com/components/equationeditor/equationeditor.php

The website allow you to type your equation in LaTeX format and using its TeX Server, it will convert the equation to images and you will be able to show your math equation there.

let me show you an example, suppose i want print a integration formula i just type:

img style="display: block; float: none; margin-left: auto; margin-right: auto" title=" \int_{a}^{b}(x+2)dx " src="http://latex.codecogs.com/gif.latex?\int_{a}^{b}(x+2)dx"

Refer to the 3rd of the code above, the LaTex Math Equation is inserted after the question mark in src=”http://latex.codecogs.com/gif.latex?[put your TeX Code here]”

Apostatize

Answer 11

It will depend on your primary purpose and audience.

MathML (MathML2) sounds like promising but it still have a lot of compatibility issues across browsers and MathML equation editors (or generator). Many complex equations will not be maintained or displayed same across different browsers. Many math editors, converters, generators say they support MathML. But the result is not the same although the output may look similar. And it is not easy/not possible to define many complex equations in MathML 2. If you just have some simple equations and if you can have your audience use a certain browsers, then this might be an option. If MathML3 is widely supported, then MathML might be the way to go.

If your math expressions are not interactive and don't have to be dynamically generated) and rather static on the page, PNG or JPG image might be a good option. The size of images are not that big in most cases and displaying tens of equations in a page is quite fast as most of us have high speed internet these days. Not much difference between PNG images vs. any script based rendering approaches as the script based equations are often a few KBs and as it takes time to render the images from the local computer after downloading all the scripts. also, there are many applications that support re-editing of the PNG or JPG based equation images. MathMagic (www.mathmagic.com) supports re-editable PNG (transparent PNG as well), GIF, JPG, BMP. MathType (www.dessci.com) supports re-editable GIF. MathMagic also reads MathType images.

If a vector based image format is required for both screen and high quality output such as printing, SVG might be the way to go. Also, PDF can be an option in some cases. Many Mac equation editors supports PDF format as it is a kind of (almost native) Mac OS X format. But only a few supports PDF on Windows. It looks the latest MathType Mac version supports PDF. MathMagic supports PDF on both Mac and Win. It looks MathMagic supports SVG as well.

If the equations are created by some limited writers, there are many options to combine to get the best results. Such as using the latest MS Word's built-in MathML/XML based equation editor, and then converting the pages to web. Or using a few 3rd party WYSIWYG equation editors (such as MathType or MathMagic) for fast writing and editing, and then saving the equations a MathML, LaTeX, or Wiki compliant equation format and using in with online equation rendering engines such as codecogs.com or MathJax.

If the contents should also be used for other formats, such as eBook/ePub, there should be other factors to consider including the quality of equations and the integration with the solution such as InDesign.

please correct me if anything incorrect.

Recumbent

Answer 12

iTex2Img is the best one what I've ever used. Here is a screenshot with an example.

Ashcan