Math in HTML (and CSS) - presenting mathematical expressions on W...

1 of 23

http://www.cs.tut.fi/~jkorpela/math/

Math in HTML (and CSS)
How to present mathematical expressions using a language
that has so little markup for them? Web authors often need
resort to images, but there are more lexible approaches,
like MathJax. Moreover, if you need just some special symbols or simple expressions, a lot can be done in HTML, assisted with style sheets (CSS). This document mainly discusses relatively simple mathematical expressions rendered one-dimensionally (inline), though possibly with superscripts or subscripts.
The word “mathematical” is used in a rather broad sense here, covering
different formalisms and symbols, including the symbols of physics, formal
logic, etc. You might wish to take a look at Andreas Prilop’s nice document
Mathematical formulas in HTML 4.0, which illustrates well what kinds of
symbols and expressions are discussed here. And by looking at the HTML
source there, you can see how such things can be done.

Content:
What? No math?
Alternative formats
What about simple linearized notation?
Formulas as images
Images in running text
Using “normal” characters
Using special characters
Line breaks as problems
Grouping digits and using “thinner spaces”
Using fonts
Parentheses
Fractions
Underlines, overlines
Arrays and tabulations
Subscripts, superscripts, and exponents
Equation numbers
Towards two-dimensionality

What? No math?
You may have wondered why web sites, such as Wikipedia,
use images for presenting mathematical formulas, even in
simple cases like ∇²φ = 0. Partly the reason is simplicity
and uniformity: since some formulas need to be presented
as images, it may sound simpler to use images for all images—even in cases where simple HTML markup would
do ine:
∇² = <i>φ</i>
or
&#x2207;&sup2; = <i>&phi;</i>

An extract of a Wikipedia article, which uses an image for two
formulas. Note how the appearance of the letter phi (φ) is very
different from its occurrence in text.

Images provide a methodologically uniform approach, but the result is not typographically uniform at all: characters in an image are typically rather different from the same characters in text.
Although HTML markup exists in the sample case, mathematical
formulas are usually much more complicated. HTML lacks
markup for mathematical expressions as structures, and there is
no simple way to produce anything essentially two-dimensional
beyond superscripting or subscripting.

A formula for which no natural HTML markup exists

Given the fact that HTML was originally developed at CERN, the European Laboratory for Particle Physics, it may
sound odd that HTML has rather little markup for mathematical expressions and other special notations used in
science. It’s not a surprise that you can’t do math in HTML; after all, it’s a markup language, not a programming
language. But how are we expected to write physics reports or even modern biology papers without mathematical notations?
There was once an HTML 3.0 draft, with a section titled HTML Math, suggesting relatively simple markup for some basic mathematics. But it’s all history; the draft expired in 1995. (There was also an earlier idea about HTML+, which would have had a different,
more natural-looking math syntax.)

The modern trend is to regard things like mathematical markup as special “applications”, for which specialized
languages are used; see W3C’s Math Home Page for information about such trends, including the MathML language. If you ask me, the language hopelessly mixes structure and appearance. In any case, support to MathML in
web browsers still isn᾿t wide enough to justify its use on web pages in general.
However, this does not mean that it would be impossible to write mathematical documents in HTML. There are
dif iculties and dif icult decisions to be made. For relatively simple mathematical notations, HTML can be used
rather well, especially if you use handle the toughest parts using images with adequate alt texts. See, for example,

22/12/2015 13:05

Math in HTML (and CSS) - presenting mathematical expressions on W...

2 of 23

http://www.cs.tut.fi/~jkorpela/math/

Stan Brown’s articles on math. Note that there’s the possibility of making an article available both in HTML format and in some other format, and this might be relatively easy if suitable tools can be found.

Alterna ve approaches – formats other than HTML
For documents where mathematical notations are needed a lot, other formats than HTML may turn out to be
more practical. This might mean for example PDF, PostScript, or TeX format, or perhaps all of them, offered as alternatives.
The bene its of HTML in Web authoring are considerable, however, so it can be a tough decision. This document
tries to help in making an informed decision as well as in implementing the HTML way, if that way is taken.
Even if you decide to publish your document in, say, PDF format only, you might still considering making its abstract available in HTML format too. Typically an abstract can be written with just a modest amount of mathematical notations.
There are also JavaScript-based approaches that use libraries for converting TeX notations or TeX-like notations
into graphic format. They typically fall back to displaying such a notation, like \[P(E) = {n \choose k} p^k (1-p)^{
n-k} \]. The best-known implementation of the approach is the MathJax library, but there is also a considerably
smaller and faster library, jqMath, which can produce rather amazing results.
For example, using MathJax, the code $$\sum_{k=1}^Nk(N-k+1)$$ causes the following formula to be displayed:

The approach is simple, from an author’s point of view: you just insert a ixed script element in your document,
and you put an inline formula between \( and \), a display formula between $$ pairs. In the formula, you use for
example TeX (speci ically, AMSTeX) notations, which is rather simple to learn for basic mathematical constructs.

Avoiding the problem: simple linearized nota on
Sometimes it is best to present mathematical expressions in linearized notation. For example, instead of trying to
ind a way of presenting the square root of 2 in the normal mathematical way, you might write just sqrt(2). For
quotients, you’d use notations like (a + b)/(a − b). Instead of exponents you might use notations like a**b or a^b
(a to the power b). It depends on intended audience whether you need to explain such notations, but normally
you should explain any conventions that are not part of normal school mathematics.
Note that even in plain text, you can use the multiplication symbol × and do not need to resort to the asterisk (*)
of computer jargon. See also other notes on using “normal” characters.
To indicate nesting of mathematical expressions, linearized notation uses parentheses. It has been common to
use different types of parentheses: innermost, you use normal parentheses ( ); next level, you use square brackets [ ]; and outermost you use curly braces { }, e.g. [(x + y)^(1/3)]/z. However, according to the standard on
mathematical notations, ISO 80000-2, normal parentheses should be used, because other parentheses have special meanings. Example:
((x + y)^(1/3))/z.
A document containing such an expression should probably contain, near the beginning, a statement like “In this document, the circum lex character ^ is used to indicate exponentiation, i.e. raising to a power.”

Such an approach makes the document accessible to virtually all who have the necessary mathematical prerequisites, if you limit the character repertoire to ISO Latin 1. But naturally it’s a rather simplistic method. You might
still consider using it as an alternative format, made available along with some more advanced but less accessible
format(s), such as an image.

Formulas as images
Genera ng images from formulas
You can use some software, e.g. something TeX based (see also AMS TeX resources) or a mathematics program

22/12/2015 13:05

