squareCircleZ

I implemented jsMath on this blog recently.

Before this, I have used images for inserting mathematics (I mean fractions, integrals and the like) because well, images work and they are simple. But they are also fiddly (you have to create the math in some software, then create an image, then upload it, then link to it – or even using something like LiveWriter, it is still a hassle.) So I’ve been on the lookout for a better solution.

I looked into this Wordpress plugin, but it requires LaTeX on your server, and tech support at my ISP were less than interested in implementing LaTeX just for me.

jsMath lets you include mathematics on any Web page and it works in blogs, too.

You need to upload the jsMath code and fonts first.

Note: If your blog is hosted by wordpress.com, you don’t need jsMath – you already have the option of inserting LaTeX into your blog post and it will display math.

Some more information from the JsMath site:

A Method of Including Mathematics in Web Pages

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.

So far, so good. It is cross-browser and cross-platform. That’s great.

But then the claim:

… and you don’t have to wait for dozens of images to be downloaded in order to see the mathematics in a web page.

No, but the user does have to wait for the jsMath.js script to load (107 kB of it – quite big). This is only for the first time that the user accesses a page with TeX-based math (since the browser keeps a copy of the javascript code in its cache), but it is quite a performance hit on a slow Internet connection. Also, subsequent viewing of the page is still quite slow while the javascript churns away processing the math.

Since the mathematics takes quite a while to form, I am not sure it is any faster than if the page had several small images of identical math.

Anyway, following is the kind of thing you can display using jsMath.

Examples using jsMath

How it’s Done

First, you need to add the javascript files on your server. All up, its 80 MB and most of that consists of the fonts that are needed to display mathematics.

Then, early in the post, you need to add this code to set initial values.

<script type="text/javascript">jsMath = { Controls:
{cookie: {scale: 133}}, Parser: {prototype: { macros:
{warning: ["Macro","\\color{##00CC00}
{\\rm jsMath\\ appears\\ to\\ be\\  working!}",1]}  }}   }
</script>

Then you need to add a call to the jsMath javascript:

<script type="text/javascript"
src="http://www.mydomain.com/scripts/jsMath/jsMath.js">
</script>

Next, you need to enter TeX code to produce mathematics. So for the examples above, I needed to enter:

<div class="math">\int \sin x\ dx= -\cos\ x + C</div>

and this gives:

<div class="math">\frac{d}{d\theta }\tan\ \theta
= \sec ^{2}\theta </div>

gives

and the matrix is achieved using:

<div class="math">\begin{bmatrix}
  0      & \cdots & 0      \\
  \vdots & \ddots & \vdots \\
  0      & \cdots & 0
\end{bmatrix}</DIV>

The integral required this code:

<DIV CLASS="math">\phi_n(\kappa) =
 \frac{1}{4\pi^2\kappa^2} \int_0^\infty
 \frac{\sin(\kappa R)}{\kappa R}
 \frac{\partial}{\partial R}
 \left[R^2\frac{\partial D_n(R)}{\partial R}\right]\,dR
</div>

Finally, you need to add a javascript function call (after your last piece of mathematics) which starts the actual processing of TeX into visually pleasing math:

<script type="text/javascript">jsMath.Process(document);
</script>

Similarities with Math Entry in Wikipedia

When you write a mathematics page for Wikipedia, you also need to use TeX code. But Wikipedia’s servers convert the TeX to an image, not fonts like jsMath. If you resize the text when viewing a Wikipedia page, the math image does not change size.

My Experience with jsMath

1. So far I feel that jsMath is fiddly (because of the setup time and the TeX input), but overall probably just as fiddly as creating images. I will play with it some more and no doubt, with more use it will become easier.
2. The claim is that if you increase the font sizes of the browser, then the math font size also increases. However, my example using θ above did not perform so well (this is a screen shot):
   
   As you can see, the θ stayed the default font size, while the other letters increased, as promised. There is an (ugly) red warning about this that says: “No jsMath TeX fonts found — using image fonts instead. These may be slow and might not print well.“
3. Either you include the javascript calls in each blog post that requires it (and this is irritating because you have to go and find the code each time) or you can set it up so that the javascript is only called if there is math on the page.
4. jsMath only works in blog posts (not comments as well) if you include the javascript calls as I have above.
5. The jsMath code is full of XHTML errors.

Ways to Overcome Issues with jsMath

Entering TeX: There are several free options for creating TeX using a WYSIWYG interface. One of these is TeXaide, by the people who make the equation editor used in Microsoft Word. It’s a free download. The interface is familiar if you have been using the Word equation editor:

All you do is highlight your equation and copy – it is copied to the clipboard in various flavours of TeX. You need to strip out the $$ signs when using TeXaide for jsMath.

Here’s the result of copying the equation in the screen shot to this blog post:

Downloading the fonts: Most readers of blogs will not bother to download the TeX fonts – most won’t even understand what the red error message means.

As suggested here, I included the following code to disable the ugly warning message.

jsMath.Synchronize("jsMath.Font.HideMessage()");

jsMath in blog comments: It is possible to include jsMath in blog comments (by hacking the Wordpress code). But the user needs to know that they have to include the <div class=”math”> … </div> and they have to know how to enter TeX. This is a tall order for most casual visitors to a blog, I feel.

I’ve looked at some WYSIWYG browser-based TeX editors – I’ll try to implement one sometime soon.

Conclusions

There are pluses and minuses with jsMath. I’ll keep an open mind and I’ll experiment with it for a few months and see how it goes.

Watch this space.

Related posts:

1. Math rendering in Wordpress using WPMathPub How do you enter math equations, fractions and the like...
2. SWFObject – compliant and works nicely in Wordpress I was impressed - and rather bemused - when a...
3. Wordpress 2.0 upgrade I upgraded this blog’s engine to v2.0 last night. The...
4. Enter math in emails, forums and Web pages using ASCIIMathML Frustrated trying to communicate math in emails or in a...
5. Math graphs on the Web without images Here's one way to plot good looking graphs on the...