]>

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

  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