fi/~jkorpela/math/ with graphic output format option. the wonderful MathWorld pages.O. to provide a fallback for browsers that don’t support iframe.Math in HTML (and CSS) . every img element must have an alt attribute that speci ies the textual alternative. which is impressive.presenting mathematical expressions on W. with no HTML markup. or just check that the term really means what they think it does. This means. The plain text alterna ve: alt a ribute If you decide to use an image.) Examples of using images Such an approach is widely used on the Web.. or perhaps print it out (due to better resolution in print than on screen). by the way. Note.S. Various tools exist for converting from PostScript to GIF format. the iframe element. which uses all kinds of tricks to convert mathematical expressions to HTML without using images. too. The latter method is often worth considering. especially for large formulas. Often such software gives the result in PostScript format. especially if nonlinear in appearance. I have used the simple markup \int_{0}^{\infty}e^{x^2}dx in TeX and generated a GIF image ile from it. You could also consider using the Latex2HTML converter which can. However.g. the more seriously you need to consider using images for the purpose. since it is much more widely supported in browsers by default. and the others might need to brush up their knowledge too. and you can e. (There’s another converter. write rather verbose explanations if needed. in a modi ied form. to produce visual representations of formulas as images.g.g. The reader may prefer reading the text without distractions and looking at the formula (image) at the very moment he is prepared to do so. the object element could be used to embed data in different formats. on your page but cannot de ine all of them. On the other hand. e. he may prefer looking at it in a separate window (which is separately adjustable in size and positionable on the screen). say binomial coef icient.gif" align="middle" alt= "the integral of exp(x**2) for x from 0 to in inity"></p> This looks like the following on your browser: Assignment 42. you will do this for “fallback” use only. generate images in GIF format. Mathematica. in practice. 22/12/2015 13:05 . you might consider using iframe for large formulas mainly because iframe lets you specify an area where the data is to be presented so that a browser is expected to introduce scroll bars if needed. Compute the integral of exp(x**2) for x from 0 to in inity Generally. you still have the original problem. despite their drawbacks.cs. Compute And here’s the same with an intentionally broken reference to an image: Assignment 42. Even if your terms are already known to 95% of readers. S. not only in content but also in the Web presentation of mathematical formulas. e. TtH. among many other things. you can give the 5% a chance to ind it out. MATHematics also has nice pages on several topics. Compute <img src="integral. it might be a very good idea to link to de initions and descriptions like those on MathWorld. since the text will normally not be seen by people who see the image. Due to accessibility considerations.tut. Moreover. See. See also Eric Weisstein’s Treasure Troves of Science collection. In special cases. animations. Support for its “brother”. As a very simple example. In principle. is somewhat less buggy. It applies very questionable methods like the Symbol font kludge. The technique: the img element You would use the img element to embed an image into your document. that you need to write an alternative presentation of the expression in pure text form. 3 of 23 http://www. and/or an a href element to create link to it.. You might still get some useful ideas from its output and apply them more reasonably. then just embedded the image into an HTML document using the following markup: <p><strong>Assignment 42</strong>. and interactive presentations. for example. the more complicated formulas you need to present. You would then need to include the normal img element as the content of iframe. but for Web use a GIF format is usually better. including images. than when you use mathematical terms. As regards to mathematics proper. support for object is limited and buggy.

"> And you would put this element somewhere near the start of the document. though browsers tend to scale downwards relatively well these days. and put the explanations into its alt attribute. line spacing easily gets disturbed. a single alt attribute should specify a textual alternative to the entire formula. some characters need special attention as regards to use in mathematical notations. But why not use just &#945. namely the ISO Latin 1 character repertoire.. then? Using “normal” characters. instead of being adjusted according to the font size. this is useful but not as useful as giving plain text presentations there and providing links to TeX versions. If you change the basic font size from the browser’s menu. In fact the MathWorld and Treasure Troves of Science pages often include the TeX notation directly as the alt text. (See notes on such issues in Guide to using special characters in HTML. Moreover.g.g. the n-ary summation symbol is a distinct character. without disturbing people who see the images only? There’s a simple trick: use a “dummy” image. using a numeric character reference.. esp. you’ll see how the image remains the same size. or utilize it indirectly. such as single-pixel transparent GIF. Perhaps the image itself could be made into a link. e. though historically derived from the Greek letter. similar approach can be less pleasant. And attempts to use style sheets to scale images are not always very successful.Math in HTML (and CSS) . Nowadays.e. you would put it into one of the images and use alt="" for the other images.. <img src="transp. In the document HTML Techniques for Web Content Accessibility Guidelines 1. and these characters include the superscripts 1. which is indicated using the usual two-dimensional formatting (an exponent appears raised.">. since the image does not adapt to text font size and face. you would use a simple linearized notation as alt text. the circum lex character ^ is used to indicate exponentiation. A particular problem arises when such alt texts contain notational features that are not self-evident and are not otherwise used in the document. height="1em"> to make the browser to scale it to the font size of the text. For symbols and short formulas in running text. since some people who cannot see the image for some reason might be able to understand TeX markup. but from the character standards viewpoint. see my Guidelines on alt texts in img elements.0. but a circum lex character ^ is used in alt texts.tut. section Markup and style sheets rather than images: The example of math recommends that if an HTML document has been generated from a TeX document. It avoids some line breaking problems that 22/12/2015 13:05 . (As regards to typing them into your HTML documents. <img src="alpha. Apparently. i. It seems that these problems have inally lost signi icance: any reasonably modern browser on Mac renders these characters correctly. suppose that expressions contain exponentiation. several browsers have had serious problems with some ISO Latin 1 characters. perhaps in smaller font) in image presentations. which you can use pretty safely in HTML authoring. and then on some browsers the document would look better with images off than with images on. nota ons for physical quan es Within the “normal” set of characters. and 3 and the vulgar fractions ½ ¼ ¾ as well as the multiplication sign ×. How can we inform people who need the alt texts. Here’s a simple example: The Greek letter is often used to denote summation. Images in running text Images are widely used for presenting formulas on the Web. the plus sign + poses no problems. That document also recommends that if a formula is constructed from several images. Among the basic arithmetic operators.cs. but using the minus sign character would be more logical. you could design the image in large size and then use <img .fi/~jkorpela/math/ The purpose of the alt attribute is make the text comprehensible in a browsing situation where the image is not displayed. you might also provide a link to the TeX version. raising to a power. the hyphen-minus character (-) is commonly used. In the simplest case. “inline”. As a minus sign.) You could also write e.gif" alt= "In this document. before the irst occurrence of an alt text that uses the convention explained. If the image has been generated using TeX. For example. and they are quite often the best practical way for large formulas to be presented as “blocks”. 2. it seldom causes character problems. the original TeX (or LaTeX) document too be made available on the Web. For some notes on the importance and practical use of alt texts.) On Macintosh platforms..presenting mathematical expressions on W. 4 of 23 http://www. see section Typing characters in my character code tutorial. It is usually visually better (longer). since there are possibilities for auditory rendition of such versions.gif" alt="&#945.

