LaTeX to SVG and PNG rendering class for MediaWiki

The LaTeXSVG rendering class for MediaWiki will only work for MediaWiki installations up to version 1.17. As of MediaWiki 1.18, the math rendering capability has been outsourced. Changes are necessary in order to get LaTeXSVG to work in MediaWiki versions ≥ 1.18.

It could take a couple of minutes to get LaTeXSVG even to work in newer versions — or a couple of hours; I don't know. In lack of time I decided to mark LaTeXSVG as obsolete from now on, even not least because a modern, cross-browser compatible, performant, feature-rich and easy-to-integrate mathematics/LaTeX JavaScript display engine exists with MathJax, which can be easily integrated into MediaWiki.

Difference of SVG and PNG formula rendering

Some time ago I tried to print a page with LaTeX formulas of Wikipedia. The result was really ugly, because all LaTeX expressions in the MediaWiki software will be rendered to PNG images by default. Due to the nature of rasterized images, all scalings generate artifacts („Jaggies“). So a solution would be a vector image of the formulas.

Vector images in HTML is a hot topic today, because rasterized image file types (e.g. png, gif, jpg) are the most common in the web caused by the lack of browser support of vector images. SVG (Scalable Vector Graphics) are a really good thing, which is currently being implemented in all major browsers.

So I had the wish to render math within the MediaWiki software to an SVG image instead of an PNG image. Because all SVG implementations in the major browsers are experimental, a fallback solution is neccessary.

I have written a replacement for the original Math.php of MediaWiki, which works on Windows servers (I think it should even work on Linux systems, but at the moment I have no time to verify that), called the LaTeXSVG class. This class enables MediaWiki to render LaTeX formulas both to an PNG and an SVG image. This class automatically generates HTML code for the embedding of the SVG image with the fallback solution of an PNG image within a page.

You can compare an original rendered formula and the result of this MediaWiki modification (my website is even generated by MediaWiki) here:

MediaWiki formula rendering:
LaTeXSVG class rendering:
In quantum mechanics this equation is known as the Schrödinger equation for a single particle in a potential.

If you have an up-to-date browser (e.g. Firefox 3.6 or newer) you should notice a difference between the two formulas above, if you zoom in (in Firefox: hold down Ctrl and press +): The first formula is showing rasterization artifacts, because it is an PNG image. Thats the way formulas are displayed by the MediaWiki software by default. The second formula can be zoomed or scaled by any factor: It is ever sharp. You can even print this page without loss of any formula quality.

LaTeXSVG rendering class for your own MediaWiki installation

The LaTeXSVG class for MediaWiki is available for download here.

Requirements

LaTeXSVG uses some tools to render LaTeX formulas and to convert them into SVG and PNG images. At the moment this mass of tools is needed, because SVG support is experimental or yet not implemented by the most tools. Anyway, to get LaTeXSVG work you will need the following software installed on your server:

MikTeX 2.8+
ActivePerl 5.12+
Ghostscript 8.70+
pdfcrop.pl (placed in $_tmpdir; see Installation)

Installation

Download LaTeXSVG from here (the file is named Math.php).
Rename the original Math.php in your MediaWiki installation (e.g. c:\path\to\mediawiki\includes\Math.php) to Math.php.orig.
Move the downloaded Math.php to this directory.
Download pdfcrop.pl to the temporary directory for math rendering (e.g. c:\path\to\mediawiki\images\temp).
Configure LaTeXSVG.

Configuration

Open Math.php in a text editor (e.g. Notepad++) and look for these lines:

class LaTeXSVG
{
    # *******************************************************************************
    #                                   CONFIG
    # *******************************************************************************
    
    /// relative URL to math directory (public on the webserver; w/o trailing slash)
    private $_http_path =       'http://www.yourwiki.com/images/math';
    /// file system path to the $IP/images/math dir (without trailing slash)
    private $_mathdir =         'C:/path/to/your/wiki/images/math';
    /// file system path to a temp dir (without trailing slash)
    private $_tmpdir =          'C:/path/to/your/wiki/images/tmp';
    /// file system path to pdflatex.exe (MikTeX)
    private $_path_pdflatex =   'C:/path/to/MiKTeX28/miktex/bin/pdflatex.exe';
    /// file system path to perl.exe
    private $_path_perl =       'C:/path/to/Perl64/bin/perl.exe';
    /// file system path to gswin32c.exe (Ghostscript)
    private $_path_gs =         'C:/path/to/gs/gs8.70/bin/gswin32c.exe';
    
    /// max length of LaTeX formula (number of chars)
    private $_max_length =      4000;
    
    /// max width of generated PNG/SVG (pixel)
    private $_max_width =       900;
    
    /// max height of generated PNG/SVG (pixel)
    private $_max_height =      300;
    
    /// not allowed LaTeX tags in formula
    private $_latex_tags_blacklist = array(
        "include","def","command","loop","repeat","open","toks","output","input",
        "catcode","^^",
        "\\every","\\errhelp","\\errorstopmode","\\scrollmode","\\nonstopmode","\\batchmode",
        "\\read","\\write","csname","\\newhelp","\\uppercase", "\\lowercase","\\relax","\\aftergroup",
        "\\afterassignment","\\expandafter","\\noexpand","\\special"
        );
    
    /// LaTeX header
    private $_latex_header =    "\\documentclass[10pt,a4paper]{scrreprt}\\n\\usepackage{amssymb,amsmath}
                                \\usepackage[latin1]{inputenc}";
    
    
    
    # *******************************************************************************

Change lines 72, 74, 76, 78, 80 and 82 to match your file system. Parameters in lines 85, 88, 91, 94 and 103 are optional and can be used to customize LaTeXSVG. You can find the explanation for the particular parameters inline.

If everything is fine with the installation, you can now render a LaTeX expression in your MediaWiki installation (e.g. <math>x+y=1</math>) without any errors.

Bugs & Feedback

Feedback and bug reports are ever welcome at this page.

License

I distribute LaTeXSVG under the terms of the Creative Commons - Attribution-Share Alike 3.0 Germany License.

— René Schwarz (talk) • 23:44, 11 February 2011 • 18 comments