Math in HTML

You can put math in your web pages & email (& elsewhere, if you want to use HTML as "cross-media"), without resorting to ugly or oversized pictures, attachments, obscure TeX code, or things like MathML that are hard to edit by hand & few browsers suport yet.

MathML will support fancier equations (in browsers, @ least). MathJax (also KaTeX & MathQuill) does it now, as javascript. To get any of the fancier stuff (big integral signs, etc.) to work, you need new fonts (STIX). For now, these either have to be installed (most readers won't, but OS X already does) or repeatedly downloaded by the browser (slowing things down; not enormously, but even a few seconds is considered slow by today's standards). This is the best way to go if you need sophisticated math, but simpler stuff (symbols, sub/superscripts) can do without it, & is easier to proofread (mostly WYSIWYG, not TeX/MathML).


It mostly involves just using more characters in the usual fonts. Unicode fonts are 16-bit (216 characters), and so have a lot more than your standard 8-bit ASCII fonts. In particular, they include almost all the Greek and math(s) symbols you need for science: e.g.,

Greek: ΓΔΘΛΞΠΣΥΦΨΩαβγδεζηθικλμνξπρστυφχψωϑϖ
Accented, e.g.: čç
Combining accents: ὰάα̂α̃ᾱα̈ᾰα̇α̊α̌α̸α̅
Arrows: ←↑→↓↔↕⇐⇔⇒⇑⇓
Math: ℏħ◻∂∇∏∑∫∮√∞±∓∙×∈⊂∼≃≅≈≠≡≤≥≦≧≪≫⊕⊗½⅓¼
Misc: 〈 〉†‡★☺☻
Large delimiters (missing on some computers & mobile devices): ⎛ ⎝ ⎞ ⎠ (etc.)

Actually, Unicode is mostly about languages, but you get the math for free. You may have to use an appropriate font, that has all the characters, especially the combining accents; e.g., Lucida Grande (Mac)/Lucida Sans Unicode (MS Windows) seems to have almost everything.

HTML also has the <sub> & <sup> tags. Between using the right characters, and subscripts & superscripts, you have almost everything you need for basic math.

Some sub/superscripts also exist separately in Unicode, e.g.,

Superdigits: ⁰¹²³⁴⁵⁶⁷⁸⁹
Subdigits: ₀₁₂₃₄₅₆₇₈₉


That means you can read such "letters" directly in various programs, like:


You need the tag

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

right after the <head> tag at the top of your web page. (Alternatively, you can type in character codes for each symbol, but this page is about avoiding that: see below.)

my recommendations for browsers


Modern email programs also can read HTML, i.e., just about anything you can put on a web page (e.g., look at some of the spam you've been getting). If you write email in langauges other than English, you should already know this. (Yes, Greek is used for more than just math.)

my recommendations for mailers


You can use Unicode characters in TeX source files with Xɘ(La)TeX or Lua(La)TeX. Then you can write macros to define those characters, Greek & math (e.g., \def α{\alpha}), after making its \catcode active (in that example, \catcode"03B1=13). Unfortunately, this won't work for accents because accents are typed before a character to be accented in TeX, but after in Unicode. (In TeXShop, add the line "%%!TEX encoding = UTF-8 Unicode" (no quotes) @ the top to be able to save in Unicode if it isn't your default.)


Reading such characters is easier than getting them in there in the first place. For HTML, you can type names of the characters, like in tex, such as &alpha; for α. (See common symbols.) But it gets worse for less common characters, like &#8723; for ∓. (See this detailed list.) Again, a good text-editing program can make it easier, by giving you a "palette" of such letters. For example, in OS X, there is Emoji & Symbols. At worst, you can make a file containing all the common characters once the hard way, then cut and paste from then on.

To make it even easier yet, I made a "keyboard layout" for OS X that allows you to type all the Greek and more useful math characters directly from the keyboard using the Option key (e.g., Option-a for α). (Actually, I already made a TrueType font that lets me do that, but nobody can read that unless they have the font, and can read Mac OS Roman encoding, whereas anybody can read Unicode with the standard fonts.) It installs in /Library/Keyboard Layouts (or ~/Library/...). I created it with this web program. (See this Apple technical note for more info.) There is also the program Ukelele.

Something similar can be done for XWindows, by running the command xmodmap (by hand or in your .xinitrc) on a file created by xmodmap -pke and edited according to codes given in (on my machine) /usr/X11R6/include/X11/keysymdef.h, but it doesn't seem possible to get quite all the Unicode characters I would want (e.g., ↔⊕⊗∓〈〉⇐∑∏∈∮×≪≫). You can also install the program xkeycaps, which does the same with a nice GUI.

For MS Windows there is Microsoft Keyboard Layout Creator. See also this list of links for other tools for all operating systems.

For OS X another alternative is to use the menu item Edit>Substitutions>Text Replacement, after making some definitions in System Preferences>Language & Text>Text. Then you can make your own abbreviation for a symbol, & it's automatically replaced. (E.g. \a might get converted into α.) For other systems there exist programs to do the same.


Most of the following tricks are rather messy, so not the kind of stuff you'd want to do regularly. (@ this point you might consider the available alternatives mentioned @ the beginning.)

There are some things that aren't individual symbols, accents, subscripts or superscripts. There are several ways to put things on top of each other, for fractions and mathematical accents, but among different browsers most work nonuniformly (because of different ideas on how spacing should be implemented), or not at all (because they are recent standards). However, the situation is improving with recent browsers. (So these problems may have disappeared by the time you read this.) Some ways, with varying degrees of success, are "display:inline-block" & "position:absolute". We found "display:inline-table" (@ least for IE≥8) & "line-height" work pretty well.


So the best results seem to be to use "table" with "display:inline-table" (for use in a paragraph), and "border:top" (or bottom) for fractions. (Explorer also needs the table border color set somewhere.) For vertical positioning in paragraphs, "vertical-align:text-bottom" works for single-row tables (which works best for accents), and "position:relative" for sums with delimiters, but for double-row tables (like fractions) every browser has its own ideas for positioning. (Maybe fractions don't belong inline anyway. For displayed equations, you can always put the rest into the table.)

This seems to work pretty well for recent versions of all major browsers: WebKit-based browsers like Safari, Chrome, & Opera; Gecko-based browsers like Firefox; and Windows-exclusive browsers Internet Explorer & Edge. (See also here.)

For example, for fractions,

How much is
<table style="display:inline-table; text-align: center; vertical-align:middle">
<tr><td style="border-top:solid 2px">4π</td></tr>
</table> ?
How much is

while for accents and delimiters,

a<table style="display:inline-table; text-align: center;
vertical-align:text-bottom" cellspacing=0 cellpadding=0><tr><td>
<small style="position:relative; bottom:-1.4ex">→</small><br>
a<table style="display:inline-table; text-align: center;
vertical-align:text-bottom" cellspacing=0 cellpadding=0><tr><td>
<span style="font-size:22px; position:relative; bottom:-1.6ex">˙</span><br>
<table style="display:inline-table; text-align: center; position:relative;
bottom:-2.3ex; line-height: 100%"><tr>
</tr></table>x = 5

2 + a
2 +

x = 5


Combining accents don't work so well for tall letters, so you might want to use overlines instead of bars: e.g.,

<span style="text-decoration:overline">Λ</span>



vs. Λ̄ (cf. x̄ and x). Overlines are also good for completing square roots: e.g.,

√<span style="text-decoration:overline">-(dX∧dX)²</span>



This page should look like this.