Math on the Web — or — Who Stole My ∑?

I've been meaning to work my way back through Knuth's Art of Computer Programming, and maybe even Essentials of Programming Languages. I cracked the digital spine on EOPL3 last night, and realized that doing the exercises was going to require the maths.

Which is no problem, except that I have fallen out of the habit of writing in notebooks. That leaves some digital format, and I immediately thought of my blog! That of course brought up the question at hand: how to display mathematical formulae with beauty and clarity, using only HTML?

$$∑↙{i=0}↖n i={n(n+1)}/2$$

Easy, right?

I'm using a small library called jQMath, that acts like a live, in-browser source filter. It converts tagged regions of text (surrounded by \$\$) into stylized HTML like the Sigma summation above.

A few things to note:

  1. You must have good Unicode support in your authoring tools
  2. The setup instructions are a little preachy
  3. You really really need good Unicode support...

$$[∫_\Δd\bo ω=∫_{∂\Δ}\bo ω]$$

I stress the Unicode requirement because I spent the better part of the afternoon fighting my tools. To clarify: this is the fault of the code I wrote to run this website, and is not a deficiency in jqmath.

$$(\table \cos θ, - \sin θ; \sin θ, \cos θ)$$

I ended up rewriting John Gruber's markdown tool (the one that you can get from the Ubuntu repos) so that it handled UTF-8 input and produced proper UTF-8 output. Otherwise, you can't do much beyond simple ASCII variables:

$$a^2+b^2=c^2$$

That works without Unicode, but not much else does. And what's the point of having a kick-ass formula renderer if you can't use the really cool math symbols?

$${1+√5}/2=1+1/{1+1/{1+⋯}}$$

As for the setup, all you really have to do is the following:

  1. Link the jqmath.css stylesheet in <HEAD>
  2. Include the jqmath.js and jquery.js libraries somewhere (I chose to put it at the end of the <BODY>, with my other libs)

Happy Hacking!

James (@iamjameshunt) works on the Internet, spends his weekends developing new and interesting bits of software and his nights trying to make sense of research papers.

Currently working on Rook.