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

Nov 13 2013

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!

  1. newer: Funny Recruiter Email
  2. older: On Greatness
James Hunt (the avatar)

James 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 exploring just how much data you can shove though DuckDB before it explodes.