Skip to content

Home

Jump to bottom Edit New page
Chris Maloney edited this page Feb 20, 2014 · 8 revisions

SvgTex

Running phantomjs

I will show how to install and run the script on a linux system. First of all, let's install phantomjs. Although we can do this in our home directory without root privileges we will have to use these packages:

$ sudo apt-get install wget bzip2 libfreetype6 libfontconfig1 tar git

Download and extract phantomjs from phantomjs.org!

$ cd ~
$ wget https://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-$(arch).tar.bz2 -O - | tar xjf -

Point your PATH environment variable to bin directory of your phantomjs install. You can put this line to your .bashrc to make it permanent.

$ set $PATH=$PATH:phantomjs-1.9.1-linux-$(arch)/bin/

Type phantomjs and you should see interactive console. CTRL+d to exit.

Using SvgTex

First of all, download svgtex:

$ git clone https://github.com/agrbin/svgtex/ && cd svgtex

Run svgtex daemon with:

$ phantomjs main.js

Expected output is:

loading bench page
server started on port 16000
you can hit server with http://localhost:16000/?2^n
.. or by sending tex source in POST (not url encoded)

To convert TEX to SVG start up another console (or another window in screen or tmux) and try sending the tex code in HTTP query string:

$ wget 'http://localhost:16000/?2^x' -O power.svg

Or sending the tex in POST body.

$ wget http://localhost:16000/ --post-data="\sum_1^n n" -O gauss_sum.svg

While running these examples, in first console where svgtex daemon is running, you should see some debug info:

2^x.. 3B query, OK 1809B result, took 2ms.
\sum_1^n n.. 10B query, OK 2802B result, took 113ms.

Open up .svg files in browser to see the result.

Inline and display styles

By default, svgtex will produce inlined SVG fragments, eg. images that should be mixed with text. If this is not intended placement of an image, wrap your tex code in \displaystyle{ and } like in:

\displaystyle{
1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\quad\quad \text{for $|q|<1$}.
}

You can see the difference here:

Examples and benchmark

There is a folder examples in repos which contains few .tex examples with generated .svg files. To regenerate svg-s write a for loop in your shell while the daemon is running.

cd examples;
for i in *.tex; do
  wget http://localhost:16000/ --quiet --post-file=$i -O $i.svg;
done

It took 200ms on my machine to regenerate these 11 basic examples. The main optimization in SvgTex is in fact that the virtual browser which runs MathJax on server side is not powered off on every request.

Examples can be seen/downloaded from:

How to integrate

The SvgTex is used in application markup.xfer.hr as a thrift (http://thrift.apache.org) service. Server, written in PHP, keeps a running instance of svgtex daemon and on each thrift request does the new HTTP request to a daemon to obtain result.

When injecting SVG to a HTML page, we use

<span style="font-size:100%; display:inline-block;">..SVG..</span>

for inlined math, and

<div style="text-align: center;">..SVG..</span>

for display styled math.

See how it works without phantomjs

To understand the script more precisely, one can open index.html and engine.js in a web browser:

http://agrbin.github.io/svgtex/

At first, you will see rendering of an empty tex string. Later on, you can open up an developer console and type:

engine.process("\\sum_1^n n", function(tex, svg) {console.log(tex, svg);});

Note that double backslash is escaped into a single one in JavaScript string.

View source for more details. The code is small and simple and does the trick!

Add a custom footer
Add a custom sidebar
Clone this wiki locally