math in html and css

8/18/2019 Math in HTML and CSS

1/23

Content:What? No math?Alternative formatsWhat about simple linearized notation?Formulas as imagesImages in running text Using “normal” characters

Using special charactersLine breaks as problemsGrouping digits and using “thinner spaces”Using fontsParenthesesFractionsUnderlines, overlinesArrays and tabulationsSubscripts, superscripts, and exponentsEquation numbersTowards two-dimensionality

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.

A formula for which no natural HTML markup exists

Math in HTML (and CSS)

How to present mathematical expressions using a languagethat has so little markup for them? Web authors often needresort to images, but there are more lexible approaches,like MathJax. Moreover, if you need just some special sym-bols or simple expressions, a lot can be done in HTML, as-

sisted with style sheets (CSS). This document mainly dis-cusses relatively simple mathematical expressions ren-dered one-dimensionally (inline), though possibly with su-perscripts 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.

What? No math?

You may have wondered why web sites, such as Wikipedia,use images for presenting mathematical formulas, even insimple cases like∇²φ = 0. Partly the reason is simplicityand uniformity: since some formulas need to be presentedas images, it may sound simpler to use images for all im-ages—even in cases where simple HTML markup woulddo ine:∇² = φor

∇² = φ

Images provide a methodologically uniform approach, but the result is not typographically uniform at all: charac-ters in an image are typically rather different from the same characters in text.

Although HTML markup exists in the sample case, mathematicalformulas are usually much more complicated. HTML lacksmarkup for mathematical expressions as structures, and there isno simple way to produce anything essentially two-dimensionalbeyond superscripting or subscripting.

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 inscience. It’s not a surprise that you can’t do math in HTML; after all, it’s a markup language, not a programminglanguage. But how are we expected to write physics reports or even modern biology papers without mathemati-cal notations?

There was once an HTML 3.0 draft, with a section titled HTML Math, suggesting relatively simple markup for some basic mathemat-

ics. 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 specializedlanguages are used; see W3C’s Math Home Page for information about such trends, including the MathML lan-guage. If you ask me, the language hopelessly mixes structure and appearance. In any case, support to MathML inweb 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 aredificulties and dificult decisions to be made. For relatively simple mathematical notations, HTML can be usedrather well, especially if you use handle the toughest parts using images with adequate alt texts. See, for example,

h in HTML (and CSS) - presenting mathematical expressions on W... http://www.cs.tut.fi/~jkorpela/math/

23 22/12/2015 13:05


2/23

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

Alternave approaches – formats other than HTML

For documents where mathematical notations are needed a lot, other formats than HTML may turn out to bemore practical. This might mean for example PDF, PostScript, or TeX format, or perhaps all of them, offered as al-ternatives.

The beneits 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 ab-stract available in HTML format too. Typically an abstract can be written with just a modest amount of mathe-matical notations.

There are also JavaScript-based approaches that use libraries for converting TeX notations or TeX-like notationsinto 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 considerablysmaller 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 forexample TeX (speciically, AMSTeX) notations, which is rather simple to learn for basic mathematical constructs.

Avoiding the problem: simple linearized notaon

Sometimes it is best to present mathematical expressions in linearized notation. For example, instead of trying toind a way of presenting the square root of 2 in the normal mathematical way, you might write just sqrt(2). Forquotients, 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 normallyyou 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 touse different types of parentheses: innermost, you use normal parentheses ( ); next level, you use square brack-ets [ ]; 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 spe-cial 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 cir-

cumlex 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 prerequi-sites, 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 accessibleformat(s), such as an image.

Formulas as images

Generang images from formulas

You can use some software, e.g. something TeX based (see also AMS TeX resources) or a mathematics program


23 22/12/2015 13:05


3/23

with graphic output format option, e.g. Mathematica, to produce visual representations of formulas as images.Often such software gives the result in PostScript format, but for Web use a GIF format is usually better, since it ismuch more widely supported in browsers by default. Various tools exist for converting from PostScript to GIFformat. You could also consider using the Latex2HTML converter which can, among many other things, generateimages in GIF format. (There’s another converter, TtH, which uses all kinds of tricks to convert mathematical ex-pressions to HTML without using images. It applies very questionable methods like the Symbol font kludge. Youmight still get some useful ideas from its output and apply them more reasonably.)

Examples of using imagesSuch an approach is widely used on the Web. See, for example, the wonderful MathWorld pages. Note, by the way,than when you use mathematical terms, say binomial coeficient, on your page but cannot deine all of them, it might be a very good idea to link to deinitions and descriptions like those on MathWorld . Even if your terms arealready known to 95% of readers, you can give the 5% a chance to ind it out, and the others might need to brushup their knowledge too, or just check that the term really means what they think it does. See also Eric Weisstein’sTreasure Troves of Science collection, which is impressive, too, not only in content but also in the Web presenta-tion of mathematical formulas. As regards to mathematics proper, e.g. S.O.S. MATHematics also has nice pages onseveral topics.

The technique: the img element

You would use the img element to embed an image into your document, and/or an a href element to create linkto it. The latter method is often worth considering, especially for large formulas. The reader may prefer readingthe text without distractions and looking at the formula (image) at the very moment he is prepared to do so.Moreover, he may prefer looking at it in a separate window (which is separately adjustable in size and position-able on the screen), or perhaps print it out (due to better resolution in print than on screen).

As a very simple example, I have used the simple markup\int_{0}^{\infty}e^{x^2}dxin TeX and generated a GIF image ile from it, then just embedded the image into an HTML document using thefollowing markup:

Assignment 42. Compute

This looks like the following on your browser:

Assignment 42. Compute

And here’s the same with an intentionally broken reference to an image:

Assignment 42. Compute the integral of exp(x**2) for x from 0 to ininityGenerally, the more complicated formulas you need to present, especially if nonlinear in appearance, the moreseriously you need to consider using images for the purpose, despite their drawbacks.

In principle, the object element could be used to embed data in different formats, including images, animations, and interactive pre-

sentations. However, support for object is limited and buggy. Support for its “brother”, the iframe element, is somewhat less buggy. In

special cases, 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. You would then need to include the normal img ele-

ment as the content of iframe, to provide a fallback for browsers that don’t support iframe.

The plain text alternave: alt aribute

If you decide to use an image, you still have the original problem, in a modiied form. Due to accessibility consid-erations, every img element must have an alt attribute that speciies the textual alternative. This means, in prac-tice, that you need to write an alternative presentation of the expression in pure text form, with no HTMLmarkup. On the other hand, you will do this for “fallback” use only, and you can e.g. write rather verbose explana-tions if needed, since the text will normally not be seen by people who see the image.


23 22/12/2015 13:05


4/23

The purpose of the alt attribute is make the text comprehensible in a browsing situation where the image is not displayed. For some notes on the importance and practical use of alt texts, see my Guidelines on alt texts in img el-ements. In the simplest case, you would use a simple linearized notation as alt text.

A particular problem arises when such alt texts contain notational features that are not self-evident and are not otherwise used in

the document. For example, suppose that expressions contain exponentiation, which is indicated using the usual two-dimensional

formatting (an exponent appears raised, perhaps in smaller font) in image presentations, but a circumlex character ^ is used in alt

texts. How can we inform people who need the alt texts, without disturbing people who see the images only? There’s a simple trick:

use a “dummy” image, such as single-pixel transparent GIF, and put the explanations into its alt attribute, e.g.

And you would put this element somewhere near the start of the document, before the irst occurrence of an alt text that uses the

convention explained.

If the image has been generated using TeX, you might also provide a link to the TeX version, since some peoplewho cannot see the image for some reason might be able to understand TeX markup, or utilize it indirectly. Per-haps the image itself could be made into a link. In fact the MathWorld and Treasure Troves of Science pages ofteninclude the TeX notation directly as the alt text; this is useful but not as useful as giving plain text presentationsthere and providing links to TeX versions. In the document HTML Techniques for Web Content Accessibility Guide-

