Quantum Diaries

(Note: This post requires JavaScript to be enabled on your browser.)

For years the internet has been a wonderful tool for people all over the world, bringing distant communities together, changing the way think about communication and information and having a huge impact for the better in nearly every aspect of our lives. Unfortunately there are still major problems when it comes to sharing scientific knowledge. This is changing very quickly though, making this an exciting time for internet-savvy scientists.

How did this kind of situation arise? Science journals have had their own markup language, LaTeX, for decades, predating the internet by many years. LaTeX is available to anyone makes it very easy to generate simple, attractive documents with excellent support for a wide variety of mathematical symbols. (Making complicated documents isn’t quite so easy, but still possible!) Making documents like this can be very intensive, as every margin and the space between every character is analyzed, with restrictions imposed by paper sizes.

On the other hand, the hypertext markup language (HTML) and cascading style sheets (CSS) are the standards which are widely used on the internet, and they are focused mainly on the aesthetics of more popular kinds of journalism. The HTML standards are intended to work on any operating system, and they should give a semantic description of the content of a webpage, without consideration for style. The CSS then take over and decide how the information is displayed on the screen. (Check out the CSS Zen Garden to see the power of CSS.) In principle, writing a webpage that follows the HTML and CSS standards is quite easy, but in reality it’s it can be a very problematic and tedious task. The internet is a dynamic medium, with different developers trying different tricks, different browsers supporting different features and no real control concerning the best practices. Groups such as W3C have tried to standardize HTML and CSS, with quite a lot of success, but it’s a slow process and it has taken years to get to where we are today.

Trying to get mathematical markup with these kinds of constraints is quite tricky! Math is inherently two dimensional, making good use of subscripts, superscripts, indices, fraction, square roots… HTML is much better at handling long passages of text which flow from one line to the next, without much scope for anything as exciting as a nested superscript. And so for a long time it became very awkward to include math on a webpage.

Over the years there have been many approaches to this problem, including LaTeX2HTML, MathML, using images, or expecting the poor user to interpret LaTeX markup! Eventually, the CSS standards settled down, browsers started to conform to the same behavior, and it became possible to display math without the use of any images, plugins or other suboptimal solutions.

With the exciting developments of Web 2.0, we have access to MathJAX. We can take LaTeX markup and put it directly into a webpage and MathJAX can turn this:

\[
  \nabla \times \vec{H} & = & \vec{J} + \frac{\partial \vec{D}}{\partial t}
\]

into this:

\[
\nabla \times \vec{H} = \vec{J} + \frac{\partial \vec{D}}{\partial t}
\]

Beautiful! It also works inline like this: \(E=mc^2\) becomes \(E=mc^2\). (None of this will work if JavaScript is disabled on your browser, which is a shame for you, because it looks very pretty on the page!) Using MathJAX is as simple as writing normal LaTeX between \[ and \] symbols for block-level text, \( and \) symbols for inline text.

We finally have a way to show equations on any browser, with any operating system, that complies with all the standards laid out by the W3C. So much for math markup. What about technical drawings and graphs? Scientists have been using vector graphics in their work for decades, so it would also be nice to have a way to show these kinds of images.

Some browsers have supported vector graphics for a few years, but once again, different browsers behave differently, and vector graphics have been developed rather late, so there are large performance issues. However, with the development of the next generation of HTML browsers should support a brand new kind of image, the HMTL5 canvas. It allows designers of websites to draw detailed images on the fly, even allowing the user to interact with the images! It will take some time before most of the users on the internet can have access to the HTML5 canvas, so until then we can’t rely on these new features to share information.

On the other hand it means that we living in a very exciting time where anyone can develop their own work using the canvas, and help shape our experiences with the internet in the future! The standards used online have always lagged behind how the latest developers are using the tools at their disposal, and when the standards get updated the ingenuity of the developers is taken into account. Soon the canvas will support 3D graphics, making our online experiences even richer! Want to help shape how this is developed? Then get involved! Try out the canvas today and see what you can create! There are dozens of fascinating examples at Canvas Demos. Here are some of my favorites:

• MolGrabber 3D– a great way to visualize molecules in three dimensions.
• Flot– how to show graphs on a webpage.
• Pacman– a clone of the classic arcade game!

The internet is going to get very cool in the near future, giving us the ability to share information like never before! When anyone can create animations and simulations, blogs like this will become even more interactive, even more compelling and even more useful. I can’t wait to see what MathJAX and the HTML5 canvas will deliver!