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:

\$, or \$ and \$, to delimit inline mathematics
\$\$, or \\[ and \\], to delimit block or “display” mathematics
^ for superscript
_ for subscript
{ and } for grouping
↖ for overscript
↙ for underscript
\ or ` to quote the next character (turning off its special meaning), start a macro or multi-letter name, or make a name non-italic
\bo, \it, or \bi for a bold, italic, or bold-italic variable
\sc or \fr for a script or Fraktur letter
\ov for an overbar
\table for a matrix, table, or simply tabular alignment - separate entries with , and rows with ;
\text or \html for plain text or html inside mathematics - specify the text or html inside quotes (note \html only works inside a trusted source)
spaces, tabs and newlines are ignored - jqMath formats the mathematics
you can use \\\$ for a real \$, or \\\\ for a \\ if necessary

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 Source	Result
\$\$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\|}<δ⇒{\|f(x)-f(x_0)\|}<ε\\]	\[∀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\]
\\[√^n{a}√^n{b} = √^n{ab}\\]	\[√^n{a}√^n{b} = √^n{ab}\]
\\[\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'<input type="text" size=1>'+bx+c\\] (inside a trusted source)	\[y = ax^\html'<input type="text" size=1>'+bx+c\] (inside a trusted source)
\\[\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.

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 α 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.	Form	Characters
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		^ _ ↖ ↙
880	postfix	& ' ` ~ °
880		^ _
845	prefix	√ ∛ ∜
835		?
825		@
810	postfix	!
800	postfix	′ ♭ ♮ ♯
740	prefix	∂ ∇
710		⊙
680	prefix	¬
670	prefix	∠ ∡ ∢
660		/ ÷
650		\ ∖
640		%

Prec.	Form	Characters
410		⊗
400		·
390		* . × • ⊠ ⊡ ⋅ \, \: \;
350	prefix	∏ ∐
350		∩ ∪
340		≀
330	prefix	⋀ ⋁ ⋂
320	prefix	⋃
310	prefix	∫ ∮ ∯ ∰ ∱ ∲ ∳
300	prefix	∬ ∭
300		⊕ ⊖ ⊘
290	prefix	∑
275		+ - ± − ∓ ∔ ⊞ ⊟
270		← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⊸
265		⁄ ∆ ∊ ∍ ∎ ∕ ∗ ∘ ∙ ∟ ∣ ∶ ∷ ∸ ∹ ∺ ∻ ∽ ∽̱ ∾ ∿ ≂ ≂̸ ≊ ≋ ≌ ≎ ≎̸ ≏ ≏̸ ≐ ≑ ≒ ≓ ≕ ≖ ≘ ≝ ≞ ≣ ≦ ≦̸ ≧ ≬ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≾ ≿ ≿̸ ⊌ ⊍ ⊎ ⊏ ⊏̸ ⊐ ⊐̸ ⊑ ⊒ ⊓ ⊔ ⊚ ⊛ ⊜ ⊝ ⊦ ⊧ ⊪ ⊫ ⊰ ⊱ ⊲ ⊳ ⊶ ⊷ ⊹ ⊺ ⊻ ⊼ ⊽ ⊾ ⊿ ⋄ ⋆ ⋇ ⋈ ⋍ ⋎ ⋏ ⋐ ⋑ ⋒ ⋓ ⋕ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟ ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋰ ▲
260		= ∝ ∤ ∥ ∦ ≁ ≃ ≄ ≅ ≆ ≇ ≍ ≔ ≗ ≙ ≚ ≜ ≟ ≡ ≨ ≩ ≪ ≪̸ ≫ ≫̸ ≭ ≰ ≱ ≺ ≻ ≼ ≽ ⊀ ⊁ ⊥ ⊴ ⊵ ⋉ ⋊ ⋋ ⋌ ⋔ ⋖ ⋗ ⋘ ⋙ ⋪ ⋫ ⋬ ⋭ ■ □ ▪ ▫ ▭ ▮ ▯ ▰ ▱ △ ▴ ▵ ▶ ▷ ▸ ▹ ▼ ▽ ▾ ▿ ◀ ◁ ◂ ◃ ◄ ◅ ◆ ◇ ◈ ◉ ◌ ◍ ◎ ● ◖ ◗ ◦

Prec.	Form	Characters
255		≠
252		≢
250		∼ ≉
247		≈
246		≮
245		<
244		≯
243		>
242		≥
241		≤
240		∁ ∈ ∉ ∌ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋
230	prefix	∀ ∃ ∄
200		∧
190		∨
170		⊢ ⊣ ⊤ ⊨ ⊩ ⊬ ⊭ ⊮ ⊯
160		∋
150		… ⋮ ⋯ ⋱
100		:
70		∴ ∵
40		,
30		;
21		\|
20	prefix	( [ { ‖ ⌈ ⌊
20	postfix	) ] } ‖ ⌉ ⌋
10	prefix	‘ “
10	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.”

The \html macro is incompatible with the otherwise excellent MathPlayer plug-in for Internet Explorer, and also only works inside an explicitly trusted source. If you need to use the \html macro, you should disable MathPlayer and enable the macro with the following JavaScript statements, after loading jqmath: M.MathPlayer = false; M.trustHtml = true;. But if you are going to parse untrusted user input using jqMath, even in a blog comment, you must ensure that M.trustHtml is set back to false first.

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 109+, Edge 109+, and Safari 6.1+.

Recent browser support for MathML requires the use of mathematical fonts for best results, such as large “stretchy” characters. To provide these, you can automatically download math web fonts, or just wait until math fonts are included in all operating systems.

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!