## Rendering TeX & Graphs to SVG in WordPress

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 $LaTeX$ 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 …)

So WP Render is a plug-in based on WP LaTeX doing the same thing, but also generating the equivalent SVG images from your favorite formulas and understanding GraphViz and GnuPlot as well as $\LaTeX$

What does that mean, really ? Allow me to illustrate :

### LaTeX

$\displaystyle P_\nu^{-\mu}(z)= \frac{\left(z^2-1\right)^{\frac{\mu}{2}}} {2^\mu \sqrt{\pi}\Gamma\left(\mu+\frac{1}{2}\right)} \int_{-1}^1 \frac{\left(1-t^2\right)^{\mu -\frac{1}{2}}} {\left(z+t\sqrt{z^2-1}\right)^{\mu-\nu}} dt$

Symbols too small ? Too much math on too little screen-space ? Just zoom in ! (CTRL+Mousewheel should work on most browsers). The formula is the one WP LaTeX uses as a test, as well. Depending on how decent your browser-support for SVG is, the title/alternate image of the above is the LaTeX-expression used to render it; if your browser does not support SVG at all (Internet Explorer, for instance, lives in backward country), you should see a rasterized PNG image instead.

[latex size=3] \displaystyle P_\nu^{-\mu}(z)= \frac{\left(z^2-1\right)^{\frac{\mu}{2}}} {2^\mu \sqrt{\pi}\Gamma\left(\mu+\frac{1}{2}\right)} \int_{-1}^1 \frac{\left(1-t^2\right)^{\mu -\frac{1}{2}}} {\left(z+t\sqrt{z^2-1}\right)^{\mu-\nu}} dt [/latex]

That’s how it is done in WordPress.

### GraphViz

With $\LaTeX$ out of the way, let’s look at GraphViz :

$Graph Rendering$

(taken straight from the GraphViz examples)

[dot class="aligncenter"] digraph G {   subgraph cluster_0 { style=filled; color=lightgrey; node [style=filled,color=white]; a0 -> a1 -> a2 -> a3; label = "process #1"; }   subgraph cluster_1 { node [style=filled]; b0 -> b1 -> b2 -> b3; label = "process #2"; color=blue } start -> a0; start -> b0; a1 -> b3; b2 -> a3; a3 -> a0; a3 -> end; b3 -> end;   start [shape=Mdiamond]; end [shape=Msquare]; } [/dot]

You can specify a different layout algorithm with the k-Parameter to [dot] (possible choices are 'dot', 'circo', 'neato', 'twopi', 'fdp', and 'sfdp').

### gnuplot

gnuplot supports all manner of plots, charts, etc. — and now so does WordPress.

$Plot$

(taken from the gnuplot demo)

[gnuplot] set border 4095 front linetype -1 linewidth 1.000 set format cb "%.01t*10^{%T}" set samples 40, 40 set isosamples 40, 40 set hidden3d offset 1 trianglepattern 3 undefined 1 altdiagonal bentover set ticslevel 0 set title "color lines: 'splot sin(y)/(y) with lines palette'" set xlabel "X" set xrange [ -10.0000 : 10.0000 ] noreverse nowriteback set ylabel "Y" set yrange [ -10.0000 : 10.0000 ] noreverse nowriteback splot sin(y)/(y) w lines palette [/gnuplot]

The [gnuplot]-code can take several parameters; sizex and sizey are self-explanatory. font and fontsize should be, too (the latter is in points); which ones work depends on which are installed on your system and the way gnuplot has been compiled. dynamic can is a boolean value; if it’s set, the SVG output will lack a viewBox, which will allow viewers to fill as much space as is available (in WordPress’ case that’s the width of the post column, usually).

### Further examples

#### Equation Array

Let $\mathbb{P}$ be the set of prime numbers
Let $P_{a}$ be the set of prime factors of $a$
Let $T_{a}$ be the set of divisors of $a$

