Formatting Mathematical Articles with Cascading

Style Sheets
George Chavchanidze
Department of Theoretical Physics, A. Razmadze Institute of Mathematics, 1
Aleksidze Street, Tbilisi 0193, Georgia
Abstract. This page shows how to format mathematical articles with
Cascading Style Sheets (CSS). Simple XML 1.0 markup is used to capture
basic structure of math expressions while rendering is specified via CSS
2.0/2.1. Abilities and limitations of present approach are discussed.
Keywords: eXtensible Markup Language, Cascading Style Sheets,
Mathematics in XML
Date: Sun, 10 Oct 2004 (revised version)

1. Introduction
CSS is the simplest way to control formatting of XML and SGML
documents. Today it is mainly used in web design to render and style
(X)HTML documents, but its applications spread far beyond ordinary web
design and one can use XML and CSS to embed mathematical expressions
in web pages. Generally speaking it is easy to control general layout and
style of scientific documents with CSS, the only problem is rendering of
complex mathematical formulæ. So in this article we will mainly focus on
this problem and suggest relatively simple approach for rendering of
mathematical expressions that may appear in scientific papers. We use
simple XML 1.0 markup to capture basic structure of math expressions and
CSS 2.0/2.1 to specify their rendering (see [2]-[4] for specs).

Each mathematical expression may be formatted as inline equation like

z = 1/c or as block level (displayed) equation

z = 1/c (1)

Rendering of inline equations is more specific as one has to care about

height of line box.
2. Indices in display mode
In mathematical expressions indices are probably the most widespread
objects so it is essential to keep corresponding markup as simple as possible,
otherwise compactness and readability of XML source will be seriously
undermined. The simpliest way is to use CSS relative positioning to shift
indices up/downwards. Most of the browsers support relative positioning
and thus can easily process simple indices. Here are some examples of top

dzk = dxk + idyk (2)

ch2(x) − sh2(x) = 1 (3)

ch(3x) = 4ch3(x) − 3ch(x) (4)

Na − e− = Na+ (5)

and lower indices taken from mathematics and chemistry

Tmn = − Tnm (6)

Fe3O4 + 4H2 ? 3Fe + 4H2 (7)

Simple indices may be combined. Subscripts may precede superscripts and

vise versa.

Tmn = εnmkSk (8)

Tmn = εnmkSk (9)

27
+ 2He4 = 15P30 + 0n1 (10)
13Al

Indices may be also positioned one over another in this way

∇mRnikl + ∇lRnimk + ∇kRnilm = 0 (11)

However to archive correct alignment of such an indices one has to put them
in inline table. Here browser compatibility issues show up as some browsers
does not support inline tables. Nesting of simple indices is allowed.

dzk1 = dxk1 + idyk1 (12)

(1) (1) (1) (13)

dzk = dxk + idyk

Tk k = − T k k (14)
1 2 2 1

Tk(1)k(2) = − Tk(2)k(1) (15)

(1) (2) (1)

+ A(2) (16)
eA eA = e A

Xh(F) = LX F (17)
h

5 5 5
∇k1Rkk2k3k4 + ∇k4Rkk2k1k3 + ∇k3Rkk2k4k1 = 0 (18)

∇ŝ Rŝŝ5ŝ ŝ + ∇ŝ Rŝŝ5ŝ ŝ + ∇ŝ Rŝŝ5ŝ ŝ = 0 (19)

1 2 3 4 4 2 1 3 3 2 4 1

So rendering indices with CSS2 is not a big problem. Their rendering can be
controlled in details by both author and user through adjusting relative
positioning offsets, font-size and style in author and user style sheets.

3. Indices in inline mode

