Inquisitiones Mathematicae

Math, Programming, and Opinions

Experimenting with latex2html5: PSTricks to HTML interactivity

A Blog Entry

Posted: 10 April 2017

Time to Read: 10 mins


I recently learned about about latex2html5, a javascript library which allows one to write LaTeX and PSTricks to produce interactive objects on websites.1 1 This is part of a larger project called Mathapedia, which is an interesting endeavor that I haven't played around with too much yet. But more importantly, the author notes elsewhere that this is a proof of concept for a deeper project. So it is to be expected that this is a bit incomplete, and from this point of view this is a great proof of concept. At its core, it functions in a similar way to MathJax, which is what I use to generate mathematics on this (and my other) sites. As an example of MathJax, I can write the following.2 2 Or see most other posts on this site, or almost all posts on my main (math) website. MathJax rules the mathematical web. \begin{equation*} \int_0^1 f(x) dx = F(1) - F(0). \end{equation*} With latex2html5, it is very easy to produce interactive diagrams such as the following: (if you do not see a diagram, it may be necessary to reload the page once --- I haven't quite figured that out yet)
(move your mouse around near the circle: the line will follow your mouse): This is created with the extremely simple PSTricks code:
\userline[linewidth=1.5 pt, linecolor=white]{->}(0,0)(2,2)
The library is not perfect, however. For instance, I cannot find a way within the library itself to make the circle white. One nice feature of MathJax is that it plays very nicely with css. There are color features in the PSTricks library that latex2html5 bases its syntactical commands on, but not all of these features are implemented. However, one can make some very nice looking interactive diagrams, such as the following:3 3 If I were able to, I would have changed most of the colors of these objects as well.
This corresponds to the following PSTricks code.
\rput(0.3,3.75){ $Im$ }
\rput(3.75,0.3){ $Re$ }
\pscircle(0,0){ 3 }
\userline[linewidth=1.5 pt]{->}(1.500,0.000)(2.121,2.121)
\userline[linewidth=1.5 pt,linecolor=white]{->}(0,0.000)(2.121,2.121){(x>0) ? 3 * cos( atan(-y/x) ) :
-3 * cos( atan(-y/x) ) }{ (x>0) ? -3 * sin( atan(-y/x) ) : 3 * sin( atan(-y/x) )}
\userline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121){x}{0}{x}{y}
\userline[linewidth=1.5 pt,linestyle=dashed](-1.500,0.000)(2.121,2.121){0}{y}{x}{y}
I've played around quite a bit with these interactive pieces now, seeing what colors one can change and which pieces play better or worse together. Overall, this strikes me as one of the easiest ways for those familiar with LaTeX and PSTricks (like me and many other mathematicians) to produce interactive images on the web. The library is written well enough for me to easily integrate it into the flavor of this site, minus the color problems --- which is a pretty serious detractor. It was designed for people to write much more in LaTeX, with direct transition, but simply enough to work in other contexts. However, there are some aspects that are truly broken. Consider the following PSTricks code.
\userline[linewidth=1.5 pt, linecolor=white]{->}(0,0)(2,2)
This should create a white circle, and part of this circle should be filled in with white, and there is a line that follows the mouse around. Instead, we get the following (totally broken) image.4 4 Where did the color blue come from? Unfortunately, there doesn't seem to be clear documentation on what aspects of PSTricks are or are not covered, so it is not a priori possible to determine what should or shouldn't work.
I have hope for this project. I think this method of enabling interactivity is particularly clean, and I would love to see this work beautifully.