lines 1.0, section Markup and style sheets rather than images: The example of math recommends that if an HTMLdocument has been generated from a TeX document, the original TeX (or LaTeX) document too be made availableon the Web, since there are possibilities for auditory rendition of such versions.

That document also recommends that if a formula is constructed from several images, a single alt attributeshould specify a textual alternative to the entire formula. Apparently, you would put it into one of the images anduse alt="" for the other images.

Images in running text

Images are widely used for presenting formulas on the Web, and they are quite often the best practical way forlarge formulas to be presented as “blocks”. For symbols and short formulas in running text, “inline” , similar ap-

proach can be less pleasant, since the image does not adapt to text font size and face. Here’s a simple example:

The Greek letter is often used to denote summation, but from the character standards viewpoint, then-ary summation symbol is a distinct character, though historically derived from the Greek letter.

If you change the basic font size from the browser’s menu, you’ll see how the image remains the same size, in-stead of being adjusted according to the font size. And attempts to use style sheets to scale images are not alwaysvery successful, though browsers tend to scale downwards relatively well these days; you could design the imagein large size and then use to make the browser to scale it to the font size of the text. More-over, line spacing easily gets disturbed. (See notes on such issues in Guide to using special characters in HTML.)

You could also write e.g. , using a numeric character reference, and then on some browsers the

document would look better with images off than with images on. But why not use just α then?

Using “normal” characters; esp. notaons for physical quanes

Within the “normal” set of characters, namely the ISO Latin 1 character repertoire, which you can use prettysafely in HTML authoring, some characters need special attention as regards to use in mathematical notations.(As regards to typing them into your HTML documents, see section Typing characters in my character code tuto-rial.)

On Macintosh platforms, several browsers have had serious problems with some ISO Latin 1 characters, andthese characters include the superscripts 1, 2, and 3 and the vulgar fractions ½ ¼ ¾ as well as the multiplicationsign ×. It seems that these problems have inally lost signiicance: any reasonably modern browser on Mac ren-

ders these characters correctly.

Among the basic arithmetic operators, the plus sign + poses no problems. As a minus sign, the hyphen-minuscharacter (-) is commonly used, but using the minus sign character would be more logical. It is usually visuallybetter (longer). Nowadays, it seldom causes character problems. It avoids some line breaking problems that


23 22/12/2015 13:05


5/23

browsers have with hyphen-minus: we usually do not want e.g. a unary minus sign to have separated from its op-erand by a line break. (Browsers often break after hyphen-minus, but not minus sign.) For multiplication, there isseldom any reason to use the asterisk *, e.g. a*b (it’s a programming language idiosyncracy), since you can usethe multiplication sign, e.g. a × b or perhaps the middle dot, e.g. a · b. When referring to vector operations, youcould use × for a cross product and · for a dot product. However, in principle, by the ISO 80000-2 standard, thecorrect multiplication dot is not the middle dot (·) but the dot operator (⋅, U+22C5). For fractions and division,the solidus (slash) character / is commonly used, but you might also consider using the division sign ÷ in somecases.

In addition to the above-mentioned use as a multiplication symbol, the asterisk * has several uses as an operatorsymbol of some kind. Generally such uses are surrogate notations for various star-like symbols with more spe-ciic semantics. Since the asterisk is displayed in relatively small size and in a superscript position in most fonts,it does not look good when it should be binary operator. So if you use it that way, in lack of better characters, youmight consider using markup that suggests that * be displayed in a monospace font; the simplest method is touse tt markup, e.g. *. On the other hand, for use e.g. as a star denoting an adjoint matrix, superscript style is better, and normally achieved (if achievable in a browsing situation) by not using any font markup for it.When using “special characters”, there is, in principle, a rich repertoire of various asterisk- and star-like charac-ters available in Unicode. There is a large number of characters with “asterisk” in their name, including “asteriskoperator”. Note that there are several Unicode characters with “star” in their name, including some that are clas-siied as mathematical (general category: Sm, i.e. Symbol, Math), such as “star operator”.

Other operators include the less than and greater than signs (< and >). Since these characters are essential astag delimiters in HTML, they should be “escaped” using the notations < and > when they are to be includedinto the document’s textual content, as in a instead of =, but there’s anyway the risk that one of the constructs be mistaken as an implication ar-row or another arrow symbols. The not equals sign is the most dificult, since it has no widely recognized surro-gate. Note that /= is a “divide and assign” operator in some programming languages! In some contexts, you might use the character pair != to denote inequality, especially if you expect it to be familiar to readers from their expe-rience with programming languages like C, Perl, and JavaScript. For a general audience, however, the != symbolcould be a mystery; there is hardly anything natural in using the exclamation mark to denote negation!

When expressing physical quantities, 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, not in italics. In HTML, this normally meansthat you don’t use any speciic markup for them. But if the symbol appears inside text that is affected by

markup or CSS rules that make the browser use an italic font, such as inside an em element (which is typically presented in italics), then you should use e.g. something like the following:in HTML:The measured time was only 42 s.and in CSS:.unit { font-style: normal; }

Units formed from other units by multiplication can be written using the dot operator or a space, e.g.N ⋅ m or N m; or without any symbol between the operands (Nm), if there is no ambiguity.

For multiplication of numbers and quantities, the multiplication sign × is preferred when a decimal point isused in numbers. When a comma is used as the decimal marker, then either the multiplication sign or the dot operator “⋅” can be used for multiplication. These rules are given in international standards, which give pref-

erence to the use of a comma as a decimal marker, but it is debatable whether this is wise e.g. in documents inEnglish; see the document ISO 31-0: a standard that may confuse by Stewart Clark. Examples:4.2 × 1015 and, in another usage, 4,2 c5; 1015 (renderings: 4.2 × 10and 4.2 ⋅ 10 but note the problems with superscripts).

Temperatures in Celsius degrees are written using the degree sign, with a space between it and preceding

15

15


23 22/12/2015 13:05


6/23

number. Example of HTML markup: 12 °C (displayed as 12 °C).

When expressing angles, unit symbols for degrees, minutes, and seconds are written without spaces betweenthe numerical value and the unit symbol. The theoretically correct characters for minutes and seconds wouldbe prime and double prime, but being outside the ISO Latin 1 repertoire, they are usually replaced by theapostrophe ' and the quotation mark " (example: 30°22'8").

With the exception above, there is a space between a numeric value and a unit symbol , e.g. “1 m” (not “1m” or “1-m”).

When using the plus-minus sign ± (which can be presented as ±), as well as in other contexts, thenotation should be such that “it is completely clear to which unit symbols the numerical values of the quanti-ties belong”. This means e.g. 63.2 m ± 0.1 m or (63.2 ± 0.1) m (but not 63.2 ± 0.1 m or 63.2 m ± 0.1).

As regards to numbers, see notes on grouping digits and “thinner spaces” and notes on exponential nota-tions below.

Web browsers generally treat any space character as a possible line break point. This is often undesirable in no-tations like the one discussed here, e.g. between a numeric value and a unit denotation. Thus, some method of avoiding that should be used, e.g. using a no-break space between them, instead of a normal space. See sectionLine breaks as problems.

As parentheses you can use normal parentheses ( ), square brackets [ ], and braces { }. You might wish to use