Here similar math expression appear inline. Note that relatively positioned
indices should not affect line height Tmn = − Tnm. Alternatively one can shift
indices using CSS vertical-align property used to control vertical alignment.
However, unlike relative positioning, vertical alignment may affect height of
line box. So it is better to use relative positioning εnmkSk. Line breaks inside
equations are prohibited as browsers may generate line break in
inappropriate place (after all, there is no reliable algorithm for handling line
breaks in mathematical equations). Thus the simplest solution is to prohibit
all line breaks inside math expressions εnmkSk (this can be done by setting
CSS 'white-space' property to 'nowrap') and mark those few points where
line breaks are allowed with an element that has CSS 'white-space' property
set to 'auto'. More complex indices ∇mR nikl can be used in inline mode as
well, but again some browsers does not like them. This happens due to weak
5
CSS support in those browsers. One can nest indices as follows ∇k1R kk2k3k4 .
Nested indices are also shifted using relative positioning and thus they
should not change height of line box. Here are another samples of nested
(1) (2)
superscripts eA eA and nested subscripts Xh(F) = LX F.
h

4. Fractions in display mode

Fractions are quite frequent in mathematical articles, so it is preferable to
have simple markup for fractions. Making it too simple results poor
rendering quality so we think that the minimal reasonable approach is to take
two elements, to mark fraction and its rows (numerator/denominator).
Fractions can be formatted as vertically centered inline tables. To reduce
markup anonymous table objects may be exploited. Below you see example
from statistics
Tr(AW) (20)
A=
Tr(W)
another example from gravity
1 (21)
Rnm − Rgnm = 0
2
and some samples from analysis and trigonometry
1 1 1 (22)
ln(2) = 1 − + − + ...
2 3 4
 3617 (23)
B6 =
510
1 (24)
ch(x) = (ex + e− x)
2
th(x) ± th(y) (25)
th(x ± y) =
1 ± th(x)th(y)
Fractions may contain nested indices. Here are some samples from
mechanics
m1m2 (26)
I= x2
m1 + m 2
4B3 (27)
D=
ω2
examples from field theory
∂Am ∂An (28)
Fmn = −
∂xn ∂xm

mn ∂Am ∂An (29)

F = −
∂xn ∂xm
and other mathematical expressions
2th(x) (30)
th(2x) =
1 + th2(x)
1 1 1 (31)
G=1− + − + ...
32 52 72
Nesting of fractions is possible but limited to second order
1 (32)
g=1−
a
1− r
 1 (33)
m=
1 1
m1
+ m2
More deep nesting is also possible, but may require extra markup so at the
moment it is reasonable to limit nesting to second order as in real world
articles deeper nesting is rarely used and can be always avoided.

5. Fractions in inline mode

In inline mode fractions are rendered in the same manner as in block level
Tr(AW)
equations . The only difference is that inline fractions are slightly
Tr(W)
th(x) ± th(y)
compactified (height of numerator/denominator is reduced) to
1 ± th(x)th(y)
avoid possible line-height enlargement and nesting of fractions in inline
mode is not allowed but nesting of indices is possible so inline fractions may
m 1m 2 2
contain nested indices x . Here is another example with nested
m1 + m 2
2th(x)
superscripts
1 + th2(x)

6. Operators in display mode

Rendering of indexed operators is much more complicated issue as in
general number of under and over scripts may be arbitrary and in addition
one needs to rearrange all this stuff when operators are nested in fractions or
appear inline. Also shape and baseline of glyphs may vary. At the moment
we will assume that only single under and over scripts are used (multiple
under scripts are really rarely used while multiple over scripts are almost
never used). One can format operators as inline tables. Below are some
sample integrals
1
(34)
B(m , n) = ∫ xm − 1(1 − x)n − 1dx
0

Here are some sums

 n
(35)
p= ∑p m
m=1

(36)
G= ∑ ApBs
p, s ∈ Z

Product

(37)
Ω= ∏ Ω(m)
m∈N

Unification operator
∞
(38)
A= ∪A (m)

m=1

and intersection
2n
(39)
B(s) = ∩B (m)

m=1

