FontTeX

HTML, font-friendly math equations

(or just FontTeX) is a JavaScript library for rendering math equations in HTML using TeX syntax. FontTeX, as its name implies, is focused on working for any arbitrary web font.

Webpages can use pretty much any font for displaying content, but typesetting math equations is typically only possible for very specific fonts, usually in a serif font like this: $\frac{25}{16}=1.25^2$. Instead of making math formulae stick out from the rest of the text on your webpage, FontTeX works by typesetting mathemtics in any web font, including this one (Roboto): $\frac{25}{16}=1.25^2$.

Look at the examples below for different use cases that FontTeX can handle, or jump straight to the demo. The font selector only shows a list of Google Fonts, but FontTeX can handle any other fonts you throw at it too.

Examples

Fractions
$$\frac{\frac{1}{2}}{\frac{3}{4}} = \frac{2}{3}$$
Superscripts & Subscripts
$$1^{2^{3^{4^5}}}_{6_{7_{8_9}}}$$
$$\rm\obeyspaces{}H_3O_4 (aq) \rightleftharpoons H^+ (aq) + H_2PO_4^- (aq)$$
Large operators
$$\sum_{n=0}^\infty f(x)$$
$$\lim_{x \to \infty} \int_0^x f(x) \, dx$$
\halign Tables
$$|x| = \left\{ \halign{
           # & \quad \mathrm{if} \quad # \cr
  \phantom-x & x \geq 0                  \cr
          -x & x < 0                     \cr
} \right.$$
Scoped Macro \defs
$\def\localMacro{localMacro} \global\def\globalMacro{globalMacro}$
$\localMacro$ is out of scope. <br> But $\globalMacro$ works.
HTML Support
I'm a <span style="color:green">$\frac{green}{fraction}$</span>. <br>
<div style="transform:rotate(180deg)">Upside down $\displaystyle\frac{-b\pm\sqrt{b^2-4ac}}{2a}$ formula.</div>

Demo

edit this to get this

Usage

To get started, download the script above and drop in this snippet anywhere in your document.

<script src="path/to/script/fonttex.min.js"></script>

In your HTML, wrap your TeX code in a <font-tex></font-tex> element, and it will render all by itself. Or, if you'd rather do it via JavaScript, use

fontTeX.parse(String.raw`$\mathrm{Font\TeX}$ code`).renderIn("#element");

to parse the passed in string and render it in #element.

More details are specified in the documentation.