Mathematics on Web

At some point of time course material of Processing will go online. I believe in true web and hence the presentations are in HTML. Last two days I was struggling to put some mathematical formulas with out breaking the web. The best I could find was MathJax. Its an open source JavaScript display engine for mathematics that works in all modern browsers. No plugins required and uses @font-face for displaying. Its future proof as I am writing all my formulaes in MathML. Its good to know its compatible with screenreaders used by people with vision disabilities.

Here are some examples. Right click on the formulas to get more details.

Rogers–Ramanujan identities

$$1+\frac{q^2}{(1-<!--\; -\; -->q)}+\frac{q^6}{(1-<!--\; -\; -->q)(1-<!--\; -\; -->q^2)}+\cdots <!--\; \cdots \; -->=\underset{j=0}{\overset{\mathrm{\infty <!--\; \infty \; -->}}{\prod <!--\; \prod \; -->}}\frac{1}{(1-<!--\; -\; -->q^{5j+2})(1-<!--\; -\; -->q^{5j+3})},\text{for }|q|<1.$$

Maxwell’s Equations

$$\begin{array}{rl}\mathrm{\nabla <!--\; \nabla \; -->}\times <!--\; \times \; -->\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{B}}-<!--\; -\; -->\frac{1}{c}\frac{\mathrm{\partial <!--\; \partial \; -->}\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{E}}}{\mathrm{\partial <!--\; \partial \; -->}t}& =\frac{4\mathrm{\pi <!--\; \pi \; -->}}{c}\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{j}}\\ \mathrm{\nabla <!--\; \nabla \; -->}\cdot <!--\; \cdot \; -->\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{E}}& =4\mathrm{\pi <!--\; \pi \; -->}\mathrm{\rho <!--\; \rho \; -->}\\ \mathrm{\nabla <!--\; \nabla \; -->}\times <!--\; \times \; -->\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{E}}+\frac{1}{c}\frac{\mathrm{\partial <!--\; \partial \; -->}\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{B}}}{\mathrm{\partial <!--\; \partial \; -->}t}& =\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{0}}\\ \mathrm{\nabla <!--\; \nabla \; -->}\cdot <!--\; \cdot \; -->\stackrel{⃗<!--\; ⃗\; -->}{\mathbf{B}}& =0\end{array}$$

All I had to do was insert a javascript in my wordpress header file. But I am already loading too many javascript files in my header, So I added a custom field in my wordpress called "math". If its set to yes then it loads this MathJax otherwise it wont. Also I had to put the MathML code inside a pre tag to keep it clean.

Can you see it? if not what browser and OS are you using?