February 5, 2011


If you use Google Chrome, you can use this extension to display math on arXiv.org.

June 10, 2010

Display LaTeX math on web pages

This page provides some tools to display LaTeX math on web pages where a web designer did not provide a server-side way of doing so. Currently, such pages include arXiv.org and front.math.ucdavis.edu.

The programs also work in Gmail in "basic HTML" and "print" views. For the standard Gmail, you may use GmailTeX.

Solution 1: Use display-latex2

For Firefox: install the Greasemonkey extension (In Chrome, the equivalent of Greasemonekey is built-in.) Then install the userscript: display-latex2.user.js, which is an adaptation of the original userscript display-latex.user.js written by Steve Cheng.

If you are lucky, you don't have to install any math fonts. In Windows 7, the included Cambria Math fonts should work nicely. In Linux, perhaps a beta version of STIX fonts in included. If you are not lucky, you can install STIX fonts from stixfonts.org.

Solution 2: Use MathJax + userscript

This solution assumes that you have access to a web server and can install Javascript programs on it.

  1. Download MathJax and install it locally on your web server.
  2. Install the necessary math fonts, which must be from either STIX or MathJax. (Only some Linux distributions include STIX fonts by default, but an old, outdated, beta version.)

    The easies is to go to http://www.stixfonts.org, download, and install the free STIX fonts (from the Fonts subdirectory of the ZIP file).

    Another choice is the TeX fonts derived from Donald Knuth's Computer Modern fonts, from MathJax distribution http://www.mathjax.org. These can be found in MathJax-webfonts-beta2.zip, in the subdirectory fonts/HTML-CSS/TeX/otf. (Note that you don't have to unzip the whole file, which on Windows takes about an hour, just copy that small subdirectory from inside the zipped file.)

  3. Install this simple userscript: mathjaxthispage.user.js. This userscript assumes that you installed MathJax in http://localhost/MathJax/MathJax.js. Note that it has to be properly configured. The most important part is that the variable 'inlineMath' in config/MathJax.js has to be set to treat single dollars $...$ as math, which is not the default.
You now should be set.

Solution 3: Use MathJax + bookmarklet

Instead of using Greasemonkey, drag this link to the bookmark bar to create a bookmarklet: TeX page. Then simply click on it whenever you want to typeset math on page. Perhaps this is preferable to the previous solution which would download MathJaX (which is quite large) every time.

Again, this bookmarklet assumes that you installed MathJax in http://localhost/MathJax/MathJax.js and properly configured the variable inlineMath.

Muting TeX errors (optional)

The following settings in your local config/MathJax.js make for a more pleasant viewing experience when browsing the pages with non-standard TeX macros, for example arXiv.org.

		extensions: ["tex2jax.js", "TeX/noErrors.js", "TeX/noUndefined.js"],

and inside the TeX block, the following code:

  //  These parameters control the TeX input jax.
  TeX: {
            noErrors: {
                inlineDelimiters: ["",""],   // or ["$","$"] or ["\\(","\\)"]
                    multiLine: false,             // false for TeX on all one line
                    style: {
                    "font-family": "serif",
                        "font-size":   "120%",
                        "color":       "gray",
                        "border":      ""
                        // add any additional CSS styles that you want
                        //  (be sure there is no extra comma at the end of the last item)
            noUndefined: {
                attributes: {
                    mathcolor: "red",
                        //                      mathbackground: "#FFEEEE",
                        mathsize: "100%"

    // The rest follows...		

Using the native MathMML output

If you use Solution 1, you should be able to see \mathbb, \mathcal, and \mathfrak characters without any further work. With MathJax, if you decide to use the native MathMML instead of HTML-CSS output, by setting

jax: ["input/TeX","output/NativeMML"],

you will have to overcome an old Mozilla bug. Add the following to your userContent.css file (see Customizing Mozilla). The code below assumes that you chose MathJax math fonts. If you use STIX fonts, you will need to modify these lines accordingly.

math { font-size: 112% }

[mathvariant="double-struck"] {font-family: MathJax_AMS; }
[mathvariant="script"] {font-family: MathJax_Script; }
[mathvariant="fraktur"] {font-family: MathJax_Fraktur;}
[mathvariant="-tex-caligraphic"] {font-family: MathJax_Caligraphic; }
[mathvariant="bold-script"] {font-family: MathJax_Script; font-weight: bold;}
[mathvariant="bold-fraktur"] {font-family: MathJax_Fraktur; font-weight: bold;}
[mathvariant="monospace"]{font-family: monospace} 

The first line controls the magnification of math output, and you can change it to your liking. The other lines are needed to fix a bug with Mozilla's display.

For font consistency, you could also type 'about:config' (without the quotes) in the location bar, and change the variable font.mathfont-family to

MathJax_Main, MathJax_Math, MathJax_Size1, MathJax_Size2, 
MathJax_Size3, MathJax_Typewritter, MathJax_AMS, MathJax_Caligraphic, 
MathJax_Fraktur, MathJax_SansSerif

About the author

My name is Valery Alexeev, and I am a mathematician at the University of Georgia. For feedback or bug reports about this web page, you may use this email.