mathematical articles

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 = εnm
kSk
(8)
Tmn = εnm
kSk (9)
13Al27 + 2He4 = 15P30 + 0n1 (10)
Indices may be also positioned one over another in this way
∇mRn
ikl + ∇lRn
imk + ∇kRn
ilm = 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)
dzk(1) = dxk(1) + idyk(1) (13)
Tk1k2
= − Tk2k1
(14)
Tk(1)k(2) = − Tk(2)k(1) (15)
eA(1)eA(2) = eA(1) + A(2) (16)
Xh(F) = LXh
F (17)
∇k1Rk5
k2k3k4 + ∇k4Rk5
k2k1k3 + ∇k3Rk5
k2k4k1 = 0 (18)
∇ŝ1
Rŝ5 ŝ2ŝ3ŝ4
+ ∇ŝ4
Rŝ5 ŝ2ŝ1ŝ3
+ ∇ŝ3
Rŝ5 ŝ2ŝ4ŝ1
= 0 (19)
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 εnm
kSk. 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 εnm
kSk (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 ∇mRn
ikl can be used in inline mode as
well, but again some browsers does not like them. This happens due to weak
CSS support in those browsers. One can nest indices as follows ∇k1Rk5
k2k3k4 .
Nested indices are also shifted using relative positioning and thus they
should not change height of line box. Here are another samples of nested
superscripts eA(1)eA(2) and nested subscripts Xh(F) = LXh
F.
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
A =
Tr(AW)
Tr(W)
(20)
another example from gravity
Rnm −
1
2
Rgnm = 0 (21)
and some samples from analysis and trigonometry
ln(2) = 1 −
1
2
+
1
3
−
1
4
+ ... (22)
B6 =
3617
510
(23)
ch(x) =
1
2
(ex + e− x) (24)
th(x ± y) =
th(x) ± th(y)
1 ± th(x)th(y)
(25)
Fractions may contain nested indices. Here are some samples from
mechanics
I =
m1m2
m1 + m2
x2 (26)
D =
4B3
ω2
(27)
examples from field theory
Fmn =
∂Am
∂xn
−
∂An
∂xm
(28)
Fmn =
∂Am
∂xn
−
∂An
∂xm
(29)
and other mathematical expressions
th(2x) =
2th(x)
1 + th2(x)
(30)
G = 1 −
1
32
+
1
52
−
1
72
+ ... (31)
Nesting of fractions is possible but limited to second order
g = 1 −
1
1 − ar
(32)
m =
1
1
m1
+ 1
m2
(33)
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
equations Tr(AW)
Tr(W) . The only difference is that inline fractions are slightly
compactified (height of numerator/denominator is reduced) th(x) ± th(y)
1 ± th(x)th(y) to
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
contain nested indices m1m2
m1 + m2
x2 . Here is another example with nested
superscripts 2th(x)
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
B(m , n) =
1∫0
xm − 1(1 − x)n − 1dx (34)
Here are some sums
p =
nΣ
m=1
pm
(35)
G = Σ
p, s ∈ Z
ApBs (36)
Product
Ω = Π
m ∈ N
Ω(m) (37)
Unification operator
A =
∞∪
m=1
A(m) (38)
and intersection
B(s) =
2n
∩
m=1
B(m) (39)
Direct sum and tensor products are rendered in the same manner
Q
n⊕
k=1
xk =
n⊕
k=1
xQ[k]
(40)
 =
n⊗
k=1
m⊗
s=1
NksMs
(41)
Under and over scripts may contain nested indices
G = Σ
m1m2
Am1Bm2 (42)
F = Σ
m1 ≠ m2
pm1
pm2
(43)
Operators can be combined with indices and fractions to form complex
expressions
∞∫0
e− ax − e− bx
x
dx = ln
b
a
(44)
∞∫0
xne− axdx =
n!
an + 1
(45)
1∫0
dx
1 + 2x + x2
=
1
2
(46)
1∫0
sin2mx
c2 + x2
dx =
π
4c
(1 − e−2mc) (47)
1∫0
x2p − 1ln(1 + x)dx =
1
2p
2p
Σ
n=1
(− 1)n − 1
n
(48)
Nested fractions should not affect vertical alignment of parent fraction
1∫0
xm(1 − xn)pdx =
Γ(p + 1)Γ( m + 1
n )
nΓ(p + 1 + m + 1
n )
(49)
∞∫0
sin(mx)
eax + 1
dx =
1
2m
−
π
2ash( πm
a )
(50)
∞∫0
th( πx
2 )
1 + x2
sin(mx)dx =
m
em
− sh(m)ln(1 − e−2m) (51)
∞∫0
cos(mx)cos(nx)
ch(ax)
dx =
πch( πm
2a ) ch( πn
2a )
a(ch( πm
a ) + ch( πn
a ))
(52)
Operators can be nested inside fractions. But in this case it is better to
replace under/over scripts with sub/superscripts placed after operator
A = Σ n
k=1W(k)A(k)
Σ n
k=1 A(k)
(53)
S = Π n
k=1 Pk
Π n
k=1 Qk
(54)
F = Σ m
k=1 F(m)W(m)
Σ m
k=1W(m)
= Σ m
k=0 F(m)W(m)
Ŵ
(55)
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
after operator, Σ n
m=1 pm in this way possible line height distortions are
reduced Π s
m=0 Ω(m). 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 ≠ m2
pm1
pm2
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
x → 0
x3s(x) (56)
Residue
I(z0) = Res
z = z0
F(z) (57)
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
n times
(58)
Below you see some samples from chemistry
+IV
Na2SO3 +
0
J2 + H2O =
+VI
Na2SO4 +
−I
2HJ (59)
+IV
MnO2 +
−I
4HCl =
+II
MnCl2 +
0
Cl2 + 2H2O (60)
+2e−
Zn + H2 SO4 = ZnSO4 + H2
(61)
Here is example from nuclear physics
Ra
226
→ Rn
222
+ He
4
(62)
Under over scripts are really rarely used. Below is rather artificial example
from chemistry.
27
Al
13
+
4
He
2
=
30
P
15
+
1n0
(63)
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
c21 c22 c23
c31 c32 c33
x1
x2
x3
=
b1
b2
b3
(64)
Matrices may contain nested fractions, indices and operators
M3 =
M11 M12 M13
M21 M22 M23
M31 M32 M33
=
a2
b2 + c2 a3 − b2
c4 a2 + b2
12c 8a
12c b4 2a2
7b3
(65)
rendering of determinants is much easier as no 'hooks' are necessary.
det(M3) =
M11 M12 M13
M21 M22 M23
M31 M32 M33
=
a2
b2 + c2 a3 − b2
c4 a2 + b2
12c 8a
12c b4 2a2
7b3
(66)
Rendering of multivalues is slightly simplified.
ε(x) =
+1 {if x > 0}
0 {if x = 0}
−1 {if x < 0}
(67)
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.
D = G(z) +
1
S(z)
3 (68)
Ĉ(m) =
m2
Π
k=m
kFk3(x) +
k5
Π
s = c4
Fs(x) + 12
Gs(x)
Fs(x) − 12Gs(x)
3k (69)
Ŝ± =
4θ2
6z3 + z2
3u
4b2
∫
2c2
e± 3uc2ŵ2 + Σ
m1 ≠ m2
e±m1m2ŵ dŵ (70)
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
x =
− b ± (b² − 4ac)½
2a
(73)
R± = m2 ±
12c5
29w7
3/2 (74)
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
Q = B0 +
A0
B1 + A1
B2 + A2 / B3
(75)
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

for more reference go through this website
http://www.princexml.com/samples/math.pdf