JsMath

From miki
Jump to navigation Jump to search

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:

Alternatives to JsMath:

  • MathJax, which seems to use server-side fonts, and so might be more interesting than JsMath

Client-Side Install

  1. Install the standard fonts
    • On Windows, the fonts are in package called TeX-fonts-15.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:

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 \( \[ $ $$ 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

Overview

Description \textstyle{} \displaystyle{}
Superscript: a^e
Only first letter or use {}! 		$$\textstyle{a^e}$$ $$\displaystyle{a^e}$$
Subscript: a_i
Only first letter or use {}! 		$$\textstyle{a_i}$$ $$\displaystyle{a_i}$$
Sub/Superscript: a_i^e
Subscript first, superscript next 		$$\textstyle{a_i^e}$$ $$\displaystyle{a_i^e}$$
Fraction: \frac ab, \frac12, \frac{25}{32}
One letter for each - or use {} 		$$\textstyle{\frac ab, \frac12, \frac{25}{32}}$$ $$\displaystyle{\frac ab, \frac12, \frac{25}{32}}$$
Combinatorial: k \choose r $$\textstyle{k \choose r}$$ $$\displaystyle{k \choose r}$$
Sum: \sum_i^ea, \sum_{ijk}^{efg}abc $$\textstyle{\sum_i^ea, \sum_{ijk}^{efg}abc}$$ $$\displaystyle{\sum_i^ea, \sum_{ijk}^{efg}abc}$$
Limit: \lim_ia $$\textstyle{\lim_ia}$$ $$\displaystyle{\lim_ia}$$
\sqrt, \surd $$\textstyle{\sqrt{ x^{2}+\sqrt{y} }} \qquad \textstyle{\surd[x^2 + y^2]}$$ $$\displaystyle{\sqrt{ x^{2}+\sqrt{y} }} \qquad \displaystyle{\surd[x^2 + y^2]}$$
\bar, \overline, \underline $$\textstyle{\bar m + \bar n} \qquad \textstyle{\overline{m+n}} \qquad \textstyle{\underline{m+n}}$$ $$\displaystyle{\bar m + \bar n} \qquad \displaystyle{\overline{m+n}} \qquad \displaystyle{\underline{m+n}}$$
\vec, \overrightarrow, \overleftarrow $$\textstyle{\vec m + \vec {WM}} \qquad \textstyle{\overrightarrow{WM}} \qquad \displaystyle{\overleftarrow{WM}}$$ $$\displaystyle{\vec m + \vec {WM}} \qquad \displaystyle{\overrightarrow{WM}} \qquad \displaystyle{\overleftarrow{WM}}$$
\sum, \int, \prod $$\textstyle{\sum_{i=1}^{n} \qquad \int_{0}^{\frac{\pi}{2}} \qquad \prod_\epsilon }$$ $$\displaystyle{\sum_{i=1}^{n} \qquad \int_{0}^{\frac{\pi}{2}} \qquad \prod_\epsilon }$$
\cdot, \cdots, \ldots $$\textstyle{{\sigma}_1 \cdot {\sigma}_2 \quad x_{1}+\cdots+x_{n} \quad x_{1},\ldots,x_{n}}$$ $$\displaystyle{{\sigma}_1 \cdot {\sigma}_2 \quad x_{1}+\cdots+x_{n} \quad x_{1},\ldots,x_{n}}$$
Fonts
\mathrm{a b c A B C~1+2=3} $$\textrm{a b c A B C~1+2=3}$$
\mathit{a b c A B C~1+2=3} $$\mathit{a b c A B C~1+2=3}$$
\mathbf{a b c A B C~1+2=3} $$\mathbf{a b c A B C~1+2=3}$$
\mathsf{a b c A B C~1+2=3} $$\mathsf{a b c A B C~1+2=3}$$
\mathsf{\mathrm{a b c A B C~1+2=3}} $$\mathsf{\mathrm{a b c A B C~1+2=3}}$$
\mathtt{a b c A B C~1+2=3} $$\mathtt{a b c A B C~1+2=3}$$
\mathbb{ABC{DEF}GHI} $$\mathbb{ABC{DEF}GHI}$$
\mathbb{AB...Z} $$\mathbb{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$$
\mathcal{AB...Z} $$\mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$$
\mathfrak{AB...Z} $$\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ}$$
Greek Letters
\alpha, \beta, etc. (note no \omicron) $$\alpha \beta \gamma \delta \epsilon \zeta \eta \theta \iota \kappa \lambda \mu \nu \xi \pi \rho \sigma \tau \upsilon \phi \chi \psi \omega$$
\varepsilon, \vartheta, \varpi, \varrho, \varsigma, \varphi $$\varepsilon \vartheta \varpi \varrho \varsigma \varphi$$
\Delta, \Theta, \Lambda, \Xi, \Pi, \Sigma, \Upsilon, \Phi, \Psi, \Omega $$\Delta \Theta \Lambda \Xi \Pi \Sigma \Upsilon \Phi \Psi \Omega$$
Some common symbols...
More here
\to $$\to$$ \infty $$\infty$$ \forall $$\forall$$
\in $$\in$$ \neq $$\neq$$

Arrays

Description \textstyle{} \displaystyle{}
\begin(array) table.
  • l left-aligned
  • c centered
  • r right-aligned

Use & for column switch and \\ to break the lines

$$\displaystyle{y = \left\{ \begin{array}{ll} a & \textrm{if d>c}\\ b+x & \textrm{in the morning}\\ l & \textrm{all day long} \end{array} \right.}$$

(note the use of invisible \right).

\begin(eqnarray) acts as a 3-col {rcl} table.

Use & for column switch and \\ to break the lines

$$\displaystyle{\begin{eqnarray} f(x) & = & \cos x \\ f’(x) & = & -\sin x \\ \int_{0}^{x} f(y)dy & = & \sin x \end{eqnarray}}$$

Formatting

Description \textstyle{} \displaystyle{}
Spacing

Note that because | has special meaning in wikitext, we embed the formula in a <nowiki> tag.

\! - 3/18 em $$| \! |$$
0 em $$| |$$
\, 3/18 em $$| \, |$$
\: or \> 4/18 em $$| \: |$$ or $$| \> |$$
\; 5/18 em $$| \; |$$
~ 1/3 em $$| ~ |$$
\quad 1 em $$| \quad |$$
\qquad 2 em $$| \qquad |$$

eg: $$\displaystyle{\int\!\!\!\int_{D} g(x,y) \, \textrm{d}x\, \textrm{d}y}$$ better than $$\displaystyle{\int\int_{D} g(x,y) d x d y}$$

Size
Controlling size with \textstyle and \displaystyle. Also within eg. \frac

$$\textstyle{ \frac{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }{ \left[ \sum_{i=1}^n(x_i-\overline x)^2 \sum_{i=1}^n(y_i-\overline y)^2 \right]^{1/2} } }$$

$$\displaystyle{\frac{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y) }{ \left[ \sum_{i=1}^n(x_i-\overline x)^2 \sum_{i=1}^n(y_i-\overline y)^2 \right]^{1/2} } }$$

$$\displaystyle{ \frac{ \displaystyle{ \sum_{i=1}^n(x_i-\overline x) (y_i-\overline y)} }{ \displaystyle{ \left[ \sum_{i=1}^n(x_i-\overline x)^2 \sum_{i=1}^n(y_i-\overline y)^2 \right]^{1/2}} } }$$

Bracket Size
Using \big, \Big, \bigg, \Bigg.

$$\big(\Big(\bigg(\Bigg( \quad \big[\Big[\bigg[\Bigg[\quad \big\}\Big\}\bigg\}\Bigg\} \quad \big\|\Big\|\bigg\|\Bigg\| \quad \big|\Big|\bigg|\Bigg|$$

eg. $$\Big( (x+1) (x-1) \Big) ^{2}$$

Bracket Size
Using \left and \right for auto-size.
Use \left. or \right. for invisible matching bracket. 		$$\textstyle{\left( \sum_i^ea \right)}$$ $$\displaystyle{\left( \sum_i^ea \right)}$$
$$\textstyle{\left\{ \sum_i^ea \right\}}$$ $$\displaystyle{\left\{ \sum_i^ea \right\}}$$
$$\textstyle{ \left( 1 + \left( \frac{1}{ 1-x^{2} } \right) ^3 \right) }$$ $$\displaystyle{ \left( 1 + \left( \frac{1}{ 1-x^{2} } \right) ^3 \right) }$$
\underbrace

\overbrace

 $$\textstyle{\underbrace{a+b+\cdots+z}_{26}}$$

$$\textstyle{\overbrace{a+b+\cdots+z}^{26}}$$

$$\displaystyle{\underbrace{a+b+\cdots+z}_{26}}$$

$$\displaystyle{\overbrace{a+b+\cdots+z}^{26}}$$

Text formatting
\textrm $$x \neq 0 \qquad \textrm{if } y > 0$$ $$\textrm{C}_n^k$$
\mathrm $$x \neq 0 \qquad \mathrm{if } y > 0$$ $$\mathrm{C}_n^k$$
Dividing long equations

$$\begin{eqnarray} \cos x & = & 1-\frac{x^{2}}{2!} + \\ && +\frac{x^{4}}{4!}-\frac{x^{6}}{6!}+ \cdots \end{eqnarray}$$

Miscellaneous

Description LaTeX Work-around
binary mod $$a \bmod b$$ $$a \textrm{ mod } b$$
congruent operator $$x\equiv a \pmod{b}$$ $$x\equiv a\quad(\textrm{mod }b)$$
binomial operator $$\binom{a}{b}$$ $$a \choose b$$
\substack $$\substack{0< i< n \\ 1< j< m}$$ $${0< i< n} \atop {1< j< m}$$ (2 max. for better rendering)
\begin{subarray}subarray $$\begin{subarray}{l} i\in I\\ 1<j<m \end{subarray}$$ $${i \in I}\atop{1 < j < m}$$ (2 max. for better rendering)
Medium space $$| \ |$$ $$| ~ |$$
Negative space $$\displaystyle \int\!\!\!\int$$ closer than $$\displaystyle\int\int$$
roman d
(\ud x doesn't work) 		$$\textrm{d}x$$
2-well spaced integral $$\displaystyle{\iint_{D}}$$ $$\displaystyle \int\!\!\!\int$$
Phantom $$\displaystyle{ {}_{12}^{\phantom{1}6}\textrm{C}}$$ $${}_{12}^{\,\;6}\textrm{C}$$
Square-root (opt. arg) $$\sqrt[3]{2}$$

Other information

Description \textstyle{} \displaystyle{}
HTML Pittraps
$$a<b$$ $$a\lt b$$ less-than symbol '<' uses HTML entity &lt; or TeX \lt
$$\begin{array}{ll} a & b\\ a & b\end{array}$$ $$\begin{array}{ll} a & b\\ a & b\end{array}$$ Using HTML entity &amp; for & not mandatory
Space can be inserted in formula code for clarity

$$\sum_I^EA$$ same as $$\sum _ I ^ E A$$

Retrieved from "https://miki.immie.org/mediawiki/index.php?title=JsMath&oldid=5404"