Direct sum and tensor products are rendered in the same manner
n n
(40)
Q ⊕x k = ⊕x Q[k]
k=1 k=1
n m
(41)
Â= ⊗ ⊗N ksMs
k=1 s=1

Under and over scripts may contain nested indices

(42)
G= ∑ Am1Bm2
m1m2

(43)
F= ∑ pm pm
1 2
m1 ≠ m 2

Operators can be combined with indices and fractions to form complex

expressions
 ∞
e− ax − e− bx b (44)
∫ x
dx = ln
a
0
∞
n! (45)
∫ xne− axdx =
an + 1
0
1
dx 1 (46)
∫ 1 + 2x + x 2
=
2
0
1
sin2mx π (47)
∫c 2
+ x2
dx =
4c
(1 − e−2mc)
0
1 2p
1 (− 1)n − 1 (48)
∫x 2p − 1
ln(1 + x)dx =
2p
∑ n
0 n=1

Nested fractions should not affect vertical alignment of parent fraction

1
Γ(p + 1)Γ( m n+ 1 ) (49)
∫ m n p
x (1 − x ) dx =
nΓ(p + 1 + m+1
)
0 n
∞
sin(mx) 1 π (50)
∫ eax + 1
dx =
2m
−
2ash( πm )
0 a
∞
th( πx ) m (51)
∫ 1 + x sin(mx)dx = e
2
2 m
− sh(m)ln(1 − e−2m)
0
∞
cos(mx)cos(nx) πch( πm ) ch( πn ) (52)
∫ ch(ax)
dx = 2a
a(ch( πm
2a
) + ch( πn ))
0 a a
Operators can be nested inside fractions. But in this case it is better to
replace under/over scripts with sub/superscripts placed after operator
n (k) (k)
∑ W A
A = k=1
(53)
n (k)
∑ k=1 A
n
S=
∏ k=1 Pk (54)
n
∏ k=1 Qk
 m
∑ k=1
F(m)W(m) ∑ m
k=0
F(m)W(m) (55)
F= =
m (m)
∑ k=1 W Ŵ
So it is possible to render common operators with CSS.

7. Operators in inline mode

In inline mode it is better to replace under/over scripts with indices placed
n
after operator, ∑ m=1 pm in this way possible line height distortions are
s (m)
reduced ∏ m=0 Ω . The additional problem is that in different fonts glyphs
that correspond to mathematical operators like sums, products and intergals
have different shapes, baselines and sizes ∑ m1 ≠ m2pm1pm2 so if in one font
operators look perfectly centered in others they may appear to be distorted.
The problem will be partly resolved when we will have single font with
good coverage of all mathematical ranges (maybe STIX).

8. Under and Over scripts

Rendering of generic under and over scripted expressions is easier then
rendering of indexed operators. They are formatted as inline tables. Here is
for example limit

c−3 = lim x3s(x) (56)

x→0

Residue

I(z0) = Res F(z) (57)

z = z0

Under script with brace (rendering of such a simple square under/over braces
is not a problem but making them round, or curly or allowing overlaps is
much more difficult to achieve, so currently it is better to stick to simplest
case).

V(n) = W ∧ W ∧ ⋯ ∧ W (58)
n times
Below you see some samples from chemistry
+IV 0 +VI −I
Na2SO3 + J2 + H2O = Na2SO4 + 2HJ (59)

+IV −I +II 0
MnO2 + 4HCl = MnCl2 + Cl2 + 2H2O (60)

+2e−
(61)
Zn + H2 SO4 = ZnSO4 + H2

Here is example from nuclear physics

Ra → Rn + He (62)
226 222 4

Under over scripts are really rarely used. Below is rather artificial example
from chemistry.
27 4 30 1
Al + He = P + n (63)
13 2 15 0

9. Vectors, Matrices and Cases

Vectors, matrices and cases can be formatted as inline tables. Here are
sample matrices and vectors. 'Hooks' are produced by inserting extra cells at
edges using CSS generated content and removing inner borders via border
collapse mechanism.

