When you start a blog site, the first thing you think about is how the math will look.

Well OK, if you are anything like me, the first thing you think about is how the math will look. And the graphs. And the plots. And possibly how difficult it will be to create them — after all, if it’s a lot of work, you might forego illustrating your points with easy-to-grasp figures or enlighteningly set formulas and go with a less-than-optimal textual representation instead.

One of the first things I did after installing WordPress was sifting through the plug-ins looking for one that would make this task simple and fun. There are a few dealing with LaTeX (WP LaTeX being the obvious choice), though graphing and plotting are represented less. No matter, at least is working …

But what’s that, a rasterized image ? Isn’t there a better way that’ll also display beautifully when scaled up or displayed on different-sized screens ? Vector graphics are nothing new, and Scalable Vector Graphics is an open standard published by the W3C quite some time ago; by now, browsers will surely support it …

(imagine me carrying on this train of thought for a bit and, as if by magic, arriving at …)

Continue reading ‘Rendering TeX & Graphs to SVG in WordPress’ »

While getting this page ready to display good-looking math, graphs, and figures, I ran into a few problems with how the current browsers handle SVG. I was somewhat surprised considering the age of some of the associated bugs. To give a little bit of background on what I am talking about, let’s first consider the problem I am trying to solve (and how one could go about it). I will choose a simple term as an example : the sum of all cubes from 1 to 100. While there is a markup-language called MathML which could be used to render it, the browser-support is very shaky — and the output is often not pretty. The alternative I’d like to pursue is to embed a rendering of the term as a graphics-file. The easiest way to do that is to just use a rasterized image like so (this works in any browser, including backward ones from Redmond) :

<img src="term.png" alt="sum_{i=1}^{100}i^3" />

This solution is not very elegant however. The author has to guess the resolution and screensize of the reader (so as to provide a properly-sized image), and zooming or printing makes the term really ugly :

<img src="term.png" alt="sum_{i=1}^{100}i^3" width="78" height="96" />

You may have noticed that the width- and height-attributed are given here; this is not necessary if you want to use the intrinsic size of the image (as in the first example), and no browser requires it for proper display; in the second example, these attributes are used to illustrate the effect of scaling of a rasterized image.

To avoid such problems when the originating image is clearly scalable/vectorized, I want to use Scalable Vector Graphics instead. All modern browsers support this open standard, at least in name. The handling of that support, however, differs.

Continue reading ‘Cross-Browser SVG Issues’ »