$\begin{eqnarray*} p \in \mathbb{P} & \stackrel{(1)}{\Rightarrow} &P_{p^{e}} = \{p\} \\ & \stackrel {(2)}{\Rightarrow} & \forall n \in \{0,1,2,\ldots, p^{e}\}: ggT (p^{e},n)=1, if : p\not|n \\ & \Rightarrow & \forall m \in M = \{0,1,2,\ldots, p^{(e-1)} \} : (m\cdot p) \not\in \mathbb{Z}^*_{p^e} \\ & \Rightarrow & \forall m \in M = \{n\cdot p | n\in \{0,1,2,\ldots,p^{e-1}\}\}: m \not\in \mathbb{Z}_{p^{e}}^{*} \wedge \\ & & \forall i \in N = \{j | j \in \{0,1,2,\ldots, p^{e}\} \wedge j\not\in{M}\}: i\in \mathbb{Z}_{p^e}^* \wedge \\ & & M \cup N = \mathbb{Z}_{p^e} \wedge M \cap N = \varnothing \\ & \Rightarrow & \Phi(p^{e}) \stackrel{(3)}= |\mathbb{Z}^*_{p^e}| \stackrel{(4)}= |\mathbb{Z}_{p^e}|-|M| = (p^e+1)-(p^{(e-1)}+1) \\ & & = p^e+1-p^{(e-1)}-1 = p^{e} - p^{(e-1)} = p\cdot p^{(e-1)} - p^{(e-1)} = (p-1)p^{(e-1)} \end{eqnarray*}$
1. follows from the uniqueness of the factorization
2. follows from $\forall n\in T_{a} \exists q\in P_{a}:q|n$
3. follows from definition 1.4.2
4. follows from the definition of $\mathbb{Z}^*_m$ as
a subset of $\mathbb{Z}_m$ coprime to $m$

(from an exercise in a cryptography course)

Let $latex \mathbb{P}$ be the set of prime numbers<br /> Let $latex P_{a}$ be the set of prime factors of $latex a$<br /> Let $latex T_{a}$ be the set of divisors of $latex a$   [latex nomathmode=true] \begin{eqnarray*} p \in \mathbb{P} & \stackrel{(1)}{\Rightarrow} &P_{p^{e}} = \{p\} \\ & \stackrel {(2)}{\Rightarrow} & \forall n \in \{0,1,2,\ldots, p^{e}\}: ggT (p^{e},n)=1, if : p\not|n \\ & \Rightarrow & \forall m \in M = \{0,1,2,\ldots, p^{(e-1)} \} : (m\cdot p) \not\in \mathbb{Z}^*_{p^e} \\ & \Rightarrow & \forall m \in M = \{n\cdot p | n\in \{0,1,2,\ldots,p^{e-1}\}\}: m \not\in \mathbb{Z}_{p^{e}}^{*} \wedge \\ & & \forall i \in N = \{j | j \in \{0,1,2,\ldots, p^{e}\} \wedge j\not\in{M}\}: i\in \mathbb{Z}_{p^e}^* \wedge \\ & & M \cup N = \mathbb{Z}_{p^e} \wedge M \cap N = \varnothing \\ & \Rightarrow & \Phi(p^{e}) \stackrel{(3)}= |\mathbb{Z}^*_{p^e}| \stackrel{(4)}= |\mathbb{Z}_{p^e}|-|M| = (p^e+1)-(p^{(e-1)}+1) \\ & & = p^e+1-p^{(e-1)}-1 = p^{e} - p^{(e-1)} = p\cdot p^{(e-1)} - p^{(e-1)} = (p-1)p^{(e-1)} \end{eqnarray*} [/latex] <ol> <li>follows from the uniqueness of the factorization</li> <li>follows from $latex \forall n\in T_{a} \exists q\in P_{a}:q|n$</li> <li>follows from definition 1.4.2</li> <li>follows from the definition of $latex \mathbb{Z}^*_m$ as a subset of $latex \mathbb{Z}_m$ coprime to $latex m$</li> </ol>

#### Function plot

$Plot$
[gnuplot] plot [-pi/2:pi] cos(x),-(sin(x) > sin(x+1) ? sin(x) : sin(x+1)) [/gnuplot]

#### Simple, undirected graph

$Graph Rendering$
[dot] graph test123 { a -- b -- c; a -- {x y}; x -- c; x -- y; } [/dot]

1. Randall says:

This is positively delicious. Thanks. Likewise thanks for the primer on cross-browser SVG in the previous post.

2. Dave says:

Hi. right now im trying to make wordpress to show something.
what graph packages are available for me as a webspace user without access to the webserver root? are there packages i can just put on my webspace folder and use them ?

thx

3. Grant says:

This looks great. But I just tried to install it on my WP site and I’m running into two problems:

1) “pydvi2svg path not specified” (it’s installed in /usr/local/bin), and

2) The string ‘options['includeselector']) { ?> ‘ appears in the upper-left corner of every page displayed from the site. I’m not a PHP programmer, but if you can point me in the right direction, I’ll see if I can fix things up.