Displaying equations online without using images

This is an "additional information" page I have written for the forthcoming humanities statistics resource. I was going to use images, but was unsatisfied with the results. This solution took me a while to work out, but I thought I would share it here as well.

1. The easiest way to display an equation online is to use an image. If you create your equation in MS Word or Open Office you can use the snipping tool (In Windows 7) to make it into an image for website display.

2. The better (though much harder) way is to use LaTeX Math and it  requires some web development knowledge. This is not a comprehensive guide, but hopefully provides a good starting point.

LaTeX is used for preparing academic articles, mainly in the sciences. LaTeX is actually a language which can be understood with practice. If you plan to use a lot of equations online is probably worth investing some time in becoming familiar with LaTeX.

For example The LaTeX code for the correlation co-efficient is:

r=frac{{1}/{n}{(x_1-bar{x})(y_1-bar{y})+(x_2-bar{x})(y_2-bar{y}) ... + .... (x_n-bar{x})(y_n-bar{y})}}{SD_x SD_y}

Which rendered in LaTeX produces:

[ r=frac{{1}/{n}{(x_1-bar{x})(y_1-bar{y})+(x_2-bar{x})(y_2-bar{y}) ... + .... (x_n-bar{x})(y_n-bar{y})}}{SD_x SD_y}].

LaTeX looks complicated, but is actually surprising logical once you start to get the hang of it. A number of free open source LaTeX editors are available and the results can be exported into .pdf format. However, the editors are not needed when displaying equations online.

Unfortunately understanding LaTeX is not the only necessary step to publishing equations online. LaTeX is not html and will not work on a website without additional plugins.* The statistics website I am developing is built in Drupal and uses the add-on module MathJax to render the LaTeX online. It can be also used in WordPress (which I am using for this blog) and a variety of other applications.  See the MathJax, Drupal or WordPress websites to find details of the installation process. *[Added 23/10/2012] I've since learnt that wordpress.com supports LaTeX natively, but I have not checked this.

Short Math Guide for LaTex by Michael Downes (American Mathematical society website).

Mathjax

Mathjax drupal module

Mathjax WordPress.org plugin

Added 6th October 2012

As life would have it MathJax seems to have stopped working on my Drupal site. (It worked fine a couple of days back)  However, this code at the top of any page where you wish to use LaTex does seem to be working now.

I am grateful to the author of this website  for the code to place on the page.

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript">
    MathJax.Hub.Config({
        extensions: ["tex2jax.js","TeX/AmsMath.js","TeX/AMSsymbols.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: {
            inlineMath: [ ['$','$'], [""] ],
            displayMath: [ [''], ["

"] ], processEscapes: true, }, "HTML-CSS": { availableFonts: ["TeX"] } }); </script>
  • Twitter
  • del.icio.us
  • Digg
  • Facebook
  • Technorati
  • Reddit
  • Yahoo Buzz
  • StumbleUpon

One thought on “Displaying equations online without using images

  1. As life would have it I discovered that MathJax no longer seems to be working on my Drupal site. (It worked fine a couple of days back) However, this code at the top of any page where you wish to use LaTex does seem to be working now.

    Grateful to this website for the code to place on the page.

Comments are closed.