Writing Mathematics in WordPress

It would be nice to be able to use mathematics in WordPress to write equations as easily as I can write this sentence, but I can’t. What are the options for someone writing a technical blog?

LaTeX Plugin

LaTeX is a popular choice in the scientific community. It uses a  code to typeset equations. The final document is a postscript or  pdf document to produce a well typeset beautiful looking documents. For the web, LaTeX equations can be converted to .gif images. WordPress also has a plugin which uses LaTeX to render the code as gif images within your post. You might think, great problem solved but in order to use the plugin you must be able to install LaTeX on your server and this is an option which is not available to many people on managed hosts.

So, if LaTeX is out of the question, what are your options? Let’s have look.

MathML

It has been long awaited that browsers should adopt MathML which would allows mathematical equations to be rendered  using a set of tags in the code in a similar way to HTML.  However, there has not been a rush to implement this standard and as a result many browsers are unable to display MathML correctly or do not display it at all. While this state of afairs continues, MathML will not be adopted by the scientific community. We await progress in this area.

Equations as Images

You can use other equation editing programs to produce equations and save them as image. This can produce some good looking results but if you have a lot of equations, adding them to WordPress can be tedious and if you need to edit them it may want to stop you adding equations to your posts.

You could use text to create mathematics and this seems to be the option used by most people as long as the equations don’t involve fractions and other difficult to replicate features of equations.  You can write equations using just html but the results are awkward and difficult to read for all but the simplest mathematics.

CSS for Writing Equations

As I cannot have LaTeX on my blog. I have gone down the route of using Cascading Style Sheets (CSS) to display equations. The results are pretty good considering that it was never designed for this purpose. It works by altering the individual size, position, margins and padding around different text elements.

Most browsers support the use of HTML entity codes for mathematical symbols. A particularly difficult character to find is ħ which is used extensively in quantum physics. It has the code
ħ Other useful codes for mathematical and other symbols can be found from the link. The code for the CSS is give below:

#eqn {
border: none;
margin: 0;
font-size: 1em;
}

To create equations use the span tag with the desired class. For example to create the equation:

Differentials:

You may find that you need to alter some of the values depending on the font-size. This method has difficulty handling long fractions and also matrices but for most purposes it can be adopted as compromise until something better comes along.