JsMath: Difference between revisions
No edit summary |
|||
(4 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
* [http://www.math.union.edu/~dpvc/jsMath/authors/installation.html Install & testing] |
* [http://www.math.union.edu/~dpvc/jsMath/authors/installation.html Install & testing] |
||
* [http://www.math.union.edu/~dpvc/jsMath/authors/morefonts.html Installing extra fonts] |
* [http://www.math.union.edu/~dpvc/jsMath/authors/morefonts.html Installing extra fonts] |
||
Alternatives to JsMath: |
|||
* [http://www.mathjax.org/ MathJax], which seems to use server-side fonts, and so might be more interesting than JsMath |
|||
== Client-Side Install == |
== Client-Side Install == |
||
# Install the '''standard fonts'''<br/> |
# Install the '''standard fonts'''<br/> |
||
#* On '''Windows''', the fonts are in package called <tt>TeX-fonts- |
#* On '''Windows''', the fonts are in package called <tt>TeX-fonts-15.zip</tt> (from [http://www.math.union.edu/~dpvc/jsMath/download/jsMath-fonts.html this page])<br/> |
||
#*On '''Linux''', due to FireFox issue since v3.5, use the package <tt>TeX-fonts-linux.tgz</tt> (from [http://www.math.union.edu/~dpvc/jsMath/download/jsMath-fonts.html this page]). |
#*On '''Linux''', due to FireFox issue since v3.5, use the package <tt>TeX-fonts-linux.tgz</tt> (from [http://www.math.union.edu/~dpvc/jsMath/download/jsMath-fonts.html this page]). |
||
# Download all '''extra fonts''' ([http://www.math.union.edu/~dpvc/jsMath/download/extra-fonts/welcome.html 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. |
# Download all '''extra fonts''' ([http://www.math.union.edu/~dpvc/jsMath/download/extra-fonts/welcome.html 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. |
||
Line 46: | Line 49: | ||
</source> |
</source> |
||
</li> |
</li> |
||
<li>Turn off jsMath's special interpretation of < |
<li>Turn off jsMath's special interpretation of <code>\( \[ $ $$</code> as math mode delimiters. |
||
<source lang="javascript" enclose="prevalid"> |
<source lang="javascript" enclose="prevalid"> |
||
processSlashParens: 0, // process \(...\) in text? |
processSlashParens: 0, // process \ (...\) in text? |
||
processSlashBrackets: 0, // process \[...\] in text? |
processSlashBrackets: 0, // process \ [...\] in text? |
||
processDoubleDollars: 1, // process $$...$$ in text? |
processDoubleDollars: 1, // process $ $...$$ in text? |
||
processSingleDollars: 0, // process $...$ in text? |
processSingleDollars: 0, // process $...$ in text? |
||
processLaTeXenvironments: 0, // process \begin{xxx}...\end{xxx} outside math mode? |
processLaTeXenvironments: 0, // process \begin{xxx}...\end{xxx} outside math mode? |
||
Line 160: | Line 163: | ||
| $$\displaystyle{a_i^e}$$ |
| $$\displaystyle{a_i^e}$$ |
||
|- |
|- |
||
| Fraction: <code>\frac ab |
| Fraction: <code>\frac ab, \frac12, \frac{25}{32}</code> <br>''One letter for each - or use {}'' |
||
| $$\textstyle{\frac ab, \frac12, \ |
| $$\textstyle{\frac ab, \frac12, \frac{25}{32}}$$ |
||
| $$\displaystyle{\frac ab, \frac12, \ |
| $$\displaystyle{\frac ab, \frac12, \frac{25}{32}}$$ |
||
|- |
|- |
||
| Combinatorial: <code>k \choose r</code> |
| Combinatorial: <code>k \choose r</code> |
||
Line 168: | Line 171: | ||
| $$\displaystyle{k \choose r}$$ |
| $$\displaystyle{k \choose r}$$ |
||
|- |
|- |
||
| Sum: <code>\sum_i^ea</code> |
| Sum: <code>\sum_i^ea, \sum_{ijk}^{efg}abc</code> |
||
| $$\textstyle{\sum_i^ea}$$ |
| $$\textstyle{\sum_i^ea, \sum_{ijk}^{efg}abc}$$ |
||
| $$\displaystyle{\sum_i^ea}$$ |
| $$\displaystyle{\sum_i^ea, \sum_{ijk}^{efg}abc}$$ |
||
|- |
|- |
||
| Limit: <code>\ |
| Limit: <code>\lim_ia</code> |
||
| $$\textstyle{\lim_ia}$$ |
| $$\textstyle{\lim_ia}$$ |
||
| $$\displaystyle{\lim_ia}$$ |
| $$\displaystyle{\lim_ia}$$ |
||
Line 376: | Line 379: | ||
|Dividing long equations |
|Dividing long equations |
||
| colspan="2" |<p>$$\begin{eqnarray} \cos x & = & 1-\frac{x^{2}}{2!} + \\ && +\frac{x^{4}}{4!}-\frac{x^{6}}{6!}+ \cdots \end{eqnarray}$$ |
| colspan="2" |<p>$$\begin{eqnarray} \cos x & = & 1-\frac{x^{2}}{2!} + \\ && +\frac{x^{4}}{4!}-\frac{x^{6}}{6!}+ \cdots \end{eqnarray}$$ |
||
|} |
|||
=== Miscellaneous === |
|||
{| class="wikitable" width="100%" |
|||
|- |
|||
!width="40%"|Description!!width="30%"|LaTeX!!width="30%"|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$$ |
|||
|- |
|||
| <code>\substack</code> |
|||
| $$\substack{0< i< n \\ 1< j< m}$$ |
|||
| $${0< i< n} \atop {1< j< m}$$ (2 max. for better rendering) |
|||
|- |
|||
| <code>\begin{subarray}</code>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 |
|||
| <nowiki>$$| \ |$$</nowiki> |
|||
| <nowiki>$$| ~ |$$</nowiki> |
|||
|- |
|||
| Negative space |
|||
| $$\displaystyle \int\!\!\!\int$$ closer than $$\displaystyle\int\int$$ |
|||
| |
|||
|- |
|||
| roman d<br>(<code>\ud x</code> 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}$$ |
|||
| |
|||
|} |
|} |
||
Latest revision as of 13:30, 15 January 2014
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
- Install the standard fonts
- 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
- Install jsmath main package.
- 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.
- jsMath can find out the root directory where it is installed, but it doesn't hurt to help it a bit:
root: "/miki/jsmath",
- Increase a bit the size of formulae:
scale: 130,
- 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?
- 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"],
- 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:
- 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;
- 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).
- 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 |
| |||||||||||||||||||||
Greek Letters |
| |||||||||||||||||||||
Some common symbols... More here |
|
Arrays
Description | \textstyle{} | \displaystyle{} |
---|---|---|
\begin(array) table.
Use |
$$\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 | |
\begin(eqnarray) acts as a 3-col {rcl} table.Use |
$$\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 |
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
|
$$\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 |
| |||||||||||||||||||||||||
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 |
| |||||||
Space can be inserted in formula code for clarity |
$$\sum_I^EA$$ same as $$\sum _ I ^ E A$$ |