Examples: 4.g. However. note the following rules of the SI system of units (see Guide for the Use of the International System of Units (SI) for more information): Unit symbols like m or s are written in Roman (upright) style. (Browsers often break after hyphen-minus. a*b (it’s a programming language idiosyncracy).g. superscript style is better. you might use the character pair != to denote inequality. and normally achieved (if achievable in a browsing situation) by not using any font markup for it. which might be used e. For fractions and division. but not minus sign. there is hardly anything natural in using the exclamation mark to denote negation! When expressing physical quantities. <tt>*</tt>..g. Perl. see the document ISO 31-0: a standard that may confuse by Stewart Clark. 5 of 23 http://www. but there’s anyway the risk that one of the constructs be mistaken as an implication arrow or another arrow symbols. <= and >=. N ⋅ m or N m. When a comma is used as the decimal marker. as in a<b. a rich repertoire of various asterisk- and star-like characters available in Unicode. in another usage. including some that are classi ied as mathematical (general category: Sm. Note that there are several Unicode characters with “star” in their name. and greater than or equal to symbols are problematic.2 &#22c5. e. In addition to the above-mentioned use as a multiplication symbol. less than or equal to.cs. it does not look good when it should be binary operator. for use e.2 × 1015 and 4. the multiplication sign × is preferred when a decimal point is used in numbers. U+22C5).</em> and in CSS: . i. however. it can be typed as such. These rules are given in international standards.g. Otherwise you would have to use some surrogates like =/. There is a large number of characters with “asterisk” in their name. there is seldom any reason to use the asterisk *.. which give preference to the use of a comma as a decimal marker. and &#8804. If you have decided to use “special characters” (i.g. 10<sup>15</sup> (renderings: 4. in principle. There is nothing special about the equals sign (=). Similarly the ampersand (&). the asterisk * has several uses as an operator symbol of some kind.g. with a space between it and preceding 22/12/2015 13:05 . and &gt. then you should use e. 10<sup>15</sup> and. But if the symbol appears inside text that is affected by markup or CSS rules that make the browser use an italic font. characters outside ISO Latin 1) despite their problems. For multiplication of numbers and quantities.unit { font-style: normal. (appearance on your browser: ≠ ≤ ≥). In HTML. On the other hand. a × b or perhaps the middle dot. this normally means that you don’t use any speci ic markup for them. the simplest method is to use tt markup. but you might also consider using the division sign ÷ in some cases. by the ISO 80000-2 standard. e. the correct multiplication dot is not the middle dot (·) but the dot operator (⋅. Some authors use =< and => instead of <= and >=. Since the asterisk is displayed in relatively small size and in a superscript position in most fonts. When using “special characters”. and JavaScript. e. the != symbol could be a mystery.g. Math). So if you use it that way. there is. Generally such uses are surrogate notations for various star-like symbols with more speci ic semantics.<span class="unit">s</span>.Math in HTML (and CSS) .e. since you can use the multiplication sign. then you would use the numeric references &#8800. a unary minus sign to have separated from its operand by a line break. you could use × for a cross product and · for a dot product. When referring to vector operations. since it has no widely recognized surrogate. But the inequality symbol and the not equal to. such as “star operator”. in lack of better characters. especially if you expect it to be familiar to readers from their experience with programming languages like C.g. Symbol. Other operators include the less than and greater than signs (< and >). e.tut.g. Temperatures in Celsius degrees are written using the degree sign. Since these characters are essential as tag delimiters in HTML. such as inside an em element (which is typically presented in italics). in documents in English. or without any symbol between the operands (Nm). including “asterisk operator”.2 &times. but it is debatable whether this is wise e. if there is no ambiguity. you might consider using markup that suggests that * be displayed in a monospace font. they do not belong to ISO Latin 1. they should be “escaped” using the notations &lt. } Units formed from other units by multiplication can be written using the dot operator or a space. For a general audience. as a star denoting an adjoint matrix.) For multiplication. a · b. not in italics. when they are to be included into the document’s textual content.. the solidus (slash) character / is commonly used.g. and &#8805. e.2 ⋅ 1015 but note the problems with superscripts). in logic as an and operator (connective).fi/~jkorpela/math/ browsers have with hyphen-minus: we usually do not want e.e. something like the following: in HTML: <em>The measured time was only 42&nbsp. 4.presenting mathematical expressions on W. The not equals sign is the most dif icult. in principle. Note that /= is a “divide and assign” operator in some programming languages! In some contexts. then either the multiplication sign or the dot operator “⋅” can be used for multiplication. should be written as &amp.

fi/~jkorpela/math/ number.C (displayed as 12 °C).1) m (but not 63.g. browser support had serious laws when it comes to special characters.2 m ± 0.2 ± 0. use <i>a</i> instead In practice. With the exception above.. and braces { }. thinking that left guillemet « and right guillemet » would mean ‘much less than’ and ‘much greater than’. square brackets [ ]. or assuming that the letter O with stroke Ø would be an empty set symbol! Don’t be tempted by casual appearances of characters. instead of a normal space. When expressing angles. see notes on grouping digits and “thinner spaces” and notes on exponential notations below.” Limita ons in browsers and fonts Previously.).2 ± 0. to make the structure visually clearer. It is not of particularly good design. In principle.g. Support to mathematical characters in fonts varies greatly.&deg.1). When using the plus-minus sign ± (which can be presented as &plusmn. e.g.1 m or 63. As regards to numbers. there is a space between a numeric value and a unit symbol.Math in HTML (and CSS) . e.. 63. See section Line breaks as problems. all or most of the mathematical symbols you need are covered by the Lucida Sans Unicode font. Unicode Technical Report #25. The problems and solutions are discussed in Guide to using special characters in HTML. Also note that ISO Latin 1 includes some other more or less mathematical characters beyond those in Ascii: the micro sign µ and the not sign ¬. Web browsers generally treat any space character as a possible line break point. as well as in other contexts. Using special characters Full Unicode in principle In mathematical notations we very often need special symbols. Some typical examples: Unicode ± U+00B1 plus-minus sign ≤ U+2264 less-than or equal to ∰ U+2230 volume integral U+1D44E mathematical italic small a Status in fonts Practically universal support Very good support Limited. “1 m” (not “1m” or “1-m”). The most fundamental problems have almost completely disappeared. there are reasons to be strict about the meanings of characters. the notation should be such that “it is completely clear to which unit symbols the numerical values of the quantities belong”. Example of HTML markup: 12&nbsp. The document is newer than the presentation in this document and covers some topics not discussed here.1 m or (63. Unicode Support for Mathematics. This is often undesirable in notations like the one discussed here.g.2. unit symbols for degrees. This means e. e. minutes.2 m ± 0. and seconds are written without spaces between the numerical value and the unit symbol. You might wish to use font markup (such as <big>{</big>) to make outer parentheses look bigger.tut. 6 of 23 http://www. some method of avoiding that should be used. But beware of the following: assuming that the sharp s ß would be the letter beta. says: “Starting with version 3. such as Greek letters or a symbol for in inity.presenting mathematical expressions on W. The theoretically correct characters for minutes and seconds would be prime and double prime. Unicode includes virtually all of the standard characters used in mathematics. between a numeric value and a unit denotation.cs. using a no-break space between them. Moreover. Thus. they are usually replaced by the apostrophe ' and the quotation mark " (example: 30°22'8"). you should include a list of fonts that are commonly available on other platforms (Linux etc.). you can use the full Unicode character reportoire in HTML. which is normally present in Windows systems. confusing the ordinal masculine indicator º with the degree sign ° or taking either of them as superscript 0. so you might suggest Arial Unicode MS (shipped with Microsoft Of ice) as a preferred alternative. but being outside the ISO Latin 1 repertoire. But the very important practical limitations in fonts exist. For pages that make essential use of mathematical characters that are not covered by fonts normally in use on 22/12/2015 13:05 . but works for most users rather limited support. As parentheses you can use normal parentheses ( ).

although it is historically derived from it. _ : . or using “escape notations”. See section Simpler ways for simpler needs: simple 8-bit encodings in the above-mentioned document. Quivira. then there is the possibility of using an encoding which lets you enter Greek letters directly. ←⇒ If you only need Greek letters in addition to Ascii characters. ℕ ℵ ℋ ℧ Arrows. 7 of 23 http://www. ∀ ∂ ∆ ∞ ∮ ≈ ⊥ Letterlike Symbols. I used to think that someone might still consider using sigma as a surrogate.cs. Netscape 4) supported them but not the named entities. as &rarr. ad ∞.”.g. aleph. not equals sign. but how many readers would intuitively understand what &ni. though browser support was introduced to Firefox near the end of year 2011.1 [or newer] or any MacOS version. As a practical point.. e. If you use them only. See Using Special Characters from Windows Glyph List 4 (WGL4) in HTML by Alan Wood. underline. in modern character set standards. period. Never trust a smiling cat. nabla operator. to display &#8719. Today. notation where number is the Unicode code position to which a character has been assigned.0 Entities. (There’s also a more compactly presented list by me: Character entity references in HTML 4. has very varying shapes. for various symbols.. as the entity reference &alpha. both without any Greek support. the Greek letter alpha can be written in HTML source as such (α). and Symbola. Perhaps with a few selected characters and with an explanation of what they should look like and a remark: “There are free fonts that contain these characters.g. due to browser bugs..) However. or what a character looks like. Problems of poor rendering Another pitfall is that character rendering may vary greatly across browsers. but Andreas Prilop kindly pointed out my mistake. etc.. But note this would give you just Greek letters.. Technically. (hyphen. you have relatively good odds of inding a large number of users equipped with fonts that can display the characters. the semicolon can be omitted if the character immediately following it is not a letter (A–Z. or as the decimal character reference &#945. such as DejaVu Serif. for the n-ary summation symbol would probably work well (in the above-mentioned sense). including Greek letters as used in mathematics. The variation ranges from an almost dash-like symbol (with just a tiny arrow- 22/12/2015 13:05 .g. Σ). HTML5 drafts contain a long list of added entities.. which can be denoted e. and they all work on any reasonably modern browser. Ditto for n-ary product symbol (&#8719. as the hexadecimal character reference &#3b1.Math in HTML (and CSS) .tut. Pi alls: relying on appearance There are pitfalls in the area of characters. the simple rightwards arrow character.. a–z) or a digit or one of the following: .. concluding with the following: “you need only a browser that knows ‘Unicode big numbers expressions’ and Windows 3. using &sum.g. you would risk losing most of the upper half of ISO Latin 1. but there’s not much practical reason to use the entities. containing some mathematical symbols too. as you can see by using test page for rightwards arrow. For example. See also the document How to ind an &#number. e. notation for a character. ∑) is distinct from Greek letter capital sigma (&#931. the mathematical symbol for n-ary summation (&#8721. means? Note: If the entity is followed by a space or a line break. colon. ∏) and capital pi (&#928. not e. thereby making the notation look slightly more natural. They are nicely presented in WDG’s document HTML 4.. note that Microsoft has de ined WGL4 (or “Pan-European”) list of characters. Some early browsers (e. Π). These methods are equivalent in principle. They are mostly rather cryptic and practically useless. For example.. you are not limited to using those numeric character references for which there is a named entity in HTML 4.0. some of them are rather cryptic. in HTML. assuming it might be better supported. Moreover. You could use ISO 8859-7.fi/~jkorpela/math/ Windows platforms. Note that by HTML speci ications.g.0 contains a relatively large set of named entities like &alpha. and note that you will probably be interested especially on the following Unicode blocks: Mathematical Operators.0.” Methods of entering special characters You can enter special characters as such (if the character encoding permits that). e. it might be a good idea to include a short note about fonts. they are just “named constants”. with de initions that use numeric character references. HTML 4. the semicolon can be omitted. For example. this is no longer relevant.g. You can principle use any &#number. which is relatively widely supported.presenting mathematical expressions on W. Although the entity names are intended to be mnemonic. semicolon).

then the division slash: a/b a∕b Double-struck le ers vs. it may be a good idea to suggest a speci ic. A common surrogate for arrow symbols is the use of character pairs like <- or <=..g. ISO 80000-2 (approved in 2009). so in text with Verdana as the primary font. perhaps in reduced font size (/\ and \/). If the vertical position of the arrow is unsatisfactory. Note that some of the surrogate notations discussed here may suffer from line break problems on IE. Moreover. and one should not do things which seriously con lict with the meanings of characters. For characters that cannot be presented reliably enough but would be needed. in the Letterlike Symbols block.presenting mathematical expressions on W. Therefore. though longer strings like ---> might make the meaning more obvious. In mathematical formulas. some common fonts like Verdana lack it. 8 of 23 http://www.g. There are strong reasons to avoid playing with characters too much.arrow { font-family: "Times New Roman". }.cs. words should not be used. Here is an expression using irst the common slash. e. ℂ are commonly used as symbols of standard sets of numbers in mathematics. being de ined as a mathematical operator. and it can be used in conjunction with many different fonts.Math in HTML (and CSS) . It has long been acceptable to use normal letters in bold face instead. since most of the special characters discussed here can be used on web pages rather reliably. See also notes on problems with some common comparison operators. the reverse solidus \ has no ixed semantics that would be violated by such usage. the logical connectives. In particular.arrow { position: relative. unless pre- 22/12/2015 13:05 . Surrogate nota ons This section is not particularly important any more.. the arrows will appear in whatever font the browser chooses to use as a replacement font. ℝ.fi/~jkorpela/math/ head) to a grotesque version where the arrowhead dominates (e.. to produce a symbol like a. is in principle more adequate than the common slash character.g. Sometimes one could consider using a character or a sequence of characters in a way which tries to approximate the appearance of a real character which itself cannot be used reliably. e. “oo” as a surrogate for the in inity symbol. could rather safely be presented using /\ and \/. } in CSS.tut. corresponding to “and” and “or”. it is better to use just bold face letters such as N. You can achieve this simply by using the b element in HTML. bold le ers Double-struck letters such as ℕ. This appears to be even the original notation. Similarly. bottom: 0. say. Thus. and in fact it was originally introduced for use in these notations! Note that the Unicode characters for the connectives (∧ and ∨) have limited supported in fonts. but their browser support is limited. the arrow (→) corresponds to the arrow symbol traditionally used in mathematics. In fact. at least if explained in a legend. But there are some notations that one could use.07em. In Times New Roman. ℚ. Such letters are contained in Unicode. I’d hesitate using.</span> in HTML and .g. “in inity” or “inf” instead of the in inity symbol (∞). You can write e. widely available font where the appearance is acceptable. <b>N</b>. even though Unicode contains characters like “mathematical bold italic small a” (U+1D482). ℤ. The division slash character (U+2215). Its glyph usually touches the adjacent characters or even strikes through them. as it may be when used between capital letters of the Arial font (A → B). It belongs to rather many fonts. “” in Calibri). But the problem is that the appearance in generally unsuitable. by adding e. it is much safer to use normal letters and simple markup. such as <b><i>a</i</b>. you can tune the rendering (A → B). different surrogates can be considered. The obvious method is to use words or abbreviations. <span class="arrow">&rarr. so an abbreviation is preferable.g. the CSS rule . and it is preferred in the international standard on mathematical notations.

Example: <nobr>a + b + c</nobr>. it can be useful to suggest some particular font. This typically means using spaces. In practice. but Web browsers generally treat every space as a potential line break position. no-break spaces surely work more reliably. or apostrophes as separators. periods. } It is debatable whether it is more logical to use the CSS way than no-break spaces. Using white-space:nowrap (or maybe white-space:pre) in CSS. 9 of 23 http://www. --> looks odd when Arial font is used. serif } .tut. I have written a test page that shows text in different fonts which are commonly available in Windows systems.. There are even more oddities in IE: it may also treat any of -()[]{}«»%°·\ as indicating a potential line break position (before or after.. See Dashes and hyphens. But the method of separating the groups depend on cultural conventions and even personal style. you could use a style sheet like the following: .q { white-space: nowrap. &#8722. partly because browser support for the white-space is still limited. but --> in Tahoma looks pretty much like an arrow.darrow { font-family: "Times New Roman". Thus. or any pause in speech presentation. Symbol. partly due to general CSS caveats. using the font face markup in HTML or the font-family property in CSS. and that would avoid the hyphen problem. depending on the character). On the practical side. In a sense. serif } and HTML markup like the following: <span class="logop"><nobr>/###BOT_TEXT###lt;nobr><span> <span class="arrow"><nobr>--></nobr><span> <span class="darrow">==><span> This is how they look like on your current browser: /\ --> ==> Line breaks as problems Line breaks are often undesirable inside expressions. Note that the nobr markup is the only sure cure against IE’s tendency to treat every hyphen as a potential line break opportunity. monospace } .fi/~jkorpela/math/ cautions are taken by using nobr markup. This is useful if it’s OK to prevent all line breaks inside a table cell (except line breaks explicitly requested using br tags). There are several ways to deal with this: Using the no-break space character (presentable using &nbsp. as explained in Word division in IE.cs. For example.. even in a string like a-b or -a! But if you have decided to use “special characters”. then you might use the real minus sign. Using the nowrap attribute in a td (or th) element. it is a structural property of an expression like “42 m” that its two parts belong closely together.presenting mathematical expressions on W. commas. Since notations like /\ or ---> try to imitate the shape of the real characters they stand for. Typically this means that you would use something like the following: in HTML: <span class="q">42 m</span> and in CSS: . so that in any normal presentation. instead of hyphen. Grouping digits and using “thinner spaces” The problem with separators It is customary and recommendable to group digits in long numbers to groups of three digits. Using the nonstandard but rather widely supported nobr markup around a string that should be kept together. but we will discuss a special case later. 22/12/2015 13:05 .Math in HTML (and CSS) . it may well split “f(x)” to “f” on one line and “(x)” on the next! The nobr element is the most effective cure.) instead of a normal space.arrow { font-family: Tahoma.logop { font-family: "Times New Roman". or a list of fonts in order of precedence. there should be no line break between them.

