]>
# Formatting Mathematical Articles with Cascading Style Sheets

George Chavchanidze
Department of Theoretical Physics,
A. Razmadze Institute of Mathematics,
1 Aleksidze Street, Tbilisi 0193, Georgia
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.
eXtensible Markup Language, Cascading Style Sheets, Mathematics in XML
Sun, 10 Oct 2004 (revised version)
## 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
Rendering of inline equations is more specific as one has to care about height of line box.
## 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
ch2(x) − sh2(x) = 1
ch(3x) = 4ch3(x) − 3ch(x)
Na − e− = Na+
and lower indices taken from mathematics and chemistry
Tmn = − Tnm
Fe3O4 + 4H2 ⇄ 3Fe + 4H2
Simple indices may be combined. Subscripts may precede superscripts and vise versa.
Tmn = εnmkSk
Tmn = εnmkSk
13Al27 + 2He4 = 15P30 + 0n1
Indices may be also positioned one over another in this way
∇mRnikl +
∇lRnimk +
∇kRnilm = 0
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
dzk(1) = dxk(1) + idyk(1)
Tk1k2 = − Tk2k1
Tk(1)k(2) = − Tk(2)k(1)
eA(1)eA(2) = eA(1) + A(2)
Xh(F) = LXhF
∇k1Rk5k2k3k4 +
∇k4Rk5k2k1k3 +
∇k3Rk5k2k4k1 = 0
∇ŝ1Rŝ5ŝ2ŝ3ŝ4 +
∇ŝ4Rŝ5ŝ2ŝ1ŝ3 +
∇ŝ3Rŝ5ŝ2ŝ4ŝ1 = 0
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.
## 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 ∇mRnikl
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
∇k1Rk5k2k3k4.
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) = LXhF.
## 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)
another example from gravity
Rnm −
1
2
Rgnm = 0
and some samples from analysis and trigonometry
ln(2) = 1 −
1
2
+
1
3
−
1
4
+ ...
B6 =
3617
510
ch(x) =
1
2
(ex + e− x)
th(x ± y) =
th(x) ± th(y)
1 ± th(x)th(y)
Fractions may contain nested indices. Here are some samples from mechanics
I =
m1m2
m1 + m2
x2
D =
4B3
ω2
examples from field theory
Fmn =
∂Am
∂xn
−
∂An
∂xm
Fmn =
∂Am
∂xn
−
∂An
∂xm
and other mathematical expressions
th(2x) =
2th(x)
1 + th2(x)
G = 1 −
1
32
+
1
52
−
1
72
+ ...
Nesting of fractions is possible but limited to second order
g = 1 −
1
1 −
a
r
m =
1
1
m1
+
1
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.
## 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)
## 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
Here are some sums
p =
n
m=1
pm
G =
p, s ∈ Z ApBs
Product
Ω = m ∈ N Ω(m)
Unification operator
A =
∞
m=1
A(m)
and intersection
B(s) =
2n
m=1
B(m)
Direct sum and tensor products are rendered in the same manner
Q
n
k=1
xk
=
n
k=1
xQ[k]
Â =
n
k=1
m
s=1
NksMs
Under and over scripts may contain nested indices
G =
m1m2
Am1Bm2
F =
m1 ≠ m2
pm1pm2
Operators can be combined with indices and fractions to form complex
expressions
∞
0
e− ax − e− bx
x
dx = ln
b
a
∞
0
xne− axdx =
n!
an + 1
1
0
dx
1 + 2x + x2
=
1
2
1
0
sin2mx
c2 + x2
dx =
π
4c
(1 − e−2mc)
1
0
x2p − 1ln(1 + x)dx =
1
2p
2p
n=1
(− 1)n − 1
n
Nested fractions should not affect vertical alignment of parent fraction
1
0
xm(1 − xn)pdx =
Γ(p + 1)Γ(m + 1n)
nΓ(p + 1 + m + 1n)
∞
0
sin(mx)
eax + 1
dx =
1
2m
−
π
2ash(πma)
∞
0
th(πx2)
1 + x2
sin(mx)dx =
m
em
− sh(m)ln(1 − e−2m)
∞
0
cos(mx)cos(nx)
ch(ax)
dx =
πch(πm2a)
ch(πn2a)
a(ch(πma)
+ ch(πna))
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 =
nk=1W(k)A(k)
nk=1A(k)
S =
nk=1Pk
nk=1Qk
F =
mk=1F(m)W(m)
mk=1W(m)
=
mk=0F(m)W(m)
Ŵ
So it is possible to render common operators with CSS.
## Operators in inline mode

In inline mode it is better to replace under/over scripts with indices placed after operator,
nm=1pm
in this way possible line height distortions are reduced
sm=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 ≠ 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).
## 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)
Residue
I(z0) =
Res
z = z0
F(z)
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
Below you see some samples from chemistry
+IV
Na2SO3
+
0
J2
+ H2O =
+VI
Na2SO4
+
−I
2HJ
+IV
MnO2
+
−I
4HCl
=
+II
MnCl2
+
0
Cl2
+ 2H2O
+2e−
Zn + H2
SO4 = ZnSO4 + H2
Here is example from nuclear physics
Ra
226
→
Rn
222
+
He
4
Under over scripts are really rarely used. Below is rather artificial example from chemistry.
27
Al
13
+
4
He
2
=
30
P
15
+
1
n
0
## 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
Matrices may contain nested fractions, indices and operators
M3 =
M11
M12
M13
M21
M22
M23
M31
M32
M33
=
a2b2 + c2
a3
− b2
c4
a2 + b212c
8a
12c
b4
2a27b3
rendering of determinants is much easier as no 'hooks' are necessary.
det(M3) =
M11
M12
M13
M21
M22
M23
M31
M32
M33
=
a2b2 + c2
a3
− b2
c4
a2 + b212c
8a
12c
b4
2a27b3
Rendering of multivalues is slightly simplified.
ε(x) =
+1{if x > 0}
0{if x = 0}
−1{if x < 0}
## 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
Ĉ(m)
=
m2
k=m
kFk3(x) +
k5
s = c4
Fs(x) + 12Gs(x)
Fs(x) − 12Gs(x)
3k
Ŝ± =
4θ2
6z3 +
z2
3u
4b2
2c2
e± 3uc2ŵ2 +
m1 ≠ m2
e±m1m2ŵdŵ
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.
## 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̃
but at the moment
browsers does not support combining diacritical marks properly and
it is better to use precomposed characters
[Â , Ĥ] = 0
located in the following Unicode ranges:
Latin-1 Supplement,
Latin Extended-A,
Latin Extended-B,
Latin Extended Additional.
## Radicals

The most reliable way to settle issue with radicals is to
use more simple power notations
x =
− b ± (b2 − 4ac)1/2
2a
R± =
m2 ±
12c5
29w7
3/2
In this way one avoids dependence on font metrics.
## 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
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.
## 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

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