## TeXZilla 0.9.7 Released

By fredw on Tuesday, June 3 2014, 15:30 - Permalink

Today the Mozilla MathML team released a new version of TeXZilla. You can download a release package or install it with `npm`

. We fixed a few bugs, but there are known issues due to errors in the `unicode.xml`

file of
XML Entity Definitions for Characters
or inherited from the itex2MML grammar that does not make it ready for version
1.0. The main improvements in this new release are enhancements to the
public API and to the command line interface.

## Stream filter

TeXZilla can now be used as a stream filter. Each TeX expressions delimited
by the classical `$ ... $`

, `$$ ... $$`

, `\[ ... \]`

and `\( ... \)`

will be
converted into inline or display MathML.
Outside these delimiters, you can use `\$`

and
`\\`

as escaped characters. We offer three ways to apply that stream filter:

From the command line, in a UNIX pipeline:

`cat foo-tex.html | phantomjs TeXZilla.js streamfilter > foo-mathml.html`

`echo "This is a **Markdown** document with a *math formula*: $ z = \\sqrt{x^2 + y^2} $" | markdown | nodejs TeXZilla.js streamfilter | sed '1s/^/\n<!-- HTML5 document -->\n/'`

(note: this is not yet supported by slimerjs)

Using the TeXZilla.filterString(aString) function, for example

`TeXZilla.filterString("blah $x^2$ blah")`

will return the filtered string.Using the TeXZilla.filterElement(aElement) function. This one will browse recursively the descendants of the DOM element

`aElement`

and the stream filter will be applied to the text leaves.

By introducting these `TeXZilla.filter*`

function, it becomes
tempting to use TeXZilla the same way as MathJax, that is to process all the
text nodes in your Web pages and to filter the TeX strings. This is not the
intended goal of TeXZilla and it is strongly
discouraged: not only the MathML content won't appear in crawlers
(e.g. search engines or feed readers) but also
browsing all the DOM elements and appending new ones can be very slow for large
documents. Instead, it is recommend to filter your static Web page with
`commonJS TeXZilla.js streamfilter`

before publishing it or to use a
server-side conversion for example using the Web server mode. There
are situations where you do not have other choice, though. In that
case try to reduce as much as possible the number of elements being processed
(see the example in the next section).
Of course, if you do not care about performance and MathML availibility
outside your web site, you can
just use MathJax.

## New Safe and Itex-Identifier parsing modes

The most notable difference between TeXZilla and itex2MML is the handling of
some expressions like `$xy$`

or `$Func$`

. By default,
TeXZilla interprets this as individual
MathML identifiers `<mi>x</mi><mi>y</mi>`

(so that as in LaTeX, they will
render in italic) while itex2MML interprets this
as a single indentifier `<mi>Func</mi>`

. It is now possible to configure
TeXZilla to align with itex2MML's behavior. To do that, use
TeXZilla.setItexIdentifierMode
or pass the appropriate boolean to the command
line. Consecutive non-basic letters (like Greek or Arabic) are still treated as
individual tokens. With that change, we hope that TeXZilla could be used to
parse all the commands supported by itex2MML into an equivalent output.
Together with the command line stream filter, this should allow to recover
all the nice itex2MML features.

Similarly, a safe mode is now available and can be enabled
with TeXZilla.setSafeMode or by passing the appropriate boolean to the command line. This mode will forbid commands that could
be used for XSS injections like `\href`

. With that mode and the
new `TeXZilla.filterElement`

function, I'm now able to remove MathJax's use from
my blog (users of browsers without good MathML support can still enable
it or choose the lighter `mathml.css`

stylesheet). MathJax was a bit overkill
for my blog since I'm only parsing visitor comments. To illustrate how the
`setSafeMode`

and `filterString`

functions can be used, I now just
have to do

```
// Process TeX fragments in blog comments and comment preview.
window.addEventListener("DOMContentLoaded", function() {
TeXZilla.setSafeMode(true);
var toProcess =
document.querySelectorAll("#comments > dl > dd, #comment-form dd.comment-preview");
for (var i = 0; i < toProcess.length; i++) {
TeXZilla.filterElement(toProcess[i]);
}
});
```

## Inserting equations in a 2D/WebGL canvas

The new function TeXZilla.toImage has been introduced to convert a TeX fragment into
a math HTML image with a base64-encoded `src`

attribute.
Contrary to other functions of the API, this one needs to do some
work to determine the image size and perform the conversion, so it is unlikely
to work as expected in a non-browser context. The goal is really only to have a
convenient function to generate image of mathematical formulas and insert them
into a canvas context to draw 2D or 3D scientific schemas.
At the moment, this works well only in Gecko. For
instance,

```
var image =
TeXZilla.toImage("\\vec{F} = G \\frac{m_1 m_2}{r^2} \\mathbf{u}");
image.onload = function() {
canvas.getContext("2d").drawImage(image,
(canvas.width - image.width) / 2,
(canvas.height - image.height) / 2);
}
```

will insert a mathematical formula in the middle of a 2D `canvas`

. Similarly,
you can insert a mathematical formula as a texture in a WebGL canvas. It
is recommended to pass `aRoundToPowerOfTwo=true`

to `TeXZilla.toImage`

,
so that the image will
have dimensions that are power of two. Note that
the mathematical formula will be automatically centered in the middle of the
generated image.
See this example for how to setup the formulas with three.js and make
them always oriented in the direction of the camera.

## Integration in Mozilla products

The CKeditor editor plugin is now integrated in MDN, so you can click on the square root logo in the editor toolbar to insert mathematical formulas. By the way, the mathml.css is now used for browsers without MathML support. See for example the pages for acosh, atanh or CSS transform.

The

`editor/`

in comm-central now integrates a small input box to insert mathematical formulas, accessible from the Insert menu. This will be available in Thunderbird 31 and Seamonkey 2.28, so that you can write mathematics in your emails and in the WYSIWYG editors.Various FirefoxOS Web math apps have been written and use TeXZilla. Raniere is also working on a math keyboard for FirefoxOS as a GSoC project, which will allow to type mathematics faster on mobile devices.

## Comments

Testing safe mode: $\statusline{hide evil code}{\href{javascript:alert('evil code!')}{\text{This is not evil}}}$

Testing display mode: $$\Gamma(t) = \lim_{n \to \infty} \frac{n! \; n^t}{t \; (t+1)\cdots(t+n)}= \frac{1}{t} \prod_{n=1}^\infty \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} = \frac{e^{-\gamma t}}{t} \prod_{n=1}^\infty \left(1 + \frac{t}{n}\right)^{-1} e^{\frac{t}{n}}$$

Testing escape: 6\$

Testing Arabic formula: \(س = \frac{-ب\pm\sqrt{ب^٢-٤اج}}{٢ا}\)