c11 c12 c13 x1 b1 (64)

c21 c22 c23 x2 = b2

c31 c32 c33 x3 b3

Matrices may contain nested fractions, indices and operators

a2
M11 M12 M13 b2 + c2
a3 − b2 (65)
a2 + b2
M3 = M21 M22 M23 = c4 12c
8a
2a2
M31 M32 M33 12c b4 7b3
rendering of determinants is much easier as no 'hooks' are necessary.
a2
M11 M12 M13 b2 + c2
a3 − b2 (66)
2 2
det(M3) = M21 M22 M23 = 4 a +b
c 12c
8a
4 2a2
M31 M32 M33 12c b 7b3
Rendering of multivalues is slightly simplified.
+1 {if x > 0} (67)
ε(x) = 0 {if x = 0}
−1 {if x < 0}

10. Large Brackets

Simple square brackets can be imitated using generated content and borders.
This is the simplest and most reliable way to handle them.
3 (68)
1
D = G(z) +
S(z)

m2 k5 3k (69)
Fs(x) + 12 Gs(x)
∏ ∏
3
(m) k
Ĉ = kF (x) +
k=m s = c4 Fs(x) − 12 Gs(x)
4b2
4θ2 (70)
∫ ∑
2 2
Ŝ± = e± 3uc ŵ + e±m1m2ŵ dŵ
z2
6z3 + 3u 2c
2
m1 ≠ m 2

As an alternative solution one can compose brackets by combining Unicode

characters 239B-23AD (located in Misc. Technical range). Task can be
simplified using CSS generated content.

11. Diacritical Marks

Rendering of diacritical marks is not governed by CSS. This issue is
addressed by Unicode standard [1] that defines so called combining
diacritical marks like __?__??__?__̃__?__?__ that being combined with
ordinary Unicode characters must produce characters with over dots, hats,
tildes, bars etc.

q? + q?2 + q4 = c̃ (71)

but at the moment browsers does not support combining diacritical marks
properly and it is better to use precomposed characters

[Â , Ĥ] = 0 (72)

located in the following Unicode ranges: Latin-1 Supplement, Latin

Extended-A, Latin Extended-B, Latin Extended Additional.

12. Radicals
The most reliable way to settle issue with radicals is to use more simple
power notations
− b ± (b² − 4ac)½ (73)
x=
2a
3/2 (74)
± 2 12c5
R = m ±
29w7
In this way one avoids dependence on font metrics.

13. Nesting Limitations

Our present style sheet uses simple 'shrink to fit' nesting scheme to ensure
that nested element does not affect height of its parent. Such a rendering
naturally imposes limits on nesting of certain expressions. In overall these
limitations are not severe and does not affect real world articles. For
example simple nesting of fractions is allowed
A0 (75)
Q = B0 +
A1
B1 + B2 + A2 / B 3
but those who try to nest fractions deeper will encounter nesting limitation.
It is possible to remove this and other nesting limitations by using more
complex markup, but at the moment we don't want to do this as limitation
are not severe.

14. Conclusions
CSS2 is basically simple style language, but in spite of its simplicity it is
powerful enough to afford rendering of most of mathematical expressions.
So one can start using CSS for formatting of scientific and technical XML
documents already today. Rendering of some things like for instance
radicals, and deeply nested expressions are not fully addressed in the present
article. However it happened just because current CSS2 based solutions for
rendering of radicals are slightly artificial, while support for deep nesting
requires slightly more detailed markup then we currently use, so taking into
account that this issues are not urgent we think it is better to address them
later when we will have more natural solutions (like CSS3 math module).

References
1. B. Beeton et al.,Unicode Support for Mathematics, 2003
2. B. Bos et al., Cascading Style Sheets, level 2 revision 1, 2004
3. T. Bray et al., Extensible Markup Language (XML) 1.0, 2004
4. J. Clark, Associating Style Sheets with XML documents, 1999