In practice. since we can then use word-spacing in a simple way. It is often regarded as good style to use some spacing e. you might regard spacing between digit groups as typographically excessive. It is true that e. using them is not a good idea. so it naturally adapts to whatever font size happens to be in use. then with that effect. That property speci ies the spacing to be used in addition to default inter-word spacing. contain subscripts). but here we are discussing mathematical texts.. Affec ng the width of spacing Although there are several space characters of speci ic width in Unicode (in the range U+2000 to U+200B in the General Punctuation block). In my opinion. word-spacing: -0. as explained above. but things would get much more complicated when variables consist of several characters (e. the line breaking problem that we just discussed. e. using advanced tools and techniques.005 would mean one thousand and ive and 1. If the spaces were omitted.number { word-spacing: -0.cs. where the practice is recommended by standards. spacing is controlled carefully. since the other alternatives could be misinterpreted.g. Second. so a negative value suggests a reduction of the spacing. when using TEX. in English texts it does not conform to normal English practice. I used the following markup: <span class="number">123 456 789 000 000 000</span> and the following style sheet: .fi/~jkorpela/math/ It is safest to use spaces. This seems to make the digit groups separated visibly but not disturbingly. The boring part of the matter is that you typically need to include extra span markup just to have some element with which the rule can be associated.005 would mean one and ive thousandths. This gives more lexibility. It means a suggestion to reduce the normal spacing by 7% of the font size. Spacing in expressions The “excessive spacing” problem also arises in other contexts in mathematical expressions. if normal spacing (as between words) is used. letterspacing (which actually affects the spacing between all characters. they don’t work well.07em. but we saw that there are reasonable solutions to it. around mathematical operators.presenting mathematical expressions on W. so that you don’t need to type it all by hand.. An expression like “a + b” is usually best written in HTML so that there are spaces around the operator “+”. This raises two problems: First. The following demonstrates irst a long number without the effect of such a suggestion. For related notes.tut. but we can aim at reasonable quality.07em creates a fairly nice result for spacing between digit groups. under different style sheets: unstyled with spaces a + (b × c) 22/12/2015 13:05 . it’s just the reverse! We need to make some decision concerning the decimal separator. they are “compatibility characters” only. discussing similar problems in text processing.Math in HTML (and CSS) . } The white-space rule is unrelated to spacing but a good idea for other reasons. You can hopefully ind some nice program tool for generating the markup needed. A “word” is here any sequence of non-whitespace characters.g. partly due to limitations in browser support for such “special characters” (to be discussed in the next section). white-space: nowrap. see How to cope with international standards for the thousands separator by William S. Statler. The following example shows the rendering of an expression with several operators. And in principle. But you can use normal space characters and specify some simple CSS rules that suggest reduced spacing between “words”. 10 of 23 http://www. In high-quality typesetting. as a rule.g. in English 1. in French. naturally assuming that your browser supports this part of the CSS speci ication: 123 456 789 000 000 000 123 456 789 000 000 000 For the latter number. We cannot expect to achieve the same using HTML and CSS. using the word-spacing property with a negative value.g. For example. not just letters) could be used in simple cases like this. but not as big spacing as we get in typical browsing situations if we just use normal spaces.. and in several other languages. but for integers we can avoid the problem by using spaces: 1 005 is unambiguous.

Note: the constant e (= 2. so further size reduction may easily make the text unreadable. they shall be written in upright style. I refer to the excellent presentations Using FONT FACE to extend repertoire? by Alan J. (The background extends to the padding but 22/12/2015 13:05 . In italic.Math in HTML (and CSS) . one of the most common ways of trying to include Greek letters and mathematical symbols into Web pages was to use font face="Symbol". so that the trick would make the spacing excessive.2em tends to reduce spacing so that it almost corresponds to the rendering we would get if no space characters were used. A value of -0. As a side effect. Italic may cause spacing problems Browsers often tend to put characters too close to each other when a character in italics is immediately followed by a non-italics character. See below for problems that italics may cause. But consider it as a presentational suggestion only. IE 3 oddly displayed var in monospace font.0) says that it “indicates a placeholder variable”. you can use big markup or the font-size property in CSS.123 – consider then putting the decimal point too inside the small markup). In particular: You could use the b markup for symbols of vectors to make them appear in bold face. the characters will by default be smaller than normal. using markup like <i>f</i>&nbsp.(0). a word-spacing value like -0. Using padding is probably better. letters are usually slanted. You could use either margin or padding property for this. You may still ind web pages that propagate such usage as if were clever and useful. But this is really an ugly trick. if it is upright and tall. Similarly. the trick appears to work in many situations. Perhaps the best way to deal with the italics issue is to use CSS to add some empty space after any element rendered in italics. making sure that the text itself indicates the meanings of symbols. You can combine those elements to present vector variables: <b><i>x</i></b>. since some day someone might set a background color for the element. so any correctly behaving browser will display it using some physical presentation (glyph) for that character. but according to the ISO 80000-2 standard. e. in addition to the logical em or strong markup (commonly rendered in italics and in bold. |a| may look reasonable.07em a + (b × c) word-spacing:-0. Flavell and <FONT FACE> considered harmful at the Alis Babel site. make digits after a decimal point appear in smaller font (as in 42.2em a + (b × c) unstyled without spaces a+(b×c) Thus. For example. this trick seems to prevent an undesired line break before “(” on IE.cs.tut. This is more or less an inherent problem with fonts rather than a browser issue. on many browsers (but not all). and considering bolding just as extra clue. Useful font markup There are several reasonable uses for font-level markup that could be applied in mathematical notations. but that’s because of browser bugs. The simplest way is to use the small and big elements. f (0). But if you like.. If you wish to emphasize a formula like E = mc². You might consider using a no-break space character between them.fi/~jkorpela/math/ word-spacing:-0. and it might result in poor appearance on a browser which behaves more reasonably by default. and this often makes a tall letter hit the next character. respectively.. as in f(0). you could e. but current browsers use italics. but |T| probably looks bad without stylistic tuning.g. its original de inition (in HTML 2. you could use i or var markup for variables and other symbols which are conventionally displayed in italics. I will not explain here why that approach is fundamentally wrong. by default). 11 of 23 http://www.718…) and and the imaginary unit i are often written in italics.07em creates an appearance that more or less resembles typical typesetting of mathematical expressions. such as writing <font face="Symbol">c</font> to get the Greek letter gamma (γ). as in f (x) or sin x. The invariable meaning of <font face="Symbol">c</font> is the letter c. leaving enough space. Brie ly.g. but it’s questionable whether var was meant for mathematical variables. The var markup may sound more logical for variables. which displays as follows on your browser: x You might wish to change font size for some characters. But note that if you use sub and sup for subscripts or superscripts. but these observations apply to typical fonts like Times New Roman and Arial. Using fonts Say No to font kludges In the old days.presenting mathematical expressions on W. The effects naturally depend on the font in use.

Quoting ISO 80000-2: It is recommended to use only parentheses for grouping. italic. Thus. Georgia. which is a good serif font for printed matter but problematic on screen due to the much smaller resolution.. They have rather similar design in all fonts. and then angle brackets. serif. } Parentheses While it has been conventional to some extent to use different characters for nested parentheses. Example: i. be MATHEMATICAL LEFT ANGLE BRACKET U+27E8 and MATHEMATICAL RIGHT ANGLE BRACKET U+27E9. since none of them them is universally installed on computers. DejaVu Serif. according to the standard. typically have no serifs. Thus. and Bookman Old Style. var { padding-right: 0. then they should. normal parentheses should be used: ((a + b)/c)².2em">f</i>(0) for an expression like f (0). but not fonts of different design in the same paragraph or other block of text. etc. When you need to pick up special characters. Font demo serif sans-serif × x × x U ∪ U ∪ ε ∈ ε ∈ aa a a o o o o This usually rules out Arial. angle brackets should only be used in specialized meanings. because mathematical operators. The main reason is that most fonts have a limited character repertoire. it is often more or less necessary to mix fonts.nabla { font-family: Arial Unicode MS. Just remember to list down a few of them in your font-family. em. Or you might even write a general style sheet rule that sets a right margin for all inline elements that are commonly rendered in italics. taking letters and other common characters from one font and mathematical symbols from another. cite.presenting mathematical expressions on W.cs. However. or maybe for an arithmetic mean if the primary notation (line over) is not applicable. In most browsers. Palatino Linotype. It is important to distinguish mathematical symbols from each other and from letters and other characters. 12 of 23 http://www. If angle brackets are used in math. dfn. Bookman Old Style.Math in HTML (and CSS) . to write the expression ∇f you should use markup like <font class=nabla>∇</font><i>f</i> together with a CSS rule like the following: . margin-right: 0. { }. and bold versions of a font. since brackets and braces often have a speci ic meaning in particular ields. Instead of usage like [(a + b)/c]². in mathematical texts. You might explicitly set right margin to zero. We can use normal. and &rang. In particular. The serifs and the varying stroke width in serif fonts often help this. and you don't want a cumulated effect. you could use markup like <i style= "padding-right: 0. } use Firefox with Web Developer Extension to view your page. Modify the style sheet by removing the irst font in the list. like the multiplication sign ×. Parentheses can be nested without ambiguity. the most commonly used font on web pages. For example. Changing fonts In good typography. as described in section Using special characters. Hint: after writing a CSS rule like body { font-family: Cambria. since it is imaginable that some browsers deal with the problem by using some default right margin. then select “Edit CSS” in its “CSS” menu. the nabla operator ∇ (U+2207) is present in several fonts. using ( ). but not in any serif font commonly available on Windows systems. Moreover. [ ]. you cannot be too picky. Lucida Sans Unicode. without editing the page itself. we avoid mixing fonts in text. such as L² inner product of functions. Georgia. look at the page.. The HTML entities &lang. a large number of mathematical symbols can be found in commonly available sans-serif fonts like Lucida Sans Unicode and Arial Unicode MS but not in common serif fonts. This may sound strange.) If you need the spacing just for an individual expression. 22/12/2015 13:05 . This way you can quickly test the page on all the fonts you suggest. } Prefer serif fonts Fonts with serifs are usually better than sans-serif fonts for mathematical texts. Palatino Linotype. Suitable serif fonts that work both on screen and on paper include Cambria.tut. serif fonts typically make a better distinction between upright and italic style. in order of your preference. Linux Libertine.15em.fi/~jkorpela/math/ not to the margin. But there is usually a considerable difference between serif and sans-serif design for letters. the default font is Times New Roman. remove the next font. such practice is not endorsed by standards.

namely those for 1/7. But if you need other fractions too. “working” here means just getting displayed in some odd font.presenting mathematical expressions on W. The following line illustrates an attempt at such presentation. Strangely enough. even though you still have all the font problems. 13 of 23 http://www. IE seems to be the only browser that works by the speci ications. The fraction slash character is often more slanted than the normal slash (solidus) charac- 22/12/2015 13:05 . and people are accustomed to such simple presentations of fractions on web pages.. they will most probably be picked up from a font designed for Chinese-Japanese-Korean (CJK) “ideographs”. even fractions can be shown using a horizontal line. you might consider using the ISO Latin 1 characters for them. In Unicode there are a few more fraction characters (namely for 1/3. 3/5. and therefore with some fragility: Is 13 or ⅓ better? Frac on characters If the only fractions in your document are vulgar fractions ½ ¼ ¾. though in this imperfect world. and 0/3. It should never be a matter of glyph preference which character you use. so avoid them unless the contents absolutely needs them. By using character references.cs. It is not typographically good. U+2329 and U+232A. violations of this principle are sometimes understandable and foregiveable. this is not a good idea.fi/~jkorpela/math/ denote other characters. The Unicode standard says that the use of U+2329 and U+0232A as mathematical brackets is “strongly discouraged. in the Number Forms block. but it is robust. It is therefore better to use CSS to reduce font size and change vertical position. since it would be odd if different fractions had essentially different appearances. Construc ng a frac on You might use a linear notation with sup markup for the numerator and the sub markup for the denominator. &frac14.” In practice. There’s a special of oddity with the entity references for angle brackets. none of which is shipped with any operating system or popular software). 2/5.. most browsers treat them as denoting U+27E8 and U+27E9. as &#9001. HTML5 drafts have silently changed the meanings of &lang. Conclusion: Avoid entity references. solve the problem for numeric fractions in an elegant way. the font support is far from universal. Moreover. 4/5. 7/8). In mathematical texts. Frac ons Simple linearized nota on For fractions like 6/7.. although they are covered by many fonts. &frac34. Even though HTML speci ications clearly de ine &lang. You might also consider using the fraction slash (U+2044) character which should. 2/3. While they “work” more often than the correct characters. therefore designed to it into a largish square. font support to the correct mathematical angle brackets is still rather limited. as denoting U+2329 and U+232A. and &#9002. in this issue. with a number above and below it. especially within running text. The main problem is then that an expression like 5/8 tends to cause uneven line spacing. but it would still be a limited repertoire. 5/6. when you use these characters.. i. That would mean something like 5&x#2044. 1/6. and &rang. the common linearized notation is usually the best. e.8 in HTML. but inside text...tut. 5/8. their usage should be limited to the relational meanings (though the relation could of course be other than the common ordering relation). It is not appropriate to use the less than sign (<) and the greater than sign (>) as angle brackets. and &rang. as entity references &frac12. 1/10. This canonical equivalence is likely to result in unintended spacing problems if these characters are used in mathematical formulae. 1/5. you will at least know which character will be used. because of their canonical equivalence to CJK angle brackets.g. 1/8. according to the Unicode standard. with various compromises and relatively complicated HTML and CSS. Two-dimensional style In two-dimensional display formulas. 3/8. The newest fraction characters.e. typically causing typographic mismatch. it’s hardly feasible—the numbers would need to be such a small size that legibility would be poor. to correspond to the behavior of most browsers. due to the poor quality of implementation of superscript and subscript style in most browsers. 1/9.Math in HTML (and CSS) . On the other hand. have very limited font support (only a few fonts.

Using so-called OpenType features. it has become possible to utilize OpenType features using the CSS property font-feature-settings. possibly touching them. but a more serious problem is that not all browsers support MathML. This is intended to correspond to special rendering where the numbers around it are in reduced size and vertically positioned in a manner that re lects a traditional way of writing fractions. Such a presentation is usually OK in display formulas.w3. and this may result in unsatisfactory rendering: the fraction slash appears between normally styled numbers ( ⁄ ). the fraction is written in simple linear notation but wrapped in an element for which the OpenType feature "frac" is requested for. in Arial. About tuning. with the \frac command.presenting mathematical expressions on W. However.. Browser support is becoming more widespread. the code degrades to a rendering like “5 8” instead of “5/8”. such construction can be asked for.5 = ½? MathML In MathML. 14 of 23 http://www. The code is verbose. Using OpenType features Some fonts (currently. see the Q/A pages LaTeX force slash fraction notation and How do I typeset arbitrary fractions like the standard symbol for . contain superscript variants of glyphs.<font and CSS class=denom>8</font> OpenType "frac" <span class=frac>5/8</span> MathJax \(\frac{5}{8}\) MathML <math xmlns="http://www. with horizontal line.g. lowercase letters a–z. with horizontal line between them. It is however supported in even fewer fonts than "frac". using the mfrac element. Using MathJax It is easy to create fractions using MathJax. it creates a fraction with numerator and denominator stacked. Summary To demonstrate what the different approaches yield on your current browser with its current settings.fi/~jkorpela/math/ ter. On web pages. ⁵⁄ looks bad. But browsers do not currently do such things. but less so in text. it’s more natural to try to imitate the traditional fraction appearance..8 Fraction slash <font class=num>5</font>&#x2044. Although this could be alleviated by setting letter-spacing.Math in HTML (and CSS) . OpenType also de ines the feature "afrc" for alternative fraction format (typically. a fraction can be described as a special case of a fractional expression. Using this approach.tut.. On non-supporting browsers. typically for digits. especially when embedded in an HTML document.org/1998/Math/MathML"> <mfrac bevelled="true"> <mrow> <mn>5</mn> </mrow> <mn>8</mn> </mfrac> </math> ⁄ text 5⁄8 text ⁄ text text text 22/12/2015 13:05 . here is a table of different presentations for 5/8: A fraction presented using different techniques Approach Notation in HTML document Appearance Linear notation 5/8 5/8 text Special character &#8541. ⅝ text sup and sub <sup>5</sup>/<sub>8</sub> 5/ text 8 Fraction slash 5&#8260.cs. and a few operators. not sloped fraction slash). depending on font (e. using CSS. mostly the so-called Microsoft C fonts like Cambria) contain information for constructing fractions using special shapes and positioning of digits and the slash.

Links want to be links. Use just the radical sign with no vinculum.. then a letter with combining overline: x. font-feature-settings: "frac". }. However. it’s assumed to be decoration. consider using the combining overline character (U+0305) after the symbol to be overlined.tut. e. overlines Underlining To underline something.denom { position: relative.2). as the property name says.fi/~jkorpela/math/ The style sheet used is the following: . Radicals For radicals (expressions of roots). . } . it is customary in typeset mathematics to use a vinculum it more evident what belongs “under the root”. you could use markup like <span class="frac">5/6</span> for fractions and use the style sheet rule .g. √(a² + b²). left: -0. (a² + b²)1/2. go ahead and use the u element.g. HTML has no markup for overline.. as the overline is close to the letter. } There can be line breaking problems with the “/” character as well as the fraction slash.05em. and the joining is dif icult to arrange without using specialized software that draws math expressions. Somewhat illogically. However. using parentheses if needed. In a style sheet you could suggest overlining. x̲ . this method works.2em. this character appears in a few fonts only and does not necessarily produce any better rendering. A simple test (with an underlined character and a symbol with combining low line): x. It would be less logical to use the CSS declaration text-decoration: underline.cs. irst with a CSS-overlined letter.denom { font-size: 70%.presenting mathematical expressions on W. This is recommended in The Oxford Style Manual (clause 12. However. x̅ . not part of the content proper. You might suggest overlining to make to produce a sort of vinculum: 22/12/2015 13:05 . The vinculum is a horizontal line that joins with the radical sign. To stay on the safe side. A simple test.Math in HTML (and CSS) . 15 of 23 http://www. you could use the u element in HTML.g. and in any case style sheets are for suggestions only. you should expect style sheets to get ignored fairly often.num { position: relative. you could use an embedded style sheet as follows: <b style="text-decoration:overline"><i>x</i></b>. though currently on minority browsers only. There are risks with fonts. This is even the recommended way according to the ISO 80000-2 standard. Overlining something like x might be adequate if the context or explicit explanations make it clear what is meant even if the overline does not appear.frac { white-space: nowrap. and you should avoid doing anything that might make something look like a link if it isn’t. but in most browsing situations. e. underlining is widely taken as indicating a link on the Web. you could use the combining low line character (U+0332) after the symbol to be underlined. You might consider the following options: Use fractı́onal powers instead. Underlines. since here underlining is not just a suggestion on rendering style but an essential feature of content. to indicate an average. -ms-font-feature-settings: "frac". left: 0. -webkit-font-feature-settings: "frac". Overlining It is common to use overlining in mathematics. } . The rendering varies but is generally much better than in the CSS methods.6. But if underlining a symbol is part of an established tradition in some ield. If overlining is essential. note that the overline appears rather high above the symbol. For casual overlining a single symbol. using the declaration text-decoration: overline.ofrac { -moz-font-feature-settings: "frac". Presentationally. bottom: 0.5ex. As an alternative.num. } . e.

e. } . It is even desirable. The following example illustrates this: 1 5 3 7 + 2 2 2 2 = 3 7 5 9 22/12/2015 13:05 . I have experimented with tricks which would put the parentheses inside span elements with style sheets suggesting the suppression (display:none) of them in presentation.presenting mathematical expressions on W.g. you might set a top border for the radicand. Things may get distorted on many browsers if there are exponents written using sup under the root. Besides. You might write. the relatively high vertical placement of the overline does not disturb.radic { border-top: solid 1px }. since the basic HTML constructs are simple and the ine tuning. . the table representing a matrix has been embedded into an outer table so that we have been able to associate a symbol with the table. to methods discussed in the Towards two-dimensionality section below). } This results in something like the following on your browser (when a cell spacing of 4 pixels and centering of cell contents has been suggested too): A = x-y -a 42 c a*b c In the example above. though they are less widely supported than the square root symbol.radicand {text-decoration:overline. and include a style sheet rule like table. <table class="matrix"> for any table which presents a matrix. you could use CSS to suggest reduced spacing between those characters.0 speci ication.fi/~jkorpela/math/ √(a² + b²) This uses simple markup where the expression in parentheses is enclosed between <span style="text-decoration:overline"> and </span>. say. the conventional notation in mathematics is to use large parentheses around.matrix td { background: #fda none.radic {letter-spacing:-0.</span><span class="radicand"><var>x</var> </span> with CSS like the following: . some tricks are needed.15em.Math in HTML (and CSS) . the parentheses are redundant when overlining is applied. } This looks like the following in your current browsing situation: n√x. Arrays and tabula ons HTML tables are intended for presenting data which is tabular. We will not discuss here the tabulation of numeric data in general. It would often be desirable to align numeric data on the decimal point. you might put the radical index right before the radical symbol. in superscript style.. 16 of 23 http://www. In our example. you would write an outer one-row table which contains the matrices in its cells and a plus sign in a cell of its own between them. But it needs to be noted that numeric data should normally be right-aligned. It’s probably best to use a different presentation which makes matrices have an appearance which is suitably distinctive. This seems to produce reasonable presentation even when there are exponents and subscripts (sup and sub elements) in the radicand. This would mean HTML markup like the following: <span class="radic"><sup><var>n</var></sup>&#8730. such as a special but not too striking background color for cells. when you wish to present the sum of tables. but this is in practice not possible in the way de ined in the HTML 4.cs. is beyond our scope.. This would be rather dif icult in HTML and would work well for very small matrices only (cf.tut.g. and perhaps an even higher placement would be desirable. which is not the default alignment in HTML tables. so you often need the align="right" attribute (in td or tr elements). Instead. Similar techniques can be used e. For a general root. such as using a monospace font and right padding with no-break spaces so that the items in a column have the same number of characters to the right of the decimal point. using attributes in HTML markup and/or style sheets. In this context. color:#000. For a matrix. Instead of text-decoration: overline. as the following example illustrates: d = √(x2 − x1)² + (y2 − y1)² What about roots other than the square root? There are Unicode characters for the cubic root and fourth root symbol.

replacing their markup examples with their appearance on your browser: Since SUB is inherently presentational. ex a2. though. it should not be relied upon to express a given meaning. it can be useful for mathematical exponents where the context implies the meaning of the exponent. (See my notes on the intended use of sub and sup. with font-feature-settings: "sups" For subscripts.. as well as other cases where superscript presentation is helpful but not required. Some fonts (currently. HTML markup for subscripts and superscripts: Style or essence? The HTML language has the sub and sup elements for subscripts and superscripts. it should not be relied upon to express a given meaning.fi/~jkorpela/math/ Subscripts.0 Reference.. a2. with expressions like you can achieve typesetting quality in principle.presenting mathematical expressions on W. the results vary. the amount of font size reduction as well as vertical placement can be controlled in detail.tut. since the glyphs have been designed by a typographer to it the design of the font. where the subscript presentation is helpful but not required. too. Using techniques like MathJax. In practice. font-size: 70% Superscript character MathJax \(a^2. But they should primarily be regarded as stylistic suggestions only.Math in HTML (and CSS) . and exponents Alterna ve methods for displaying superscripts A superscript can be presented in an HTML document in several ways: The simplest way is to use sup markup. To quote the descriptions of sub and sup in WDG’s HTML 4. Browsers implement it using reduced-size font in a raised position. For example: Chemical formulas include H2O (water) and C21H27NO (methadone). + xn... The following table illustrates the approaches. It has essential problems in typographic quality. as well as uneven line spacing. e Superscript glyphs.) Naturally they can be valuable for “styling” math. ²). Since SUP is inherently presentational. Let x = x1 + x2 + . Some superscript characters such as superscript 2 exist as separately coded (e. and a few operators. An example of a quadratic polynomial is 3x2 + 5x - 7. it can be useful for chemical formulas and mathematical indices. causing too small stroke width and too large size. typically for digits. For example: The rent is due on the 1st of each month. mostly the so-called Microsoft C fonts like Cambria) contain superscript variants of glyphs. lowercase letters a–z. e^x\) a². The last may show just normal characters instead of superscripts. the situation is rather similar. ex a² sup markup Styling with position: relative.g. They are normally of good typographic quality. bottom: 1ex. However. Using CSS. if your computer lacks the Cambria font or your browser does not support access to superscript variants at the font level. 17 of 23 http://www. there is a more limited set of subscript characters than superscript characters.cs.. Browser support is becoming more widespread. This does not remove the fundamental typographic problem. This approach is limited to small number of characters. superscripts. However. however. However. It has become possible to utilize such variants using the CSS property font-feature-settings. 22/12/2015 13:05 . rather than as essential parts of the notation.

especially when superscripting is used to express exponentiation. it seems practical to put the sup element irst and move the subscript to the left. Superscripts and subscripts as two-dimensionality Two-dimensionality in formulas will be discussed later. the Ions page in Eric Weisstein’s World of Chemistry. and the Ascii hyphen is a particularly poor surrogate here due to its shortness. in general. in denoting the transpose of A by AT (i. so a horizontal shift created by margin-left or some other method might be adequate for some fonts and 22/12/2015 13:05 . for example. as i=0. The same applies to using superscripts e. the notation for an ion always has a superscript and may or may not have a subscript. But in mathematical texts. midline horizontal ellipsis would be better.fi/~jkorpela/math/ However.tut. The following example (which also uses special characters) shows the markup for an in inite sum and the resulting appearance on your browser.g. the font size for the formula has been set to 125%. some of which will be discussed in the sequel.Math in HTML (and CSS) . such practice is best avoided in order to remove any risk of confusing such usage with exponentiation or other mathematical superscripting.∞ xi.e. e.…. Beware that widths of characters vary by font. the main problem on most browsers is that the in inity symbol does not appear above i=0 but to the right of it (in superscript style though). It seems that the stylistically preferred notation for ions has the superscript in the same horizontal position as the subscript. but here we mention some possibility of using superscripts and subscripts to simulate notations that should really be written above and below a symbol. for example in formulas for ions. It really makes a difference if 109. &#8721. which is intended to mean 10 to the power 9. But we can try to affect the horizontal placement by using a negative margin. But generally they lead to rather complicated constructs.<sub><var>i</var>=0</sub><sup>&#8734.. In the worst case. and there need not be any contextual hints. Consider the formula NO<sub>3</sub><sup>−</sup> where letter O has both subscript “3” and superscript “–”.g. Superscripts are often used for footnote references in print media. superscripting is essential. In browsing situations where the in inity symbol is correctly displayed. However.cs.ions sub { margin-left: -1ex. In the above example with HTML markup for a formula and the formula itself side by side. actually gets displayed as 109. Besides. } .. The presentation of a summation expression could be tuned in different ways. Creating good appearance for variables with both a subscript and a superscript is rather challenging: ine-tuning is needed.</sup> <var>x<sub>i</sub></var> ∑i=0∞ xi That means summation of xi (with i as subscript) from i=0 to in inity. as explained in the document Footnotes (or endnotes) on Web pages. This would mean markup like <span class="ions">NO<sup>&minus. sometimes both subscripts and superscripts are used. In chemistry. such problems were discussed in the section on special characters.8. The markup mentioned above by default creates an appearance where the superscript is on the right of the subscript (O3− ). In general. A immediately followed by T in superscript style). and the complexity may cause problems on different browsers. } and it would result in the following on your browser: O−3. and the rendering will still greatly depend on the font used. 18 of 23 http://www. special symbols easily become unreadable when font size is reduced. which uses images to create such appearance. so you might consider setting the font size larger than normal. Since. See. current and future. some simple superscript positioning problems can be addressed relatively easily. such footnote references don’t work well on Web pages in general. The latter is the minus sign. Let us take the example of just positioning a simple one-character superscript above a one-character subscript.∞ (which makes use of the horizontal ellipsis character. but it’s less widely supported) giving the following appearance: ∑i=0. the reader might misunderstand the upper limit as an exponent of the lower limit! So it is perhaps better not to use a superscript at all but put the limits into a subscript.ions { line-height: 1.….presenting mathematical expressions on W..</sup><sub>3</sub></span> (or maybe with div instead of span) and a style sheet like the following: . Changing the order of the superscript and subscript would not help much. The in inity symbol ∞ might appear in fairly small size.

browsers generally apply a size reduction (by about 80%) fairly consistently. Size of subscripts and superscripts It is usually best to avoid setting the font size of sub and sup elements. The reason is that IE has a longstanding bug. But they often fail to handle nested superscripts (or subscripts) well.. it might be a good idea to set line-height globally (for the body element) to a value like 1. When you write <sub>i</sub>.presenting mathematical expressions on W. too. Demo page: sup size ix. The line-height property is useful for defeating some IE bugs – and fairly natural. you would need to take extra measures.tut. or at least tolerably well. For example. small font. Here is test for your browser: ab (the letter c should be a superscript of b).cs. In a case like “ai2”. But if you set font-size on sub or sup. a superscript expression like AT makes the line have more than normal vertical spacing above it. like the following: Use span markup (with class attributes) instead of sub and sup. like “(ai)2”. it cannot as such be used in conjunction with the method of making line spacing even that will be described later in this document. Nested superscripts Most browsers render superscripts properly. you have a few options. The simple solution to this problem is to use a style sheet that positions subscripts and superscripts vertically using relative positioning. it has just the opposite effect. and set vertical-align and font-size in CSS. since the CSS code above postulates that a sup element appears immediately after a sub element. honor c nested superscripts in rendering. There is no way to express this structural relationship in HTML. For example. instead of the vertical-align property.fi/~jkorpela/math/ poor for others. Using extra parentheses. but it makes the meaning unambiguous and clear. since this helps with some of the smaller problems of uneven line spacing and may improve readability in general. If you don’t set it. However. 22/12/2015 13:05 . The method is described in more detail in the document How to prevent uneven linespacing when subscripts or superscripts are used on web pages. including reasonably new versions of IE. Note that if an element in class ions contains a lone superscript.6 – 0. Uneven line spacing As you may have noticed on many web pages. This prevents the effect that makes some lines higher than others in the same paragraph. modern browsers. The reason is that subscripts and superscripts may increase the vertical space needed for a line. Moreover.6. since you are using quite some height here. subscripts and superscripts tend to mess up line spacing. stackoverflow: relative font-size of <sub> or <sup> and their descendants in IE Even though it might seem suitable to set the font size to achiever similar sizing across browsers. From the HTML perspective. Moreover. The margin-left property effectively shifts the subscript to the left. If you really need to set the font size of subscripts or superscripts. And that means that exponentiation in an exponentiation may get lost in graphic presentation.3. “i” is a subscript for “a” whereas “2” is a superscript (exponent) for the expression consisting of “a” with subscript “i”. deviates from common mathematical notations and looks somewhat clumsy.Math in HTML (and CSS) . 19 of 23 http://www. Use sub and sup but use JavaScript to convert them to span elements. IE will interpret it differently from other browsers. some old versions of Internet Explorer render a<sup>b<sup>c</sup></sup> the same way as a<sup>bc</sup>. and browsers quite naturally increase height of a line box (making it larger than the value of the line-height property).8 depending on the font-size). more than we can expect to be available by default. you're saying that “i” is a subscript but not what it is associated with. One approach (perhaps observable in this paragraph) is to set the line-height property (in CSS) to a relatively high value like 1. The preceding paragraph may illustrate the problem that nested superscripts easily cause problems by (almost) hitting the preceding line.. with little hope of ixes: It looks like IE (all versions till IE9) multiplies the font size of the <sub> and <sup> and their descendants with some variable coef icient (sth between 0. the basic problem in situations like this in that the sub and sup elements have been de ined in a rather presentation-oriented manner rather than structurally.

Except for superscript 2 and superscript 3.eq { width: 100%. you can use SI pre ixes so that you won’t need an exponential notation for a number. which logically acts as a header for the row (the equation). For numbers. the CSS methods (whether based on loating or on positioning) seem to suffer from various problems on current browsers. this approach means using special characters with limited browser support. so it’s not a very good solution.5 × 10-6 s by 42. For example. you could replace 42. You can get rid of the presentational attributes width.5E9. it would be a better notation even if exponents worked without problems. a simple table is the practical solution: <table class="eq" summary="Equation and its number. 20 of 23 http://www. there are separate characters which correspond to normal characters in superscript style. For physical quantities. This might work reasonably in documents read by people with programming background or acquainted with scienti ic calculators. in some cases. Since we wish to create pages that adapt to varying rendering widths (“ luid design”).5 × 109 by a notation like 42. you should either replace (somewhat illogically) the th element by a td element. borrowed from programming languages.) Moreover. even by using the Unicode block Superscripts and Subscripts you wouldn’t extend the superscript repertoire much: the other digits and the characters +-()n." width="100%"> <tr> <td>the equation</td> <th align="right" valign="bottom">(number)</th> </tr> </table> If you regard such a table as a deprecated “layout table”. (Well.Math in HTML (and CSS) . 22/12/2015 13:05 .. or use the font-weight property in CSS. For a general power. it would work ine in a text which needs just things like m² or m³ for square and cubic meter. but on the other hand the circum lex character ^ varies in shape and might not suggest the idea of “to the power of” very well. As a whole. as in many programming languages.b) could be used. You might also use function notation such as exp(x) instead of ex. in parentheses or brackets. Assumably non-technical audience guesses the meaning of 10^9 better. Some methods work well if the equation its on one line but lead to confusion when it is divided over two or more lines. as follows: (a + b)2 = a2 + 2ab + b2 (42) ex ≈ 1 + x + x2/2 + x3/6 + x4/24 + x5/120 + x6/720 + x7/5040 + x8/40320 + x9/362880 + x10/3628800 (43) Several approaches have been proposed to achieve such layout using just CSS and no presentational markup.presenting mathematical expressions on W. However. consider its markup. you could replace the use of a notation like 42. a notation like power(a. If you like prevent the equation number from appearing in bold. which are rather often needed of course. Exponentiation is rather often expressed using a surrogate notation which uses an exponentiation operator like ** or ^. This isn’t really a surrogate. it is common to number equations and put the number on the right of an equation.tut. rather.fi/~jkorpela/math/ Avoiding superscript problems There are various ways to avoid the problems with superscripts by using other notations: For some superscripts. The superscript and subscript problems can also be seen as special cases of a wider problem: how to present mathematical expressions in the conventional two-dimensional format? Equa on numbers In mathematics. } .5 µs..eq th { text-align: right. align and valign by using corresponding CSS properties. It depends on the intended audience whether notations like 10**9 or 10^9 need to be explained and which of them is better. but the author should indicate whether this is the bth power of a or the ath power of b (since there are different practices on this).cs. speci ically the summary attribute and the use of th (table header cell) element for the equation number. this could mean the following style sheet: .

and you could just cut and paste them. But let’s see some other possibilities. Preforma ed text for two-dimensionality One might present the expression as two-dimensional preformatted text and include it using the pre element. the visual quality of this method cannot be very impressive. such as i for italics. In this trivial case. though with special problems. Moreover.. you could even use the special characters outside ISO Latin 1. it creates accessibility problems. Using an image is one possibility. two-dimensionality would greatly improve the clarity. The “table” displays as follows: 22/12/2015 13:05 . <i>b</i></td></tr> </table> The only thing that’s really a trick there is the use of a black single-pixel GIF.tut.dx / 1 + x a Several mathematical programs can format expressions that way for you. 21 of 23 http://www. you could use a sort of Ascii art like the following: b / f(x) | ------. in principle. e. Such an approach could be seen as avoidable “use tables for mere layout”. let us irst assume that we wish to present the expression x divided by a − b in the conventional two-dimensional format. and if the linearized version isn’t too complicated and you include it as the textual alternative.gif" alt="divided by" width="100%" height="1"></td></tr> <tr><td align="center"><i>a</i> &minus. Using tables for two-dimensionality A table might be used to make an expression appear two-dimensionally.Math in HTML (and CSS) . in <table cellspacing="0" cellpadding="0"> <tr><td align="center"><i>x</i></td></tr> <tr><td valign="middle"><img src="1px.dx 1 + x a In any case. And you need not be limited to Ascii.presenting mathematical expressions on W.b In more complicated cases. though in a sense a table construct would re lect the structure of data. } The following equation has been formatted with such a style sheet (and its HTML markup is “pure”): (p + q)(r + s) = (p + q)r + (p + q)s = pr + qr + ps + qs (44) Towards two-dimensionality For simplicity.. Note that some markup. stretched with the width attribute to a horizontal line.cs. it might work ine. the linearization x/(a − b) would do just ine. is allowed within pre elements. since it’s gibberish unless seen in the exact preformatted way.fi/~jkorpela/math/ vertical-align: bottom. but in more complicated cases. This would be rather simple in our trivial case: x ----a . font-weight: normal.g. Example (where the integral sign may or may not display correctly): b ∫ f(x) ------.

we might get something like the following: b ∫ f (x) dx 1 + x a In any simple text presentation. Using a bit contrived table markup. it would look rather awful. text-align:center } .presenting mathematical expressions on W. for such reasons. This could be partly addressed by using a summary attribute for the table. we would suggest in CSS the suppression of the display of those characters. width:100%.nom { display: block. <table summary="This is a fractional expression. The border would create a suitable horizontal line.nom { text-decoration: underline. this approach might work tolerably. 22 of 23 http://www. the data would appear as x a - b which can be dif icult to interpret. if i ≠ j Returning to simple examples.fi/~jkorpela/math/ x a − b Reasonable appearance might be achieved that way. We would start from the simple linear notation (a-b)/x. e.cs.. using class names assigned to the span elements.g. Then. <i>b</i><span class="lin">)</span></span><span class="lin">/</span> <span class="den"><i>x</i></span> with the following style sheet: .tut. in text-only presentation and in nonvisual presentation. and we would also use span for the numerator and denominator. with perhaps tolerably graceful degradation in text-only media: a simple character cell browser like Lynx would basically display it as x divided by a - b which might be understandable. } . speci ically the display property in CSS1 (cf. It would be simpler and more natural to have a table with two rows only. to ideas about removing redundant parentheses above). the denominator in the second">. We would put the parentheses and the slash each inside a span element containing that character only. and underlining the numerator. This means markup like the following: <span class="nom"><span class="lin">(</span><i>a</i> &minus. though. for simple de initions: δij = 1.den. . But designing and writing suitable table markup would be rather awkward for nontrivial expressions. using a bottom border for the irst cell. if i = j 0. } This is what looks like on your browser: a − b 22/12/2015 13:05 . presenting both the numerator and the denominator as a block.. let us consider how we might present (a − b)/x two-dimensionally using style sheets. However.Math in HTML (and CSS) . For a rather common case of a de inition that is most naturally presented in two lines. You might consider providing a separate link to an alternative presentation. Let’s see what we could do with the integral above.lin { display: none. with the numerator in the irst cell.

Two-dimensional presentation of expressions via HTML markup is trickery and handcraft. though tools exist for partially simulating canvas on older versions of IE.cs. a small value chops off the top of the text in the denominator. 22/12/2015 13:05 . Conclusion We could consider other approaches too. the canvas element lets you write text to speci ic positions. It gives the following appearance on your browser: a − b x If the denominator is wider than the numerator..presenting mathematical expressions on W. On many browsers.tut. Last update: 2013-02-03. a rich set of mathematical symbols and some other basic notations can be used. But it probably suf ices to conclude with the following note: In HTML.. such as using positioning with style sheets instead of tables. in a case where the denominator has just letters with no ascenders. this may be feasible.65. and the code needed to draw an equation is relatively bulky. 23 of 23 http://www. especially if you also use canvas for other purposes (like an animation). Using HTML5 for two-dimensionality In HTML5.Math in HTML (and CSS) . but currently with accessibility problems that users need to solve. so that the expression would look more natural.5 would be better. Date of creation: 2000-03-08.fi/~jkorpela/math/ x And it degrades to (a − b)/x in non-CSS browsing situations. and a smaller value like 0. This not supported by IE before version IE 5. by pixels.den { line-height: 0. In special cases. you would like to overline the denominator instead of underlining the numerator. now and in the foreseeable future. We might still add . The writing operations are based on JavaScript functions to be standardized in HTML5.65 is a compromise. But there is the risk that on some browsers. This page belongs to section Mathematics & physics and IT of the free information site IT and communication by Jukka “Yucca” Korpela. The value 0. } to reduce the spacing between the line and the denominator. Thus. it doesn’t improve things much. quite often it is better to use JavaScript-based tools or images for such purposes.