JsMath

This page is dedicated to jsMath, a javascript that allows to render LaTeX formula in HTML pages with very high output quality and that works across multiple browsers on Windows, Linux and Mac.

Reference instructions:

• Install & testing
• Installing extra fonts

Client-Side Install

1. Install the standard fonts
   
   • On Windows, the fonts are in package called TeX-fonts-25.zip (from this page)
     
   • On Linux, due to FireFox issue since v3.5, use the package TeX-fonts-linux.tgz (from this page).
2. Download all extra fonts (from here), and install them on your system. Typically not all fonts are needed (msam10.ttf and msbm10.ttf are the most frequently used ones) but since you never know which ones are going to be used by the server, better install them all.

Server-Side Install

1. Install jsmath main package.
2. Install extra fonts package for fonts msam10 and msbm10 (these fonts are required for extension AMSsymbols, which is frequently used).
   The packages are found here. To install them, create a directory fonts in jsmath directory, and unzip them there, i.e. you should end up with 2 directories named ./jsmath/fonts/msam10 and ./jsmath/fonts/msbm10.

Install on MediaWiki

On MediaWiki, there exists an extension that eases the use of jsMath. We describe here how the extension is installed on this wiki.

Reference information:

• Mediawiki extension JsMath

Install JsMath

Install jsMath in /miki/jsmath. See detailed instructions

Configure jsMath

Detailed instructions are available from the homepage of jsMath. This extension assumes that jsMath is configured through the file easy/load.js.

1. jsMath can find out the root directory where it is installed, but it doesn't hurt to help it a bit:

     root: "/miki/jsmath",
   

2. Increase a bit the size of formulae:

     scale: 130,
   

3. Turn off jsMath's special interpretation of \(, \[, $ and $$ as math mode delimiters.

     processSlashParens: 0,       // process \(...\) in text?
     processSlashBrackets: 0,     // process \[...\] in text?
     processDoubleDollars: 1,     // process $$...$$ in text?
     processSingleDollars: 0,     // process $...$ in text?
     processLaTeXenvironments: 0, // process \begin{xxx}...\end{xxx} outside math mode?
     fixEscapedDollars: 0,        // convert \$ to $ outside of math mode?
     doubleDollarsAreInLine: 1,   // make $$...$$ be in-line math?
     allowDisableTag: 1,          // allow ID="tex2math_off" to disable tex2math?
   

4. Load AMSmath and some extra fonts. Notice that you also need to install the extra fonts cmbsy10, cmmib10, msam10 and msbm10 on the server, as outlined on this page.

     loadFiles: ["extensions/AMSmath.js", "extensions/AMSsymbols.js",
                 "extensions/boldsymbol.js", "extensions/moreArrows.js"],
     loadFonts: ["cmmib10", "cmbsy10"],
   

5. Finally, we disable the use of image fonts to save space on the server:

     noImageFonts: 1
   

Install Extra Fonts

Install the following jsMath extra fonts package (in /miki/jsmath/fonts) : cmbsy10, cmib10, msam10, msbm10. Keep only the files def.js since we don't use image fonts.

Install the extension

Create the directory /miki/extensions/JsMath and save the files there (2 files from here: JsMath.i18n.php and JsMath.php).

Configure the extension

Edit /miki/LocalSettings.php as follows:

1. TeX support must be enabled (see this page), but it is not mandatory to compile the render engine. Only setting this variable is enough:

   $wgUseTeX = true;
   

2. Then add the following lines at the end of the file /miki/LocalSettings.php. This selects jsMath as the default rendering engine for new users, and then loads the extension.

   $wgJsMathDefault = 1;
   $wgJsMathRoot = "/miki/jsmath";
   require_once( "$IP/extensions/JsMath/JsMath.php" );
   

   See the Mediawiki extension doc to enable plugins by default (like smallFonts.js).

3. For each user in MediaWiki, select jsMath as method to render math formulae. For new user, this shall be done automatically.

Troubleshoot

• I get the error message "unknown control sequence \msbm" when using \mathbb{...} (blackboard bold).

Most probably this is because jsmath cannot find the font definition file at ./jsmath/fonts/msbm10/def.js on the server side (see [1]). \mathbb uses the fonts msbm, and to work properly, the author package msbm10.zip (see here) must be unzipped in directory ./jsmath/fonts/. Also for best rendering the msbm10 truetype font should be installed on the client side.

Usage

There are different ways to embed a LaTeX in HTML:

<span class="math">...</span>	This will create an inline formula (\textstyle).
<div class="math">...</div>	This will create a block formula (\displaystyle).
$...$	This will create an inline formula (\textstyle).
$$...$$	This will create a block formula (\displaystyle).

Given the configuration above, the same applies on MediaWiki, with the following differences:

<math>...</math>	This will create an inline formula but with \displaystyle style!
$...$	Single dollar signs are ignored (to prevent expansion in case of text like between $10 and $20).
$$...$$	This will create an inline formula (\textstyle).

There are several ways to tell jsMath not to process HTML or wiki text:

• Add a class tex2math_ignore to a container tag to prevent jsMath to process $...$ and $$...$$ inside that container. For instance:

  <div class="tex2math_ignore">These formula will be ignored by jsMath: $a^2$ and $$a^3$$.</div>
  

• However this method has no effect on tags <math>, <span class="math">, <div class="math">. To ignore these, embed them in a <pre>, <nowiki> blocks or similar.

Examples

Using math tag

• Some text before <math>\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</math> and after

Some text before <math>\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</math> and after

• Some text before <math>\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after

Some text before <math>\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after

• Some text before <math>\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after

Some text before <math>\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }</math> and after

Using div tag

• Some text before <div class="math">\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</div> and after

Some text before

\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)

and after

Using span tag

• Some text before <span class="math">\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)</span> and after

Some text before \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) and after

Using $$

• Some text before $$\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)$$ and after

Some text before $$\sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)$$ and after

• Some text before $$\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after

Some text before $$\textstyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after

• Some text before $$\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after

Some text before $$\displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} $$ and after

Using $

• But not $a_i^e$.

But not $a_i^e$.