jqMath - Put Math on the Web

jqMath is a JavaScript module that makes it easy to put formatted mathematical expressions in web pages. For example, the html source:

If \$ax^2+bx+c=0\$ with \$a≠0\$, then: \$\$x={-b±√{b^2-4ac}}/{2a}\$\$

produces the following:

If $ax^2+bx+c=0$ with $a≠0$, then: $$x={-b±√{b^2-4ac}}/{2a}$$

jqMath uses a simple TeX-like syntax, with MathML semantics:

jqMath is lightweight, fast and concise. It is standards-based and cross-browser, using MathML when available, else simple HTML and CSS, and avoiding pixel-map images. Thus pages load quickly, and expressions can be resized by the user, or easily passed to screen reading, graphing, or computer algebra software.

More examples:
HTML SourceResult
\$\$y-y_0=m(x-x_0)\$\$$$y-y_0=m(x-x_0)$$
\$\$\cos^2θ+\sin^2θ=1\$\$$$\cos^2θ+\sin^2θ=1$$
\$\$∑↙{i=0}↖n i={n(n+1)}/2\$\$$$∑↙{i=0}↖n i={n(n+1)}/2$$
\$\${1+√5}/2=1+1/{1+1/{1+⋯}}\$\$$${1+√5}/2=1+1/{1+1/{1+⋯}}$$
\$\$f'(x)=\lim↙{h→0}{f(x+h)-f(x)}/h\$\$$$f'(x)=\lim↙{h→0}{f(x+h)-f(x)}/h$$
\\[∀x_0∀ε>0∃δ>0∋{|x-x_0|}&lt;δ⇒{|f(x)-f(x_0)|}&lt;ε\\] \[∀x_0∀ε>0∃δ>0∋{|x-x_0|}<δ⇒{|f(x)-f(x_0)|}<ε\]
\\[∫_\Δd\bo ω=∫_{∂\Δ}\bo ω\\]\[∫_\Δd\bo ω=∫_{∂\Δ}\bo ω\]
\$(\table \cos θ, - \sin θ; \sin θ, \cos θ)\$ gives a rotation by \$θ\$. $(\table \cos θ, - \sin θ; \sin θ, \cos θ)$ gives a rotation by $θ$.
\$v↖{→}⋅w↖{→} = vw\cos θ\$$v↖{→}⋅w↖{→} = vw\cos θ$
\$\{x:x^2∈\ℚ\}\$ has measure 0 in \$\ℝ\$.$\{x:x^2∈\ℚ\}$ has measure 0 in $\ℝ$.
\\(U=⋃↙αU_α⇒0→\fr F(U)→∏↙α\fr F(U_α)→↖{-}∏↙{α,β}\fr F(U_α∩U_β)\\) is exact. \(U=⋃↙αU_α⇒0→\fr F(U)→∏↙α\fr F(U_α)→↖{-}∏↙{α,β}\fr F(U_α∩U_β)\) is exact.
\\[1/7 = 0.\ov 142857\\]\[1/7 = 0.\ov 142857\]
\\[\table a, =, b+c; , =, d\\]\[\table a, =, b+c; , =, d\]
\\[\text"average speed" = \text"distance traveled" / \text"elapsed time"\\] \[\text"average speed" = \text"distance traveled" / \text"elapsed time"\]
\\[y = ax^\html'&lt;input type="text" size=1>'+bx+c\\] \[y = ax^\html'<input type="text" size=1>'+bx+c\]
\\[\table x_0^2, {_0F_1(; a; z)}, R_i_^j_k_l\\] \[\table x_0^2, {_0F_1(; a; z)}, R_i_^j_k_l\]
\$\$[\O\H^{-}]=K_\W/[\H^{+}]\$\$$$[\O\H^{-}]=K_\W/[\H^{+}]$$
\$\$\$\$

The last row above is for you to experiment.

jqMath is compatible with the following web browsers: Internet Explorer 6.0+, Firefox 2.0+, Chrome, Safari 3.0+, Opera 9.0+, and the vast majority of modern mobile browsers. The Fraktur font uses the Google Font API, which works on IE 6.0+, FF 3.5+, Chrome 4.249.4+, Safari 3.1+, Opera 10.5+, and again the vast majority of modern mobile browsers. Either way, these lists probably include over 99% (and growing) of web surfers.

jqMath is free, using the same open source license as jQuery, the world’s most popular JavaScript library. We also gratefully adopt jQuery’s “write less, do more” philosophy.

To use jqMath on your site, download jqMath, and open the included COPY-ME.html file as UTF-8 in a text editor. To use jqMath in Google Blogger, just see jqMath in Blogger!

Mathematical Symbols for the Web

Each version of Windows since Windows 98 has included the Lucida Sans Unicode (LSU) font, making its 1750+ characters the current de facto standard character set for the web. Mac OS X includes the Lucida Grande (1266-2800+ glyphs) and Apple Symbols (now 5000+ glyphs) fonts, covering a much larger set of characters. The free STIX Fonts (8000+ glyphs), from a consortium of book and journal publishers, are intended to render all characters and symbols needed in Scientific, Technical, and Medical (STM) publishing. Some examples of such characters may be found at this Wikipedia page.