font markup (such as {) to make outer parentheses look bigger, to make the structure visuallyclearer.

Also note that ISO Latin 1 includes some other more or less mathematical characters beyond those in Ascii: themicro sign µ and the not sign ¬. But beware of the following: assuming that the sharp s ß would be the letterbeta; confusing the ordinal masculine indicator º with the degree sign ° or taking either of them as superscript 0;thinking that left guillemet « and right guillemet » would mean ‘much less than’ and ‘much greater than’; or as-suming that the letter O with stroke Ø would be an empty set symbol! Don’t be tempted by casual appearances of characters; there are reasons to be strict about the meanings of characters.

Using special characters

Full Unicode in principleIn mathematical notations we very often need special symbols, such as Greek letters or a symbol for ininity. Inprinciple, you can use the full Unicode character reportoire in HTML. Unicode Technical Report #25, UnicodeSupport for Mathematics, says: “Starting with version 3.2, Unicode includes virtually all of the standard charac-ters used in mathematics.”

Limitaons in browsers and fonts

Previously, browser support had serious laws when it comes to special characters. The most fundamental prob-lems have almost completely disappeared. But the very important practical limitations in fonts exist.

The problems and solutions are discussed in Guide to using special characters in HTML. The document isnewer than the presentation in this document and covers some topics not discussed here.

Support to mathematical characters in fonts varies greatly. Some typical examples:

Unicode Status in fonts

± U+00B1 plus-minus sign Practically universal support ≤ U+2264 less-than or equal to Very good support ∰ U+2230 volume integral Limited, but works for most users U+1D44E mathematical italic small a rather limited support; use a instead

In practice, all or most of the mathematical symbols you need are covered by the Lucida Sans Unicode font,

which is normally present in Windows systems. It is not of particularly good design, so you might suggest ArialUnicode MS (shipped with Microsoft Ofice) as a preferred alternative. Moreover, you should include a list of fonts that are commonly available on other platforms (Linux etc.).

For pages that make essential use of mathematical characters that are not covered by fonts normally in use on


23 22/12/2015 13:05


7/23

Windows platforms, it might be a good idea to include a short note about fonts. Perhaps with a few selected char-acters and with an explanation of what they should look like and a remark: “There are free fonts that containthese characters, such as DejaVu Serif, Quivira, and Symbola.”

Methods of entering special characters

You can enter special characters as such (if the character encoding permits that), or using “escape notations”. Forexample, the Greek letter alpha can be written in HTML source as such (α), as the entity reference α, as thehexadecimal character reference b1;, or as the decimal character reference α. These methods are

equivalent in principle, and they all work on any reasonably modern browser.

HTML 4.0 contains a relatively large set of named entities like α for various symbols, including Greek let-ters as used in mathematics. They are nicely presented in WDG’s document HTML 4.0 Entities. (There’s also amore compactly presented list by me: Character entity references in HTML 4.0.) However, they are just “namedconstants”, with deinitions that use numeric character references. Some early browsers (e.g. Netscape 4) sup-ported them but not the named entities. Today, this is no longer relevant, but there’s not much practical reason touse the entities. Although the entity names are intended to be mnemonic, some of them are rather cryptic; using∑ for the n-ary summation symbol would probably work well (in the above-mentioned sense), but howmany readers would intuitively understand what ∋ means? Note: If the entity is followed by a space or a linebreak, the semicolon can be omitted, thereby making the notation look slightly more natural. Technically, the

semicolon can be omitted if the character immediately following it is not a letter (A–Z, a–z) or a digit or one of the following: - . _ : ; (hyphen, period, underline, colon, semicolon).

HTML5 drafts contain a long list of added entities. They are mostly rather cryptic and practically useless, though browser support

was introduced to Firefox near the end of year 2011.

Note that by HTML speciications, you are not limited to using those numeric character references for whichthere is a named entity in HTML 4.0. You can principle use any number ; notation where number is the Unicodecode position to which a character has been assigned.

As a practical point, note that Microsoft has deined WGL4 (or “Pan-European”) list of characters, containingsome mathematical symbols too. If you use them only, you have relatively good odds of inding a large number of

users equipped with fonts that can display the characters. See Using Special Characters from Windows Glyph List 4(WGL4) in HTML by Alan Wood.

See also the document How to ind an number; notation for a character , and note that you will probably be in-terested especially on the following Unicode blocks:

Mathematical Operators, e.g. ∀ ∂ ∆ ∞ ∮ ≈ ⊥

Letterlike Symbols, e.g. ℕ ℵ ℋ ℧

Arrows, e.g. ←⇒

If you only need Greek letters in addition to Ascii characters, then there is the possibility of using an encoding which lets you enter

Greek letters directly. You could use ISO 8859-7, which is relatively widely supported. See section Simpler ways for simpler needs: sim-

ple 8-bit encodings in the above-mentioned document. But note this would give you just Greek letters, not e.g. not equals sign, nablaoperator, aleph, etc. ad ∞. Moreover, you would risk losing most of the upper half of ISO Latin 1, due to browser bugs.

Pialls: relying on appearance

There are pitfalls in the area of characters. Never trust a smiling cat, or what a character looks like. For example,in modern character set standards, the mathematical symbol for n-ary summation (∑, ∑) is distinct fromGreek letter capital sigma (Σ, Σ), although it is historically derived from it. Ditto for n-ary product symbol(∏, ∏) and capital pi (Π, Π). I used to think that someone might still consider using sigma as a sur-rogate, assuming it might be better supported, but Andreas Prilop kindly pointed out my mistake, concludingwith the following: “you need only a browser that knows ‘Unicode big numbers expressions’ and Windows 3.1[or newer] or any MacOS version, both without any Greek support, to display ∏”.

Problems of poor rendering

Another pitfall is that character rendering may vary greatly across browsers. For example, the simple rightwardsarrow character, which can be denoted e.g. as → in HTML, has very varying shapes, as you can see by usingtest page for rightwards arrow. The variation ranges from an almost dash-like symbol (with just a tiny arrow-


23 22/12/2015 13:05


8/23

head) to a grotesque version where the arrowhead dominates (e.g., “” in Calibri). Moreover, some common fontslike Verdana lack it, so in text with Verdana as the primary font, the arrows will appear in whatever font thebrowser chooses to use as a replacement font. Therefore, it may be a good idea to suggest a speciic, widely avail-able font where the appearance is acceptable. You can write e.g.→in HTML and.arrow { font-family: "Times New Roman"; }in CSS. In Times New Roman, the arrow (→) corresponds to the arrow symbol traditionally used in mathematics,

and it can be used in conjunction with many different fonts.

If the vertical position of the arrow is unsatisfactory, as it may be when used between capital letters of the Arialfont ( A → B), you can tune the rendering ( A B), by adding e.g. the CSS rule.arrow { position: relative; bottom: 0.07em; }.

The division slash character (U+2215), being deined as a mathematical operator, is in principle more adequatethan the common slash character. It belongs to rather many fonts. But the problem is that the appearance in gen-erally unsuitable. Its glyph usually touches the adjacent characters or even strikes through them. Here is an ex-pression using irst the common slash, then the division slash:

a/b

a ∕ b

Double-struck leers vs. bold leers

Double-struck letters such asℕ, ℤ, ℚ, ℝ, ℂ are commonly used as symbols of standard sets of numbers in mathe-matics. Such letters are contained in Unicode, in the Letterlike Symbols block, but their browser support is lim-ited.

It has long been acceptable to use normal letters in bold face instead. This appears to be even the original nota-tion, and it is preferred in the international standard on mathematical notations, ISO 80000-2 (approved in2009).

Thus, it is better to use just bold face letters such as N. You can achieve this simply by using the b element inHTML, e.g. N.

Similarly, even though Unicode contains characters like “mathematical bold italic small a” (U+1D482), it is muchsafer to use normal letters and simple markup, such as a


9/23

cautions are taken by using nobr markup.

Since notations like /\ or ---> try to imitate the shape of the real characters they stand for, it can be useful to sug-gest some particular font, or a list of fonts in order of precedence, using the font face markup in HTML or thefont-family property in CSS. I have written a test page that shows text in different fonts which are commonlyavailable in Windows systems. For example, --> looks odd when Arial font is used, but --> in Tahoma looks prettymuch like an arrow.

In practice, you could use a style sheet like the following:.logop { font-family: "Times New Roman", serif }.arrow { font-family: Tahoma, Symbol, monospace }.darrow { font-family: "Times New Roman", serif }

and HTML markup like the following:

/\-->==>

This is how they look like on your current browser: /\ --> ==>

Line breaks as problems

Line breaks are often undesirable inside expressions, but Web browsers generally treat every space as a potential line break position. There are several ways to deal with this:

Using the no-break space character (presentable using ) instead of a normal space.

Using the nonstandard but rather widely supported nobr markup around a string that should be kept to-gether. Example: a + b + c.

Using the nowrap attribute in a td (or th) element. This is useful if it’s OK to prevent all line breaks inside atable cell (except line breaks explicitly requested using br tags).

Using white-space:nowrap (or maybe white-space:pre) in CSS. Typically this means that you would use some-thing like the following:in HTML: 42 mand in CSS: .q { white-space: nowrap; }

It is debatable whether it is more logical to use the CSS way than no-break spaces. In a sense, it is a structuralproperty of an expression like “42 m” that its two parts belong closely together, so that in any normal presenta-tion, there should be no line break between them, or any pause in speech presentation. On the practical side,no-break spaces surely work more reliably, partly because browser support for the white-space is still limited,partly due to general CSS caveats.

Note that the nobr markup is the only sure cure against IE’s tendency to treat every hyphen as a potential linebreak opportunity, even in a string like a-b or -a! But if you have decided to use “special characters”, then youmight use the real minus sign, −, instead of hyphen, and that would avoid the hyphen problem. See Dashesand hyphens.

There are even more oddities in IE: it may also treat any of -()[]{}«»%°·\ as indicating a potential linebreak position (before or after, depending on the character). Thus, it may well split “ f ( x )” to “ f ” on one line and“( x )” on the next! The nobr element is the most effective cure, as explained in Word division in IE , but we will dis-cuss a special case later.

Grouping digits and using “thinner spaces”

The problem with separatorsIt is customary and recommendable to group digits in long numbers to groups of three digits. But the method of separating the groups depend on cultural conventions and even personal style. This typically means using spa-ces, commas, periods, or apostrophes as separators.


23 22/12/2015 13:05


10/23

It is safest to use spaces, since the other alternatives could be misinterpreted. For example, in English 1,005would mean one thousand and ive and 1.005 would mean one and ive thousandths; in French, and in severalother languages, it’s just the reverse! We need to make some decision concerning the decimal separator, but forintegers we can avoid the problem by using spaces: 1 005 is unambiguous. It is true that e.g. in English texts it does not conform to normal English practice, but here we are discussing mathematical texts, where the practiceis recommended by standards,

This raises two problems: First, the line breaking problem that we just discussed; but we saw that there are rea-

sonable solutions to it. Second, you might regard spacing between digit groups as typographically excessive, if normal spacing (as between words) is used.

Affecng the width of spacing

Although there are several space characters of speciic width in Unicode (in the range U+2000 to U+200B in theGeneral Punctuation block), using them is not a good idea, as a rule. In practice, they don’t work well, partly dueto limitations in browser support for such “special characters” (to be discussed in the next section). And in prin-ciple, they are “compatibility characters” only.

But you can use normal space characters and specify some simple CSS rules that suggest reduced spacing be-tween “words”, using the word-spacing property with a negative value. That property speciies the spacing to beused in addition to default inter-word spacing, so a negative value suggests a reduction of the spacing. A “word” ishere any sequence of non-whitespace characters. The boring part of the matter is that you typically need to in-clude extra span markup just to have some element with which the rule can be associated. You can hopefully indsome nice program tool for generating the markup needed, so that you don’t need to type it all by hand.

In my opinion, word-spacing: -0.07em creates a fairly nice result for spacing between digit groups. It means asuggestion to reduce the normal spacing by 7% of the font size, so it naturally adapts to whatever font size hap-pens to be in use. This seems to make the digit groups separated visibly but not disturbingly. The followingdemonstrates irst a long number without the effect of such a suggestion, then with that effect, naturally assum-ing that your browser supports this part of the CSS speciication:

123 456 789 000 000 000

123 456 789 000 000 000

For the latter number, I used the following markup:123 456 789 000 000 000and the following style sheet:.number { word-spacing: -0.07em; white-space: nowrap; }The white-space rule is unrelated to spacing but a good idea for other reasons, as explained above.

For related notes, discussing similar problems in text processing, see How to cope with international standards for the thousands sep-

arator by William S. Statler.

Spacing in expressions

The “excessive spacing” problem also arises in other contexts in mathematical expressions. It is often regarded asgood style to use some spacing e.g. around mathematical operators, but not as big spacing as we get in typicalbrowsing situations if we just use normal spaces.

In high-quality typesetting, e.g. when using T X, spacing is controlled carefully, using advanced tools and tech-niques. We cannot expect to achieve the same using HTML and CSS, but we can aim at reasonable quality.

An expression like “a + b” is usually best written in HTML so that there are spaces around the operator “+”. Thisgives more lexibility, since we can then use word-spacing in a simple way. If the spaces were omitted, letter-spacing (which actually affects the spacing between all characters, not just letters) could be used in simple caseslike this, but things would get much more complicated when variables consist of several characters (e.g., contain

subscripts).The following example shows the rendering of an expression with several operators, under different style sheets:

unstyled with spaces a + (b × c)

E


f 23 22/12/2015 13:05


11/23

word-spacing:-0.07em a + (b × c)word-spacing:-0.2em a + (b × c)unstyled without spaces a+(b×c)

Thus, a word-spacing value like -0.07em creates an appearance that more or less resembles typical typesetting of mathematical expressions. A value of -0.2em tends to reduce spacing so that it almost corresponds to the render-ing we would get if no space characters were used. The effects naturally depend on the font in use, but these ob-servations apply to typical fonts like Times New Roman and Arial.

Using fonts

Say No to font kludges

In the old days, one of the most common ways of trying to include Greek letters and mathematical symbols intoWeb pages was to use font face="Symbol", such as writing c to get the Greek lettergamma (γ). You may still ind web pages that propagate such usage as if were clever and useful. I will not explainhere why that approach is fundamentally wrong; I refer to the excellent presentations Using FONT FACE to extend repertoire? by Alan J. Flavell and considered harmful at the Alis Babel site. Briely, the trick appearsto work in many situations, but that’s because of browser bugs. The invariable meaning of c is the letter c, so any correctly behaving browser will display it using some physical presentation(glyph) for that character.

Useful font markup

There are several reasonable uses for font-level markup that could be applied in mathematical notations. In par-ticular:

You could use the b markup for symbols of vectors to make them appear in bold face. But consider it as a pre-sentational suggestion only, making sure that the text itself indicates the meanings of symbols, and consider-ing bolding just as extra clue.

Similarly, you could use i or var markup for variables and other symbols which are conventionally displayedin italics, as in f ( x ) or sin x . The var markup may sound more logical for variables, but it’s questionablewhether var was meant for mathematical variables; its original deinition (in HTML 2.0) says that it “indicates

a placeholder variable”. IE 3 oddly displayed var in monospace font, but current browsers use italics. See be-low for problems that italics may cause. Note: the constant e (= 2.718…) and and the imaginary unit i are of-ten written in italics, but according to the ISO 80000-2 standard, they shall be written in upright style.

You can combine those elements to present vector variables: x, which displays as follows onyour browser: x

You might wish to change font size for some characters. The simplest way is to use the small and big ele-ments. But note that if you use sub and sup for subscripts or superscripts, the characters will by default besmaller than normal, on many browsers (but not all), so further size reduction may easily make the text un-readable. But if you like, you could e.g. make digits after a decimal point appear in smaller font (as in 42 .123 –consider then putting the decimal point too inside the small markup). If you wish to emphasize a formula

like E = mc², you can use big markup or the font-size property in CSS, in addition to the logical em or strong

markup (commonly rendered in italics and in bold, respectively, by default).

Italic may cause spacing problems

Browsers often tend to put characters too close to each other when a character in italics is immediately followedby a non-italics character, as in f (0). This is more or less an inherent problem with fonts rather than a browser is-sue. In italic, letters are usually slanted, and this often makes a tall letter hit the next character, if it is upright andtall. For example, |a| may look reasonable, but |T | probably looks bad without stylistic tuning.

You might consider using a no-break space character between them, e.g. f (0), using markup likef (0). As a side effect, this trick seems to prevent an undesired line break before “(” on IE. But thisis really an ugly trick, and it might result in poor appearance on a browser which behaves more reasonably by

default, leaving enough space, so that the trick would make the spacing excessive.

Perhaps the best way to deal with the italics issue is to use CSS to add some empty space after any element ren-dered in italics. You could use either margin or padding property for this. Using padding is probably better, sincesome day someone might set a background color for the element. (The background extends to the padding but


f 23 22/12/2015 13:05


12/23

serif sans-serif

× x × xU ∪ U ∪ε ∈ ε ∈a a a ao o o o

Font demo

not to the margin.) If you need the spacing just for an individual expression, you could use markup like f(0) for an expression like f (0). Or you might even write a general style sheet rulethat sets a right margin for all inline elements that are commonly rendered in italics. You might explicitly set right margin to zero, since it is imaginable that some browsers deal with the problem by using some default right margin, and you don't want a cumulated effect. Example:i, em, cite, dfn, var { padding-right: 0.15em; margin-right: 0; }

Prefer serif fonts

Fonts with serifs are usually better than sans-serif fonts for mathematical texts. This maysound strange, because mathematical operators, like the multiplication sign ×, typically haveno serifs. They have rather similar design in all fonts. But there is usually a considerable dif-ference between serif and sans-serif design for letters.

It is important to distinguish mathematical symbols from each other and from letters andother characters. The serifs and the varying stroke width in serif fonts often help this. More-over, serif fonts typically make a better distinction between upright and italic style.

This usually rules out Arial, the most commonly used font on web pages. In most browsers, the default font isTimes New Roman, which is a good serif font for printed matter but problematic on screen due to the muchsmaller resolution. Suitable serif fonts that work both on screen and on paper include Cambria, Georgia, PalatinoLinotype, and Bookman Old Style. Just remember to list down a few of them in your font-family, in order of yourpreference, since none of them them is universally installed on computers.

Hint: after writing a CSS rule likebody { font-family: Cambria, Georgia, Palatino Linotype, Bookman Old Style, serif; }use Firefox with Web Developer Extension to view your page, then select “Edit CSS” in its “CSS” menu. Modify thestyle sheet by removing the irst font in the list, look at the page, remove the next font, etc. This way you canquickly test the page on all the fonts you suggest, without editing the page itself.

Changing fonts

In good typography, we avoid mixing fonts in text. We can use normal, italic, and bold versions of a font, but not

fonts of different design in the same paragraph or other block of text. However, in mathematical texts, it is oftenmore or less necessary to mix fonts, taking letters and other common characters from one font and mathematicalsymbols from another.

The main reason is that most fonts have a limited character repertoire, as described in section Using special char-acters. When you need to pick up special characters, you cannot be too picky. In particular, a large number of mathematical symbols can be found in commonly available sans-serif fonts like Lucida Sans Unicode and ArialUnicode MS but not in common serif fonts.

For example, the nabla operator ∇ (U+2207) is present in several fonts, but not in any serif font commonly avail-able on Windows systems. Thus, to write the expression∇ f you should use markup like

∇

ftogether with a CSS rule like the following:.nabla { font-family: Arial Unicode MS, DejaVu Serif, Linux Libertine, Lucida Sans Unicode; }

Parentheses

While it has been conventional to some extent to use different characters for nested parentheses, using ( ), [ ], { },and then angle brackets, such practice is not endorsed by standards. Quoting ISO 80000-2:

It is recommended to use only parentheses for grouping, since brackets and braces often have a speciicmeaning in particular ields. Parentheses can be nested without ambiguity.

Thus, angle brackets should only be used in specialized meanings, such as L² inner product of functions, or

maybe for an arithmetic mean if the primary notation (line over) is not applicable. Instead of usage like [(a +b)/c]², normal parentheses should be used: ((a + b)/c)².

If angle brackets are used in math, then they should, according to the standard, be MATHEMATICAL LEFT ANGLEBRACKET U+27E8 and MATHEMATICAL RIGHT ANGLE BRACKET U+27E9. The HTML entities 〈 and 〉


f 23 22/12/2015 13:05


13/23

denote other characters, U+2329 and U+232A. While they “work” more often than the correct characters, “work-ing” here means just getting displayed in some odd font.

It is not appropriate to use the less than sign () as angle brackets. In mathematicaltexts, their usage should be limited to the relational meanings (though the relation could of course be other thanthe common ordering relation). It should never be a matter of glyph preference which character you use, thoughin this imperfect world, violations of this principle are sometimes understandable and foregiveable.

The Unicode standard says that the use of U+2329 and U+0232A as mathematical brackets is “strongly discour-aged, because of their canonical equivalence to CJK angle brackets. This canonical equivalence is likely to result in unintended spacing problems if these characters are used in mathematical formulae.” In practice, when youuse these characters, they will most probably be picked up from a font designed for Chinese-Japanese-Korean(CJK) “ideographs”, therefore designed to it into a largish square, typically causing typographic mismatch. On theother hand, font support to the correct mathematical angle brackets is still rather limited, so avoid them unlessthe contents absolutely needs them.

There’s a special of oddity with the entity references for angle brackets. Even though HTML speciications clearlydeine 〈 and 〉 as 〈 and 〉, i.e. as denoting U+2329 and U+232A, most browsers treat them as denoting U+27E8 and U+27E9. Strangely enough, in this issue, IE seems to be the only browser that works by the speciications. HTML5 drafts have silently changed the meanings of 〈 and 〉 to corre-

spond to the behavior of most browsers. Conclusion: Avoid entity references. By using character references, youwill at least know which character will be used, even though you still have all the font problems.

Fracons

Simple linearized notaon

For fractions like 6/7, the common linearized notation is usually the best, especially within running text. It is not typographically good, but it is robust, and people are accustomed to such simple presentations of fractions onweb pages.

Two-dimensional style

In two-dimensional display formulas, even fractions can be shown using a horizontal line, with a number aboveand below it, but inside text, it’s hardly feasible—the numbers would need to be such a small size that legibilitywould be poor. The following line illustrates an attempt at such presentation, with various compromises and rel-atively complicated HTML and CSS, and therefore with some fragility:

Is or ⅓ better?

Fracon characters

If the only fractions in your document are vulgar fractions ½ ¼ ¾, you might consider using the ISO Latin 1 char-acters for them, e.g. as entity references ½, ¼, ¾. But if you need other fractions too, this isnot a good idea, since it would be odd if different fractions had essentially different appearances.

In Unicode there are a few more fraction characters (namely for 1/3, 2/3, 1/5, 2/5, 3/5, 4/5, 1/6, 5/6, 1/8, 3/8,5/8, 7/8), in the Number Forms block, but it would still be a limited repertoire. Moreover, although they are cov-ered by many fonts, the font support is far from universal. The newest fraction characters, namely those for 1/7,1/9, 1/10, and 0/3, have very limited font support (only a few fonts, none of which is shipped with any operatingsystem or popular software).

Construcng a fracon

You might use a linear notation with sup markup for the numerator and the sub markup for the denominator.The main problem is then that an expression like / tends to cause uneven line spacing, due to the poor qualityof implementation of superscript and subscript style in most browsers. It is therefore better to use CSS to reduce

font size and change vertical position.You might also consider using the fraction slash (U+2044) character which should, according to the Unicodestandard, solve the problem for numeric fractions in an elegant way. That would mean something like5&x#2044;8 in HTML. The fraction slash character is often more slanted than the normal slash (solidus) charac-

13

58


f 23 22/12/2015 13:05


14/23

ter. This is intended to correspond to special rendering where the numbers around it are in reduced size and ver-tically positioned in a manner that relects a traditional way of writing fractions. But browsers do not currentlydo such things, and this may result in unsatisfactory rendering: the fraction slash appears between normallystyled numbers (⁄), possibly touching them, depending on font (e.g., in Arial, ⁵⁄ looks bad. Although this couldbe alleviated by setting letter-spacing, it’s more natural to try to imitate the traditional fraction appearance, us-ing CSS.

Using OpenType features

Some fonts (currently, mostly the so-called Microsoft C fonts like Cambria) contain information for constructingfractions using special shapes and positioning of digits and the slash. Using so-called OpenType features, suchconstruction can be asked for.

On web pages, contain superscript variants of glyphs, typically for digits, lowercase letters a–z, and a few opera-tors. it has become possible to utilize OpenType features using the CSS property font-feature-settings. Browsersupport is becoming more widespread.

Using this approach, the fraction is written in simple linear notation but wrapped in an element for which theOpenType feature "frac" is requested for.

OpenType also deines the feature "afrc" for alternative fraction format (typically, with horizontal line, not sloped

fraction slash). It is however supported in even fewer fonts than "frac".

Using MathJax

It is easy to create fractions using MathJax, with the \frac command. However, it creates a fraction with numera-tor and denominator stacked, with horizontal line between them. Such a presentation is usually OK in displayformulas, but less so in text. About tuning, see the Q/A pages LaTeX force slash fraction notation and How do I typeset arbitrary fractions like the standard symbol for .5 = ½?

MathML

In MathML, a fraction can be described as a special case of a fractional expression, using the mfrac element. The

code is verbose, but a more serious problem is that not all browsers support MathML, especially when embed-ded in an HTML document. On non-supporting browsers, the code degrades to a rendering like “5 8” instead of “5/8”.

Summary

To demonstrate what the different approaches yield on your current browser with its current settings, here is atable 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

⅝ ⅝ text

sup and sub 5/8 / text

Fraction slash 5⁄8 ⁄ text

Fraction slash

and CSS

5⁄8

⁄ text

OpenType

"frac"

5/8 ⁄ text

MathJax $\frac{5}{8}$ text MathML 5 8

text

58

5 8


f 23 22/12/2015 13:05


15/23

The style sheet used is the following:

.num, .denom { font-size: 70%; }

.num { position: relative; bottom: 0.5ex; left: 0.2em; }

.denom { position: relative; left: -0.05em; }

.ofrac {-moz-font-feature-settings: "frac";-webkit-font-feature-settings: "frac";

-ms-font-feature-settings: "frac";font-feature-settings: "frac";}

There can be line breaking problems with the “/” character as well as the fraction slash, though currently on minority browsers only.

To stay on the safe side, you could use markup like 5/6 for fractions and use the style sheet rule .frac {

white-space: nowrap; }.

Underlines, overlines

Underlining

To underline something, you could use the u element in HTML. However, underlining is widely taken as indicat-

ing a link on the Web. Links want to be links, and you should avoid doing anything that might make somethinglook like a link if it isn’t. But if underlining a symbol is part of an established tradition in some ield, go ahead anduse the u element. It would be less logical to use the CSS declaration text-decoration: underline, since here un-derlining is not just a suggestion on rendering style but an essential feature of content.

As an alternative, you could use the combining low line character (U+0332) after the symbol to be underlined.However, this character appears in a few fonts only and does not necessarily produce any better rendering. Asimple test (with an underlined character and a symbol with combining low line): x , x̲.

Overlining

It is common to use overlining in mathematics, e.g. to indicate an average. Somewhat illogically, HTML has no

markup for overline. In a style sheet you could suggest overlining, using the declaration text-decoration: overline.However, as the property name says, it’s assumed to be decoration, not part of the content proper, and in anycase style sheets are for suggestions only; you should expect style sheets to get ignored fairly often. Presentation-ally, note that the overline appears rather high above the symbol.

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. For casual overlining a single symbol, you could use an embedded stylesheet as follows:x.

If overlining is essential, consider using the combining overline character (U+0305) after the symbol to be over-lined. There are risks with fonts, but in most browsing situations, this method works. The rendering varies but is

generally much better than in the CSS methods, as the overline is close to the letter. A simple test, irst with aCSS-overlined letter, then a letter with combining overline: x , x̅.

Radicals

For radicals (expressions of roots), it is customary in typeset mathematics to use a vinculum it more evident what belongs “under the root”. The vinculum is a horizontal line that joins with the radical sign, and the joining isdificult to arrange without using specialized software that draws math expressions.

You might consider the following options:

Use fractı́onal powers instead, e.g. (a² + b²) . This is even the recommended way according to the ISO

80000-2 standard.Use just the radical sign with no vinculum, using parentheses if needed, e.g. √(a² + b²). This is recommendedin The Oxford Style Manual (clause 12.6.2).

You might suggest overlining to make to produce a sort of vinculum:

1/2


f 23 22/12/2015 13:05


16/23

√(a² + b²)

This uses simple markup where the expression in parentheses is enclosed between and .

In this context, the relatively high vertical placement of the overline does not disturb. It is even desirable, andperhaps an even higher placement would be desirable. Things may get distorted on many browsers if there areexponents written using sup under the root.

In our example, the parentheses are redundant when overlining is applied. I have experimented with tricks which would put theparentheses inside span elements with style sheets suggesting the suppression (display:none) of them in presentation.

Instead of text-decoration: overline, you might set a top border for the radicand, e.g. .radic { border-top: solid1px }. This seems to produce reasonable presentation even when there are exponents and subscripts (sup andsub elements) in the radicand, as the following example illustrates:

d = √( x − x )² + ( y − y )²

What about roots other than the square root? There are Unicode characters for the cubic root and fourth root symbol, though they are less widely supported than the square root symbol. For a general root, you might put theradical index right before the radical symbol, in superscript style. Besides, you could use CSS to suggest reduced

spacing between those characters. This would mean HTML markup like the following:n√x

with CSS like the following:.radic {letter-spacing:-0.15em; }.radicand {text-decoration:overline; }This looks like the following in your current browsing situation: √ x .

Arrays and tabulaons

HTML tables are intended for presenting data which is tabular. We will not discuss here the tabulation of nu-meric data in general, since the basic HTML constructs are simple and the ine tuning, using attributes in HTML

markup and/or style sheets, is beyond our scope. But it needs to be noted that numeric data should normally beright-aligned, which is not the default alignment in HTML tables, so you often need the align="right" attribute (intd or tr elements). It would often be desirable to align numeric data on the decimal point, but this is in practicenot possible in the way deined in the HTML 4.0 speciication. Instead, some tricks are needed, such as using amonospace 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.

For a matrix, the conventional notation in mathematics is to use large parentheses around. This would be ratherdificult in HTML and would work well for very small matrices only (cf. to methods discussed in the Towardstwo-dimensionality section below). It’s probably best to use a different presentation which makes matrices havean appearance which is suitably distinctive, such as a special but not too striking background color for cells. Youmight write, say, for any table which presents a matrix, and include a style sheet rule like

table.matrix td { background: #fda none; color:#000; }This results in something like the following on your browser (when a cell spacing of 4 pixels and centering of cellcontents has been suggested too):

A = x - y -a 42

c a*b c

In the example above, the table representing a matrix has been embedded into an outer table so that we havebeen able to associate a symbol with the table. Similar techniques can be used e.g. when you wish to present thesum of tables; you would write an outer one-row table which contains the matrices in its cells and a plus sign in acell of its own between them. The following example illustrates this:

1 5

3 7 +

2 2

2 2 =

3 7

5 9

2 1 2 1

n


f 23 22/12/2015 13:05


17/23

Subscripts, superscripts, and exponents

Alternave methods for displaying superscripts

A superscript can be presented in an HTML document in several ways:

The simplest way is to use sup markup. It has essential problems in typographic quality, however. Browsersimplement it using reduced-size font in a raised position, causing too small stroke width and too large size, aswell as uneven line spacing.

Using CSS, the amount of font size reduction as well as vertical placement can be controlled in detail. Thisdoes not remove the fundamental typographic problem, though.

Some superscript characters such as superscript 2 exist as separately coded (e.g., ²). They are normally of good typographic quality, since the glyphs have been designed by a typographer to it the design of the font.This approach is limited to small number of characters.

Using techniques like MathJax, with expressions like you can achieve typesetting quality in principle. In prac-tice, the results vary.

Some fonts (currently, mostly the so-called Microsoft C fonts like Cambria) contain superscript variants of glyphs, typically for digits, lowercase letters a–z, and a few operators. It has become possible to utilize suchvariants using the CSS property font-feature-settings. Browser support is becoming more widespread.

The following table illustrates the approaches. The last may show just normal characters instead of superscripts,if your computer lacks the Cambria font or your browser does not support access to superscript variants at thefont level.

a2, e x sup markup

a , e Styling with position: relative; bottom: 1ex; font-size: 70%

a² Superscript characterMathJax $a^2, e^x$

a², e Superscript glyphs, with font-feature-settings: "sups"

2 x

For subscripts, the situation is rather similar. However, there is a more limited set of subscript characters thansuperscript characters.

HTML markup for subscripts and superscripts: Style or essence?

The HTML language has the sub and sup elements for subscripts and superscripts. But they should primarily be

regarded as stylistic suggestions only, rather than as essential parts of the notation. (See my notes on the intendeduse of sub and sup.) Naturally they can be valuable for “styling” math, too. To quote the descriptions of sub andsup in WDG’s HTML 4.0 Reference, replacing their markup examples with their appearance on your browser:

Since SUB is inherently presentational, it should not be relied upon to express a given meaning. However, it can be useful for chemical formulas and mathematical indices, where the subscript presentation is helpfulbut not required. For example:

Chemical formulas include H O (water) and C H NO (methadone).

Let x = x + x + ... + x .

Since SUP is inherently presentational, it should not be relied upon to express a given meaning. However, it

can be useful for mathematical exponents where the context implies the meaning of the exponent, as well asother cases where superscript presentation is helpful but not required. For example:

The rent is due on the 1 of each month.

An example of a quadratic polynomial is 3 x + 5 x - 7.

2 21 27

1 2 n

st

2


f 23 22/12/2015 13:05


18/23

However, especially when superscripting is used to express exponentiation, superscripting is essential , and thereneed not be any contextual hints. It really makes a difference if 10 , which is intended to mean 10 to the power 9,actually gets displayed as 109. The same applies to using superscripts e.g. in denoting the transpose of A by A(i.e., A immediately followed by T in superscript style).

Superscripts are often used for footnote references in print media. But in mathematical texts, such practice isbest avoided in order to remove any risk of confusing such usage with exponentiation or other mathematical su-perscripting. Besides, such footnote references don’t work well on Web pages in general, as explained in the doc-

ument Footnotes (or endnotes) on Web pages.

Superscripts and subscripts as two-dimensionality

Two-dimensionality in formulas will be discussed later, but here we mention some possibility of using super-scripts and subscripts to simulate notations that should really be written above and below a symbol. The follow-ing example (which also uses special characters) shows the markup for an ininite sum and the resulting appear-ance on your browser.

∑i=0∞xi

∑ x

That means summation of x (with i as subscript) from i=0 to ininity. In browsing situations where the ininitysymbol is correctly displayed, the main problem on most browsers is that the ininity symbol does not appearabove i=0 but to the right of it (in superscript style though). In the worst case, the reader might misunderstandthe upper limit as an exponent of the lower limit! So it is perhaps better not to use a superscript at all but put thelimits into a subscript, e.g. as i=0,…,∞ (which makes use of the horizontal ellipsis character; midline horizontalellipsis would be better, but it’s less widely supported) giving the following appearance: ∑ x .

The ininity symbol ∞ might appear in fairly small size. In general, special symbols easily become unreadable when font size is re-

duced, so you might consider setting the font size larger than normal. In the above example with HTML markup for a formula and the

formula itself side by side, the font size for the formula has been set to 125%.

The presentation of a summation expression could be tuned in different ways, some of which will be discussed in

the sequel. But generally they lead to rather complicated constructs, and the complexity may cause problems ondifferent browsers, current and future. However, some simple superscript positioning problems can be addressedrelatively easily. Let us take the example of just positioning a simple one-character superscript above a one-char-acter subscript.

In chemistry, sometimes both subscripts and superscripts are used, for example in formulas for ions. Considerthe formulaNO3−where letter O has both subscript “3” and superscript “–”. The latter is the minus sign, and the Ascii hyphen is aparticularly poor surrogate here due to its shortness; such problems were discussed in the section on specialcharacters. It seems that the stylistically preferred notation for ions has the superscript in the same horizontalposition as the subscript. See, for example, the Ions page in Eric Weisstein’s World of Chemistry , which uses im-

ages to create such appearance.

The markup mentioned above by default creates an appearance where the superscript is on the right of the sub-script (O ). Changing the order of the superscript and subscript would not help much. But we can try to affect the horizontal placement by using a negative margin. Since, in general, the notation for an ion always has a su-perscript and may or may not have a subscript, it seems practical to put the sup element irst and move the sub-script to the left. This would mean markup likeNO−3(or maybe with div instead of span) and a style sheet like the following:.ions { line-height: 1.8; }.ions sub { margin-left: -1ex; }

and it would result in the following on your browser: O−3.

Creating good appearance for variables with both a subscript and a superscript is rather challenging: ine-tuningis needed, and the rendering will still greatly depend on the font used. Beware that widths of characters vary byfont, so a horizontal shift created by margin-left or some other method might be adequate for some fonts and

9

T

i=0∞

i

i

i=0,…,∞ i

3−


f 23 22/12/2015 13:05


19/23

poor for others. Moreover, it cannot as such be used in conjunction with the method of making line spacing eventhat will be described later in this document.

The margin-left property effectively shifts the subscript to the left. The line-height property is useful for defeat-ing some IE bugs – and fairly natural, since you are using quite some height here, more than we can expect to beavailable by default. Note that if an element in class ions contains a lone superscript, you would need to take ex-tra measures, since the CSS code above postulates that a sup element appears immediately after a sub element.

From the HTML perspective, the basic problem in situations like this in that the sub and sup elements have beendeined in a rather presentation-oriented manner rather than structurally. When you write i, you'resaying that “i” is a subscript but not what it is associated with. In a case like “a ”, “i” is a subscript for “a” whereas“2” is a superscript (exponent) for the expression consisting of “a” with subscript “i”. There is no way to expressthis structural relationship in HTML. Using extra parentheses, like “(a ) ”, deviates from common mathematicalnotations and looks somewhat clumsy, but it makes the meaning unambiguous and clear.

Uneven line spacing

As you may have noticed on many web pages, subscripts and superscripts tend to mess up line spacing. For ex-ample, a superscript expression like A makes the line have more than normal vertical spacing above it. The rea-son is that subscripts and superscripts may increase the vertical space needed for a line, and browsers quite nat-urally increase height of a line box (making it larger than the value of the line-height property).

The simple solution to this problem is to use a style sheet that positions subscripts and superscripts verticallyusing relative positioning, instead of the vertical-align property. This prevents the effect that makes some lineshigher than others in the same paragraph.

The method is described in more detail in the document How to prevent uneven linespacing when subscripts or superscripts are used on web pages.

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 longstandingbug, with little hope of ixes:

It looks like IE (all versions till IE9) multiplies the font size of the and and their descendantswith some variable coeficient (sth between 0.6 – 0.8 depending on the font-size).

stackoverflow: relative font-size of or and their descendants in IE

Even though it might seem suitable to set the font size to achiever similar sizing across browsers, it has just theopposite effect. If you don’t set it, browsers generally apply a size reduction (by about 80%) fairly consistently.But if you set font-size on sub or sup, IE will interpret it differently from other browsers.

If you really need to set the font size of subscripts or superscripts, you have a few options, like the following:

Use span markup (with class attributes) instead of sub and sup, and set vertical-align and font-size in CSS.

Use sub and sup but use JavaScript to convert them to span elements. Demo page: sup size ix.

Nested superscripts

Most browsers render superscripts properly, or at least tolerably well. But they often fail to handle nested super-scripts (or subscripts) well. And that means that exponentiation in an exponentiation may get lost in graphic pre-sentation, too. For example, some old versions of Internet Explorer render abc thesame way as abc. However, modern browsers, including reasonably new versions of IE, honornested superscripts in rendering, Here is test for your browser: a (the letter c should be a superscript of b).

The preceding paragraph may illustrate the problem that nested superscripts easily cause problems by (almost)

hitting the preceding line. small font. One approach (perhaps observable in this paragraph) is to set the

line-height property (in CSS) to a relatively high value like 1.6. Moreover, it might be a good idea to set line-height globally (for the body element) to a value like 1.3, since this helps with some of the smaller problems

of uneven line spacing and may improve readability in general.

i2

i 2

T

bc


f 23 22/12/2015 13:05


20/23

Avoiding superscript problems

There are various ways to avoid the problems with superscripts by using other notations:

For some superscripts, there are separate characters which correspond to normal characters in superscript style. Except for superscript 2 and superscript 3, which are rather often needed of course, this approachmeans using special characters with limited browser support, so it’s not a very good solution. (Well, it wouldwork ine in a text which needs just things like m² or m³ for square and cubic meter.) Moreover, even by usingthe Unicode block Superscripts and Subscripts you wouldn’t extend the superscript repertoire much: the other

digits and the characters +-()n.Exponentiation is rather often expressed using a surrogate notation which uses an exponentiation operator like ** or ^, as in many programming languages. It depends on the intended audience whether notations like10**9 or 10^9 need to be explained and which of them is better. Assumably non-technical audience guessesthe meaning of 10^9 better, but on the other hand the circumlex character ^ varies in shape and might not suggest the idea of “to the power of” very well.

You might also use function notation such as exp( x ) instead of e , in some cases. For a general power, a nota-tion like power(a,b) could be used, but the author should indicate whether this is the b power of a or the apower of b (since there are different practices on this).

For numbers, you could replace the use of a notation like 42.5 × 10 by a notation like 42.5E9, borrowed fromprogramming languages. This might work reasonably in documents read by people with programming back-ground or acquainted with scientiic calculators.

For physical quantities, you can use SI preixes so that you won’t need an exponential notation for a number.For example, you could replace 42.5 × 10 s by 42.5 µs. This isn’t really a surrogate; rather, it would be a bet-ter notation even if exponents worked without problems.

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?

Equaon numbers

In mathematics, it is common to number equations and put the number on the right of an equation, in parenthe-

ses or brackets, as follows:

(a + b) = a + 2ab + b (42)

e ≈ 1 + x + x /2 + x /6 + x /24 + x /120 + x /720 + x /5040 + x /40320 + x /362880 + x /3628800 (43)

Several approaches have been proposed to achieve such layout using just CSS and no presentational markup.However, the CSS methods (whether based on loating or on positioning) seem to suffer from various problemson current browsers. Some methods work well if the equation its on one line but lead to confusion when it is di-vided over two or more lines. Since we wish to create pages that adapt to varying rendering widths (“luid de-sign”), a simple table is the practical solution:

the equation(number)

If you regard such a table as a deprecated “layout table”, consider its markup, speciically the summary attributeand the use of th (table header cell) element for the equation number, which logically acts as a header for the row(the equation).

You can get rid of the presentational attributes width, align and valign by using corresponding CSS properties. If you like prevent the equation number from appearing in bold, you should either replace (somewhat illogically)

the th element by a td element, or use the font-weight property in CSS. As a whole, this could mean the followingstyle sheet:

.eq { width: 100%; }

.eq th { text-align: right;

x

th th

9

-6

2 2 2

x 2 3 4 5 6 7 8 9 10


f 23 22/12/2015 13:05


21/23

vertical-align: bottom; font-weight: normal; }

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, let us irst assume that we wish to present the expression x divided by a − b in the conventionaltwo-dimensional format. In this trivial case, the linearization x /(a − b) would do just ine, but in more compli-cated cases, two-dimensionality would greatly improve the clarity. Using an image is one possibility, and if thelinearized version isn’t too complicated and you include it as the textual alt ernative, it might work ine. But let’ssee some other possibilities.

Preformaed text for two-dimensionality

One might present the expression as two-dimensional preformatted text and include it using the pre element.This would be rather simple in our trivial case:

x

-----a - b

In more complicated cases, you could use a sort of Ascii art like the following:

b/ f(x)| ------- dx

/ 1 + xa

Several mathematical programs can format expressions that way for you, and you could just cut and paste them.

Note that some markup, such as i for italics, is allowed within pre elements. And you need not be limited to Ascii;you could even use the special characters outside ISO Latin 1, in principle, though with special problems. Exam-ple (where the integral sign may or may not display correctly):

b

f ( x ) ∫ ------- dx 1 + x

a

In any case, the visual quality of this method cannot be very impressive. Moreover, it creates accessibility prob-lems, since it’s gibberish unless seen in the exact preformatted way.

Using tables for two-dimensionality

A table might be used to make an expression appear two-dimensionally. Such an approach could be seen asavoidable “use tables for mere layout”, though in a sense a table construct would relect the structure of data, e.g.in

x

a − b

The only thing that’s really a trick there is the use of a black single-pixel GIF, stretched with the width attribute toa horizontal line. The “table” displays as follows:


f 23 22/12/2015 13:05


22/23

x

a − b

Reasonable appearance might be achieved that way, with perhaps tolerably graceful degradation in text-only me-dia: a simple character cell browser like Lynx would basically display it asxdivided bya - b

which might be understandable. But designing and writing suitable table markup would be rather awkward fornontrivial expressions.

It would be simpler and more natural to have a table with two rows only, using a bottom border for the irst cell.The border would create a suitable horizontal line. However, in text-only presentation and in nonvisual presenta-tion, the data would appear asxa - bwhich can be dificult to interpret. This could be partly addressed by using a summary attribute for the table, e.g..

Let’s see what we could do with the integral above. Using a bit contrived table markup, we might get somethinglike the following:

b

∫ f ( x )

dx

1 + x a

In any simple text presentation, it would look rather awful, though. You might consider providing a separate linkto an alternative presentation, for such reasons.

For a rather common case of a deinition that is most naturally presented in two lines, this approach might worktolerably, for simple deinitions:

δ = 1, if i = j

0, if i ≠ j

Returning to simple examples, let us consider how we might present (a − b)/ x two-dimensionally using stylesheets, speciically the display property in CSS1 (cf. to ideas about removing redundant parentheses above). Wewould start from the simple linear notation (a-b)/x. We would put the parentheses and the slash each inside aspan element containing that character only, and we would also use span for the numerator and denominator.Then, using class names assigned to the span elements, we would suggest in CSS the suppression of the displayof those characters, presenting both the numerator and the denominator as a block, and underlining the numera-tor. This means markup like the following:

(a −b)/x

with the following style sheet:

.lin { display: none; }

.den, .nom { display: block; width:100%; text-align:center }

.nom { text-decoration: underline; }

This is what looks like on your browser:

a − b

ij


f 23 22/12/2015 13:05


23/23

x

And it degrades to (a − b)/ x in non-CSS browsing situations.

We might still add.den { line-height: 0.65; }to reduce the spacing between the line and the denominator, so that the expression would look more natural.The value 0.65 is a compromise. On many browsers, it doesn’t improve things much, and a smaller value like 0.5would be better, in a case where the denominator has just letters with no ascenders. But there is the risk that on

some browsers, a small value chops off the top of the text in the denominator. It gives the following appearanceon your browser:

a − b x

math in html and css

Documents