Friday, October 7, 2011

LaTeX in HTML with Javascript and Google Charts

Using LaTeX in HTML documents is really useful. I'm myself using it in this blog.

Of course, creating images for each formula and manually embedding it would be a pain. So, why don't we automatize it? It would be really nice to use them as in LaTeX documents, so simply writing them in between the dollar sign.

Well, several services exists on the Internet. I've been using the one offered by WatchMath for a while painlessly, until this summer when what everyone can expect when relying on an external service happened. I found that the formulas where not rendering anymore. I visited their page and found out that they changed the location of their script.

Too bad, fixing it was just as easy as pointing to the new location.

Nevertheless, today I came into the Mathematical Formulas page on Google Charts. This is a set of APIs Google has developed to support several things such as statistics and charts on Blogger, or equations in Google Documents. Luckily, they are exposing all of them to the public!

So the idea came to me immediately: why cannot I code a script to exploit this service and replace the formulas in my blog?! Google is not going to redirect its engine, likely! So this approach should not produce any service interruption!

I felt lazy today, so I decided to go for JQuery, instead of coding plain Javascript. As a first step, we have to "include" the JQuery library in our page. Since I am going to implement this into my blog, I'm not likely given any space to store the library downloaded from the official site. So, I went to Google to look for an online version to link to, and (guess what?!) I found it on Google APIs:

<script src="">

Now, let's look at how to convert formulas enclosed in dollar signs all within an HTML page:

(Oct 20th 2011 update: as a great dumbass, I used code which contains dollar signs... therefore the script was trying to texify portions of this code. I only noticed this few minutes ago and fixed it replacing the dollar signs with a dollar-sign image... Then, be careful if you copy&paste this code, as you will have to re-insert the dollars, or JQuery won't understand a bit!)

(Dec 3rd 2011 update: I never noticed how much I used the dollar sign until I developed this script!! It has texified so much text which wasn't expected to be, that I decided to change the approach a bit. Now, Instead of parsing the whole document, I'm just parsing the divs the class of which is "latex". The code in this post has been updated accordingly.)


The first thing I do is to specify some constants so that if I want to change the look&feel I can leave the code untouched. These are:

  • height (unspecified, which means: "Google, give me your default height", which is good for my blog);
  • background color (which is set as black, but completely transparent, this is what the extra 00's are there for);
  • text color (again, black).

Then I declare the convert_latex() function, which takes the <body>'s content and scans it using a regular expression, looking for all the occurrences of text enclosed in dollar signs. Every occurrence is replaced with the value returned by an ad-hoc function which takes the found text (not including the dollars), formats it accordingly to the Google Mathematical Formulas syntax and inserting our formatting, and inserts it in an <img> tag.

The last touch is to insert the following line:

$(document).ready(function() {convert_latex();});
which calls our function when the document is completely loaded. Of course, the last two snippets must be enclosed within <script> tags.

The final result is that now I can write $\LaTeX$ using Google!

1 comment:

  1. Hello Frndz....
    Thanks for your blog. I really appreciate your blog.
    we are offer the enclosed wallets bags. Get different sizes of plain and printed document enclosed wallets designed to secure documents on the outer wall of packages.we are offer different sizez of the bags A5 Plain and A6 Printed etc