By default, jqMath knows the MathML precedence of every MathML 3 operator symbol, except we omit “multiple character operators” like && or <=, and choose a single precedence for each of |, ^, and _. In the tables below are all such symbols that are in the LSU font, listed by precedence. We also include our formatting characters, letters in commonly available script fonts, and letters in a Fraktur font available dynamically via the Google Font API. If you stick to using these characters in your web pages, along with other letters in the LSU font and ordinary numbers, then your mathematical expressions should be visible to virtually all current web users.

You can click on a character in the tables to enter it in the text input element below, or just hover the mouse over a character to see its Unicode encoding, possibly followed by a note or one or more possible uses. Red characters control formatting, blue characters will be quoted as necessary, and green characters will be quoted for HTML. Operators whose “form” column is blank can be prefix, infix, or postfix. You can also type keyboard characters, including letters and numbers, in the input element directly. If you do this with an html entity name like &alpha; or some LaTeX macros like \approx followed by a space, then your browser (if modern) will substitute that Unicode character. jqMath will also insert some thin spaces for you, or you can add spaces with \, (thin) or \: (medium) or \; (thick) yourself. (Don’t try to get too precise - this is the web, where the exact viewing platform is beyond your control.) When the resulting expression looks the way you want, copy your input characters into your HTML file.

Prec.FormCharacters
Start/end math \$ \$\$
Greek letters Γ Δ Θ Λ Ξ Π Σ Φ Ψ Ω
α β γ δ ε ζ η θ ι κ λ μ
ν ξ π ρ ς σ τ υ φ χ ψ ω
ϐ ϑ ϒ ϕ ϖ Ϛ Ϟ Ϡ ϰ ϱ ϲ
Script letters A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
Fraktur letters A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
Other symbols « » Å

999 ^ _
880postfix& ' ` ~ °
^ _
845prefix
835?
825@
810postfix!
800postfix
740prefix
710
680prefix¬
670prefix
660/ ÷
650\
640%
Prec.FormCharacters
410
400·
390* . × \, \: \;
350prefix
340
330prefix
320prefix
310prefix
300prefix
290prefix
275+ - ±
270




265
∽̱ ≂̸
≎̸ ≏̸
≦̸ ≿̸
⊏̸ ⊐̸


260=
≪̸ ≫̸



Prec.FormCharacters
255
252
250
247
246
245<
244
243>
242
241
240
230prefix
200
190
170
160
150
100:
70
40,
30;
21|
20prefix( [ {
postfix) ] }
10prefix
postfix
Grouping{ }
Quote/Macro\ `

\$\$\$\$ produces:

Future & Related Work

You can see more examples on our test page. Thanks to Joe Java for these examples!

It would seem more convenient for the implication arrows ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ to have lower precedence. Ideally, the MathML committee might revisit these and perhaps some other precedences. (Precedences matter sometimes for exact spacing, and passing structured mathematical expressions to other software.)

Some parts of the MathML standard are not yet implemented in jqMath, such as elementary school mathematics (e.g. “long division”), and “Content MathML.”

It would be nice to link to a small open source web font that implemented calligraphic script characters, and a few other characters such as left and right angle brackets, U+27E8 and U+27E9.

The \html macro is incompatible with the otherwise excellent MathPlayer plug-in for Internet Explorer. If you need to use that macro, you should disable MathPlayer with the following JavaScript statement, after loading jqmath: M.MathPlayer = false;

MathML rendering engines in current web browsers are still a work in progress. Nonetheless, improvements are being made steadily, especially since MathML is now part of the HTML 5 standard. MathML does have the advantages over pixel-map images that were noted above, and is definitely the right design for the future. Therefore jqMath stays small and fast, and leaves attempts at pixel-precise layout of individual glyphs to these MathML engines, where such issues can be best and most efficiently handled. By default, jqMath uses native MathML support in Firefox, Chrome 24, and Safari 6.1+.

MathJax (the successor of jsMath) is the best alternative to jqMath that I know of. Its author, Davide Cervone, pioneered the use of a JavaScript library for formatting mathematics. MathJax is much bigger and more complicated than jqMath, and roughly 5 times slower.

TeX, LaTeX, and AMS-LaTeX are the classic solutions for publishing mathematics on paper, in books or journals. We all owe Donald Knuth (and many others) much gratitude for their efforts. TeX vs. MathML is analogous to PDF vs. HTML - TeX and PDF are ideal when the exact output size, resolution, fonts, styles, etc. are known in advance, and the author wants complete control over layout, line breaking, precise spacing, etc.

Finally, jqMath support is probably better provided by a wiki or forum than by e-mail. I therefore suggest using Stack Overflow for technical questions, especially if the answers might be of interest to others. (It's easy - you don't even need to create an account there.) You can also send me a message. Thanks for trying jqMath!