Converting Inline Latex to Images with Javascript and Google Chart API

So, you’d like to be able to display inline latex in your pages, but setting up jsLatex is a hassle. Why not abuse what’s already there?

Google Chart API supports the creation of images of latex code via urls:

http://chart.apis.google.com/chart?cht=tx&chl=\displaystyle%20exp(x)%20%3D%20\sum_{n%3D0}^{\infty}\frac{x^n}{n!}

kinda messy, right?

It wouldn’t be so good to hardcode this url each time, but using jquery, we can automate this process fairly well.

The Script

Put this somewhere in your page, probably within tags in the head.

function process_latex() {
    $('pre.latex').each(function(e) {
      var tex = $(this).text();
      var url = "http://chart.apis.google.com/chart?cht=tx&chl=" + encodeURIComponent(tex);
      var cls = $(this).attr('class');
      var img = '<img src="' + url + '" alt="' + tex + '" class="' + cls + '"/>';
      $(img).css('display', 'block').insertBefore($(this));
      $(this).hide();
    });
  }

Then make sure the function is called on page load, i.e. add to your $(document).ready handler

$(document).ready(function() {process_latex();});

Usage

Type the latex within <pre class="latex"></pre> tags.
To give more control over styling the resulting images, the images will have whatever classes the


s also have.

Example Usage

Three formulae rendered with Google Chart API

<html>
  <head>
    <script src="script/jquery-1.4.2.js"></script>
    <style>
      .latex { vertical-align: middle;} /*default styling for latex imgs */
      .bordered { border: 1px solid red;}
      .block { display: block; }
    </style>
    
    <script>
      function process_latex() {
        $('pre.latex').each(function(e) {
          var tex = $(this).text();
          var url = "http://chart.apis.google.com/chart?cht=tx&chl=" + encodeURIComponent(tex);
          var cls = $(this).attr('class');
          var img = '<img src="' + url + '" alt="' + tex + '" class="' + cls + '"/>';
          $(img).insertBefore($(this));
          $(this).hide();
        });
      }
      $(document).ready(function() {process_latex();});
    </script>
  </head>
  <body>
    Default look:
    <pre class="latex">
      \sin(x)
    </pre>
    how about an inlined, red bordered formula?
    <pre class="latex bordered">
      \sum_0^\infty \frac{x^n}{n!}
    </pre>
    Very nice! And if we give it the block class?
    <pre class="latex block">
      \int \int_{\mathbb{R}^2} \exp(-x^2 - y^2) dx dy
    </pre>
    See, it went on its own line. Magic!
  </body>
</html>
About these ads

2 thoughts on “Converting Inline Latex to Images with Javascript and Google Chart API

  1. Just what I wanted.
    However, I copied and paste the last code snippet into a html file and loaded the file. It didn’t show the equations.
    I checked it both using Firefox and Chrome.

    Am I missing something?

  2. if you just pasted the last snipped verbatim, then it would have died since you don’t have jquery installed.

    Go download the latest version of jquery, http://jquery.com/, edit the line to point at the latest version of jquery, cross your fingers, sacrifice a goat and hopefully it’ll work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s