/* UNIVERSAL MATH STYLE SHEET
CSS2.1 based universal math style sheet.
Latest version can be found at http://xml-maiden.com
This style sheet can render arbitrary complex mathematical
expressions obtained by combining and arbitrary deep nesting
of subscripts, superscripts, prescripts, under and over scripts,
fractions, operators, matrices, vectors, determinants, cases,
fences, radicals and other mathematical expressions.
Style sheet handles arbitrary mathematical formulae written
in XML MAIDEN 2.1.
Markup documentation with brief description of mathematics
oriented XML elements and attributes used in XML MAIDEN
can be found at the end of present style sheet.
Style sheet can be processed by CSS rendering engines
that have strong CSS2.1 support (flawless support for
inline-blocks and inline-tables is crucial for proper
functionality of the present style sheet).
Last modified on 16:36 10/06/2006 by George Chavchanidze
*/
formulae, formula, subformula
{display:block;}
/*
Displayed formulae, equation arrays
and subformulae are block level elements
*/
formula, math
{font-size:16pt;/* further style sheet uses only relative units, so formulae are scalable and font size can be easily changed */
font-family:"Palatino Linotype", serif; /* Palatino Linotype is incomplete, waiting for STIX fonts http://www.stixfonts.org */
line-height:1.5em;/* line-height is increased to accommodate indices, see comments below */
white-space:nowrap;/* unpredictable line breaks are prohibited, see comments below*/}
/*
Line height is slightly increased. This is
common practice in mathematical articles
and is usually done to reserve some space
for subscripts, superscripts and reduce line
height variations caused by presence of
fractions, operators and other multiline
expressions. Arbitrary automated line breaks inside
math expression are not allowed. Line breaks
may be set explicitly using empty tag.
Points where browsers may generate automated
line breaks can be marked using empty tag.
*/
math
{display:inline-block;/* inline-block may be used used to screen math formulae from text justification effect*/
text-align:left; /* restores proper alignment, see comments below */}
/*
In case when text alignment of paragraph
text is set to 'justify'
paragraph {text-align:justify}
rendering engine adjusts word spacing to
justify text. In such a case inline mathematical
expressions that are part of normal text flow
are also expanded which is not desirable
behaviour. Putting inline mathematical
expressions in inline-block allows to reset text
alignment of mathematical expressions to normal
(left) and avoid distortions in word/letter spacing.
*/
formula
{margin:0.5ex 1em 0.5ex 12%;/* indents block level formulae, remove left margin if centered formulae are preferable*/
text-align:left;/* may be changed to center if centered formulae are preferable */
page-break-inside:avoid;/* prohibits page breaks inside formulae, to avoid page breaks in inappropriate places, may be omitted */}
/*
Displayed formulae can be either centered
formula {text-align:center;}
or indented by increasing left margin/padding.
Page breaks inside formulae may be prohibited
to ensure that whole mathematical expression
is placed on one page.
*/
formula:before
{content:"(" counter(equation) ")";/* used for automated numbering of equations in style (1), (2), (3) ...*/
counter-increment:equation;/* increments equation number by one */
display:block;
float:right;}/* float:right ensures that equation marker is floated to the right edge of the page */
/*
Automated numbering of displayed equations can be
done using CSS2.1 counters. Equation markers
may be floated to the right edge. The present style
sheet performs global numbering in the form
first equation (1)
second one (2)
third equation (3)
fourth equation (4)
section by section numbering could be done
as follows
formula:before
{content:"(" counter(section) "." counter(equation) ")";
counter-increment:equation;}
section
{counter-increment:section;
counter-reset:equation;}
and produces something like
First section
first equation (1.1)
second one (1.2)
Second section
third equation (2.1)
fourth equation (2.2)
If necessary separate numbering can be used in appendix
appendix formula:before
{content:"(A." counter(equation) ")";
counter-increment:equation;}
will produce numbering in the followinf style
Appendix
first equation (A.1)
second equation (A.2)
*/
fraction
{display:inline-block;/* inline-block based approach works in MSIE 6.0, Opera 9 and Prince 5 */
white-space:nowrap;/* prohibits line breaks in fractions (redundant, as line breaks are already prohibited in math and formula containers)*/
text-align:center;/* centers content of numerator and denominator */
vertical-align:-0.7em;
/* shifts fraction by length approximately equal to distance between baseline
of inline-block and top of denominator, see extra comments below*/
margin:0 2px;/* adds small margin to provide spacing between adjacent fractions */}
num, den
{line-height:1.5em;/* just fixes line-height */
font-size:0.9em;/* font size of text in numerator/denominator is slightly smaller*/}
num
{border-bottom:solid 1px;/* border is used to immitate fraction bar */
display:block;}
den
{display:inline-block;
/* ensures that denominator occupies one line in normal flow of parent inline-block,
baseline of this line is baseline of inline-block*/
vertical-align:top;
/* ensures that distance between baseline of line that contains denominator
and top of denominator is fixed and does not depend on content of denominator */}
fraction matrix, fraction vector, fraction cases,
fraction fence:before, fraction fence:after
{margin-bottom:2px;
margin-top:2px;}
/* adds spacing between fraction bar and nested matrices, vectors and other nested multiline expressions */
sup num, sub num, inf num, sur num,
sup den, sub den, inf den, sur den
{font-size:0.8em;/* reduces size of fractions nested in indices */}
/* MORE COMMENTS ON FORMATTING OF FRACTIONS
Here you can find out how to render fractions with arbitrary complex content
using CSS2, CSS2.1, XSL 1.0 or XSL 1.1. It is assumed that fraction is structured as
follows
NUMERATOR
DENOMINATOR
markup like this is used in ISO 12083 and XML MAIDEN 2.0/2.1,
similar markup is used in AAP Math DTD. Numerator and denominator may
contain other mathematical expressions (including other fractions).
In CSS2.1 fractions can be formatted as either inline blocks
or inline tables. The simplest way to format fractions with
CSS is to use vertically centered inline block that envelopes
centered block level numerator with solid bottom border and
centered block level denominator.
fraction
{display:inline-block;
text-align:center;
vertical-align:middle}
num, den
{display:block;}
num
{border-bottom:solid;}
In this case rendering engine aligns
center of inline block with the baseline plus
half the x-height of surrounding text.
However center of inline block matches
position of fraction bar (numerators bottom
border) only when heights of numerator
and denominator are the same, which is not
the case in general.
Therefore to align arbitrary complex fractions
accurately one has to use more complex style
sheet described below.
First note that in style sheet
fraction
{display:inline-block;}
vertical alignment of inline block is baseline (by default), which means that
baseline of last line of inline block (in our case it is line
that carries denominator) must be aligned with baseline of parent element.
Now all we need to establish proper alignment of fraction is to shifting inline-block
by offset equal to distance between baseline and top of denominator.
Note however that in general content of denominator may affect position of baseline
of second line in inline-block used to represent fraction, which is not desirable
as we need to ensure proper alignment of fraction bar regardless content of fraction.
To ensure that distance between baseline of inline block (= baseline of line that contains denominator)
and fraction bar (bottom border of numerator) does not depend on content of denominator one may
wrap denominator in inline-block or inline-table (i.e. inline element with arbitrary content) as follows
num
{border-bottom:solid 1px;
display:block;}
den
{display:inline-block;
vertical-align:text-top;}
Note that when denominator is aligned with text-top or top of the parent, distance between baseline
of inline-block and fraction bar is fixed regrdless content of fraction. This distance is about 0.6-0.7em
so adding the following rules
fraction
{text-align:center;
vertical-align:-0.7em;}
will ensure proper formatting of fractions.
Summarizing everything written above we get something like:
fraction
{display:inline-block;
white-space:nowrap;
text-align:center;
vertical-align:-0.7em;}
num, den
{line-height:1.5em;
font-size:0.9em;}
num
{border-bottom:solid 1px;
display:block;}
den
{display:inline-block;
vertical-align:top;}
that can be used to format fractions with CSS2.1. In older versions of CSS however,
inline-blocks are not allowed. In particular CSS2 defines only inline-tables that
(taking into account anonimous table objects) provide similar functionality.
The main difference is that baseline of inline-tables is baseline of its first row,
so alignment technique used to achive proper alignment of fractions has to be modified
as follows:
fraction
{display:inline-table;
white-space:nowrap;
border-collapse:collapse;
text-align:center;
vertical-align:0.6em;
margin:0 2px;}
num, den
{line-height:1.5em;
font-size:0.9em;}
num
{display:inline-table;
vertical-align:text-bottom;}
den
{border-top:solid 1px;
display:table-row;}
Note that anonimous table objects that represent missing table-rows and table-cells are generated
automatically by CSS rendering engine.
Inline blocks based aprroach works well in MSIE 6.0, Opera 9 and Prince 5.
Inline tables based approach works in Opera 9 and Prince 5 only.
Some other CSS rendering engines including Safari and PDFReactor fail due to bugs
that affects alignment of inline-blocks (or inline-tables) while Gecko based browsers
like Mozilla does not support neither inline-blocks nor inline-tables at all.
To format fractions in Gecko one may try to use -moz-inline-box which is XUL analog of inline-block:
fraction
{display:-moz-inline-box;
-moz-box-orient:vertical;
white-space:nowrap;
vertical-align:0.8em;
text-align:center;
margin:0 2px;
line-height:1.5em;}
num, den
{font-size:0.9em;
display:block;}
den
{border-top:solid 1px;}
num > group
{display:-moz-inline-box;
vertical-align:text-bottom;}
num > group > group
{display:block;}
Note however that implementation of -moz-inline-box is not reliable and requires more complex markup:
NUMERATOR
DENNOMINATOR
then one used in XML MAIDEN
NUMERATOR
DENNOMINATOR
In XSL FO (XSL 1.0 and XSL 1.1) one may use similar technique to format complex fractions.
Basically fo:inline-container behaves like CSS inline-block, the main difference is that baseline of
fo:inline-container is baseline of its first inline area. XSLT that converts XML MAIDEN fractions
to XSL FO may look like:
It works in Antenna XSL Formatter (v4), other XSL Formatters like RenderX XEP and Apache FOP
do not support fo:inline-container. Xinc supports it but fails to align properly.
*/
inf, sub, sur, sup
{font-size:0.7em;/* in mathematics indices are smaller then main text*/
line-height:1em;/* line-height smaller then normal in order to reduce contribution to line-height of parent line box */
vertical-align:-0.8ex;/* defines offset for subscripts (sub) and lowered prescripts (inf) */}
/*
alternatively position of simple subscripts, superscripts
and prescripts can be adjusted using relative positioning.
In this case indices does not change line-height of parent element,
note however that relative positioning may cause indices to overlap
with other content.
*/
sur, sup
{vertical-align:1.4ex;/* defines offset for superscripts (sup) and raised prescripts (sur) */}
/*
Note that, in XSL simple indices can be formatted as follows:
*/
sub sub, sup sub, sur sub, inf sub,
sub sup, sup sup, sur sup, inf sup,
sub sur, sup sur, sur sur, inf sur,
sub inf, sup inf, sur inf, inf inf
{font-size:0.8em;
/* font-size:0.7 reduces size of nested indices quite quickly (geometric progression)
making deeply nested indices too small, so it is better to use higher value 0.8em, 0.9em for nested indices*/}
float, markers
{display:inline-block;/* stacked indices are enclosed in inline-block almost like fractions*/
white-space:nowrap;/* prohibits line breaks in stacked indices (redundant, as line breaks are already prohibited in math and formula containers)*/
vertical-align:-0.5em;/* ensures desirable vertical alignment */
line-height:1em;/* just to fix line-height*/
text-align:left;}
/*
'float' element is used to position
superscript and subscript one over
another and align them to common base.
Formatting of such a indices is performed
more or less like formatting of fractions,
the difference is that text-alignment is left in case of
pair superscript/subscript and right in case of
prescripts, fraction bar is missing and vertical alignment offset is different.
Rendering of markers is also similar.
*/
float > sub, float > sup,
float > inf, float > sur,
markers > marker, markers > submarker
{display:inline-block;
line-height:1.2em;
vertical-align:top;}
float > inf, float > sur
{text-align:right;}
float > sup, float > sur, markers > marker
{display:block;}
marker, submarker
{font-size:0.7em;}
fence + markers
{vertical-align:0.2em;}
fence + markers > submarker
{border-top:solid 1.9em transparent;}
/* Transparent border adds extra spacing between stacked indices that apply to fences and large brackets
(in XML MAIDEN 2.0/2.1 such indices are called fence markers)*/
math fence + markers
{vertical-align:-0.1em;}
math fence + markers > submarker
{border-top:solid 1.1em transparent;}
/* In inline mode size of fences is smaller. Space between fence markers
and their alignment is adjusted accordingly.*/
ope + markers
{vertical-align:-0.3em;}
ope + markers > submarker
{border-top:solid 0.4em transparent;}
/* Adds extra spacing between stacked indices that apply to operators
(in XML MAIDEN 2.0/2.1 such indices are operator markers)*/
math ope + markers
{vertical-align:-0.4em;}
math ope + markers > submarker
{border-top:solid 0.3em transparent;}
/* In inline mode size of operators is smaller. Space between operator markers
and their alignment is adjusted accordingly.*/
ope + marker, fence + marker,
ope + submarker, fence + submarker
{line-height:1em;
vertical-align:-1.5em;}
ope + marker
{vertical-align:1.1em;}
ope + submarker
{vertical-align:-0.8em;}
math ope + marker
{vertical-align:1em;}
math ope + submarker
{vertical-align:-0.6em;}
fence + marker
{vertical-align:1.7em;}
fence + submarker
{vertical-align:-1.4em;}
math fence + marker
{vertical-align:1.2em;}
math fence + submarker
{vertical-align:-1em;}
/* code above adjusts alignment of fence and operator markers */
/* below is alternative style sheet for stacked indices and markers
that uses inline-tables instead of inline-blocks:
float
{display:inline-table;
white-space:nowrap;
border-collapse:collapse;
line-height:1em;
vertical-align:0.7em;
text-align:left;}
float > sub, float > sup,
float > inf, float > sur
{display:inline-table;
line-height:1.2em;
vertical-align:text-bottom;}
float > inf, float > sur
{text-align:right;}
float > sub, float > inf
{display:table-row;}
Note that in XSL stacked indices can be formatted as follows:
*/
ope
{vertical-align:middle;/* operators are vertically centered */}
formula ope
{font-size:1.4em;/* resizes operators in block level formulae*/}
over, under
{display:inline-table;/* expression with under scripts can be formatted as inline-table*/
text-align:center;/* ensures horizontal centering of under/over scripts with respect to base*/}
over
{display:inline-block;/* expression with over scripts can be formatted as inline-block*/}
sat
{display:block;/* over scripts */}
under > ker, under > sat
{display:table-row;/* under scripts and their base */}
/* under scripts and their base are formatted as
table rows. Rendering engine alignes
baseline of text with baseline of first row of inline-table
which is element 'ker'. Missing table cells
and other necessary containers are generated
by rendering engine following specification for
anonymous table objects */
sat
{font-size:0.7em;/* font size of over and underscripts is smaller then that of their base */
line-height:1.2em;/* line height is reduced to reduce spacing between base and under/over scripts*/}
math under, math over, math sat
{line-height:1.1em;/* in inline mode line height is reduced further */}
underbrace
{display:table-row;
line-height:3px;}
underbrace:before, overbrace:before
{display:block;
content:"\A0";
height:3px;
border-width:1px 1px 0 1px;
border-style:solid;}
underbrace:before
{border-width:0 1px 1px 1px;}
/*
Under and over braces are produced using generated
content. Borders imitate large square brackets.
*/
/* MORE COMMENTS ON FORMATTING OF UNDER AND OVER SCRIPTS
Below is explanation of formatting technique for XML MAIDEN 2.1 under and over scripts.
Formatting of under and overs scripts is area where capabilities of different style languages
differ. Good news is that CSS2.1 can handle arbitrary number of arbitrary complex under/over scripts applied
to arbitrary complex base. The bad news is that in CSS2 and XSL 1.0/1.1 it is hard to format
overscripts with complex base. In XML MAIDEN expressions with under scripts are structured as follows:
Base
underscript
number of underscripts can be arbitrary
Base
underscript I
underscript II
underscript III
and may include underbrace
Base
underscript
both base and under scripts may carry arbitrary complex content.
In CSS2/2.1 the most natural way to format expression under scripts is to use inline-tables.
Since in CSS the baseline of inline-table is baseline of its first row (which is base in our case),
proper vertical alignment of underscripted expressions is achived automatically:
under
{display:inline-table;
border-collapse:collapse;
text-align:center;
line-height:1.3em;}
ker, sat, under > ope
{display:table-row;}
sat
{font-size:0.7em;}
underbrace
{display:table-row;
line-height:3px;}
underbrace:before
{display:block;
content:"\A0";
height:3px;
border-style:solid;
border-width:0 1px 1px 1px;}
Note that anonimous table objects that represent missing table-cells are generated
automatically by CSS rendering engine.
Similar technique can be used in XSL, using fo:inline-container
Overscripts are better to be formatted using inline-blocks.
In XML MAIDEN 2.1 expressions with over scripts are structured as follows:
overscript
Base
number of overscripts can be arbitrary
overscript I
overscript II
overscript III
Base
and may include overbrace
overscript
Base
base and overscripts may contain arbitrary complex content.
overscripts can be combined with underscripts like:
Base
underscript
Base
or
overscript
Base
underscript
The most natural way to format overscripted expressions in CSS2.1 is
to use inline blocks. Since baseline of inline-block is baseline of its last line
(which is base in our case) the proper vertical alignment is achived automatically
over
{display:inline-block;
white-space:nowrap;
text-align:center;}
over
{display:inline-block;}
sat
{display:block;
font-size:0.7em;
line-height:1.2em;}
overbrace:before
{display:block;
content:"\A0";
height:3px;
border-width:1px 1px 0 1px;
border-style:solid;}
Unfortunately this technique can not be used in XSL FO where baseline of fo:inline-container
is defined otherwise. If however base contains only simple (#PCDATA) content one can use
the following XSL template:
*/
det, matrix, vector, cases, apply
{display:inline-table;/* matrices, determinants, vectors and similar staff can naturally be rendered using inline tables */
border-collapse:collapse;/* border collapse effect is used to produce vector and matrix fences */
vertical-align:middle;/* matrices are centered vertically*/
text-align:center;/* and horizontally */
font-size:0.9em;/* font-size may be reduced*/}
/*
Matrix and vector fences are produced by inserting
extra cells at the beginning and end of each row.
They have borders imitating large square brackets
that enclose matrix (or vector). Border collapse mechanism
is used to eliminate inner borders and leave only outer ones
that embrace matrix from left and right sides.
In fact one can avoid border collapse mechanism
by using CSS3 last child selector.
matrix
{border-left:solid 1px;
border-right:solid 1px;}
row:before, row:after,
{display:table-cell;
content:"\A0";}
row:first-child:before, row:first-child:after,
{border-top:solid 1px;}
row:last-child:before, row:last-child:after,
{border-top:solid 1px;}
However this is CSS2.1 style sheet and we prefer
to avoid CSS3 selectors here by using more complex
border collapse based solution.
*/
apply > *
{display:table-cell}/* is used to associate indices with matrix (in XML MAIDEN they are called matrix markers )*/
apply > marker, apply > submarker
{font-size:0.7em;/* font-size is reduced like in case of other indices */
line-height:1.1em;
vertical-align:bottom;/* subscript is bottom align */}
apply > marker
{vertical-align:top;/* superscript is top aligned */}
math det, math matrix, math vector, math cases
{font-size:0.7em;/* in inline mode font-size is reduced */}
row, case, entry
{display:table-row;/* matrix rows */}
cell, value, scope
{display:table-cell;
line-height:1.7em;
white-space:nowrap;
padding:1px 8px;}
matrix > row:before, matrix > row:after,
entry:before, entry:after
{display:table-cell;/* extra cells are added to produce matrix fences */
content:"\A0";
border-bottom:solid 1px;
border-left:solid 1px;
border-top:hidden;
/* this declaration eliminates all inner borders (via border collapse mechanism)
and leaves only one in last row that produces bottom hooks */}
matrix > row:after, entry:after
{border-left:none;
border-right:solid 1px;}
row:first-child:before, row:first-child:after,
entry:first-child:before, entry:first-child:after
{border-top:solid 1px;/* this declaration eliminates produces top hooks */}
det
{border-left:solid 1px;
border-right:solid 1px;}
/* determinant fences are produced using borders */
cases
{border:dashed 1px gray;}
/* cases are enclosed in dashed box */
value
{text-align:right;}
scope
{text-align:left;}
radical
{display:inline-table;
border-collapse:collapse;
margin:1px;/* small margin creates spacing between nested radicals */}
radicand, radix
{display:table-cell;/* content of radical (radicand) and its index (radix) are formatted as table cells */}
radicand, sqrt
{border-top:solid 1px;
border-left:groove 2px;
padding:2px 5px 0 3px; /* adds extra padding to radicand */}
/* top and left borders of radicand form part of radical sign,
another part is produce using generated content */
radix
{vertical-align:bottom;
text-align:right;
font-size:0.7em;
line-height:1em;}
radix:after
{display:block;
content:"";
width:1em;
border-style:groove;
border-width:2px 2px 0 0;
margin:0 -0.2ex 1ex 0;}
/* border forms part of radical sign, square radical signs may not be the best solution,
however it is more reliable then Unicode based approaches that are font dependant.
In future it may be enhanced using either CSS3 border-radius properties or SVG */
sqrt
{display:inline-block;
position:relative;
margin:1px 0 1px 0.8em;
z-index:1;}
/* square roots can be formatted as inline blocks with radical sign being
formatted as border */
sqrt:before
{display:block;
content:"";
position:absolute;
z-index:1;
bottom:0;
left:-0.8em;
width:0.8em;
height:0.5ex;
border-top:groove 2px;}
/* this border is part of radical sign */
fence:before, fence:after
{display:inline-block;
vertical-align:middle;
line-height:0.9em;
white-space:pre;}
/* fence element is used to produce large brackets and fences,
resizing ordinary brackets by changing font-size does not produce desired results.
Instead, of can assemble large brackets using bracket fragments
from Unicode #x23a1-#x23ad range or box drawing fragments from #x2502-#x256e range.
Combined together and enclosed in inline-block they can be inserted using generated content.
*/
fence:before
{margin-left:-0.3em;
content:"\23a1 \A \23a2 \A \23a3";}/* composes large left square bracket from bracket fragments #x23a1-#23a3 */
fence:after
{margin-right:-0.3em;
content:"\23a4 \A \23a5 \A \23a6";/* composes large right square bracket from bracket fragments #x23a4-#23a6 */}
math fence:before, math fence:after
{font-size:0.8em;}
fence[left="curly"]:before
{content:"\23a7 \A \23a8 \A \23a9";}/* composes large left brace from bracket fragments #x23a7-#23a9 */
fence[right="curly"]:after
{content:"\23ab \A \23ac \A \23ad";}/* composes large right brace from bracket fragments #x23ab-#23ad */
fence[left="dashed"]:before,
fence[right="dashed"]:after
{content:"\250a \A \250a \A \250a";}/* composes dashed bars */
fence[left="double"]:before,
fence[right="double"]:after
{content:"\2551 \A \2551 \A \2551"}/* composes double bars*/
fence[left="round"]:before
{content:"\239b \A \239c \A \239d";}/* composes large left round bracket from bracket fragments #x239b-#239d */
fence[right="round"]:after
{content:"\239e \A \239f \A \23a0";}/* composes large right round bracket from bracket fragments #x239e-#23a0 */
fence[left="solid"]:before,
fence[right="solid"]:after
{content:"\23d0 \A \23d0 \A \23d0";}/* composes solid bars */
fence[left="none"]:before
{content:normal;}
/*
Unfortunately very few Unicode fonts have good coverage of
#x23a1-#x23ad Unicode range. As a result users with incomplete Unicode
fonts may have problems with large curly and round brackets.
Instead of bracket fragments #x23a1-#x23ad one may use box drawing characters #x2502-#x256e
as follows:
fence:before, fence:after
{display:inline-block;
vertical-align:middle;
line-height:0.9em;
font-size:0.7em;
white-space:pre;}
fence:before
{margin-left:-0.2em;
content:"\250c \A \2502 \A \2502 \A \2502 \A \2514";}
fence:after
{margin-right:-0.2em;
content:"\2510 \A \2502 \A \2502 \A \2502 \A \2518";}
math fence:before, math fence:after
{font-size:0.5em;}
fence[left="curly"]:before
{content:"\256d \A \2502 \A \2524 \A \2502 \A \2570 ";}
fence[right="curly"]:after
{content:"\256e \A \2502 \A \251c \A \2502 \A \256f";}
fence[left="dashed"]:before,
fence[right="dashed"]:after
{content:"\250a \A \250a \A \250a";}
fence[left="double"]:before,
fence[right="double"]:after
{content:"\2551 \A \2551 \A \2551"}
fence[left="round"]:before
{content:"\256d \A \2502 \A \2502 \A \2502 \A \2570 ";}
fence[right="round"]:after
{content:"\256e \A \2502 \A \2502 \A \2502 \A \256f";}
fence[left="solid"]:before,
fence[right="solid"]:after
{content:"\2502 \A \2502 \A \2502 \A \2502 \A \2502";}
fence[left="none"]:before
{content:normal;}
Alternatively one may use borders to immitate large brackets.
At the moment this approach does not work for curly and round brackets,
but in future proper formatting of these bracket styles can be achived
using CSS3 border-radius.
fence:before, fence:after
{border-style:solid;
content:"\A0";
display:inline-block;
vertical-align:middle;
height:2.5em;}
fence:before
{margin-left:2px;
border-width:1px 0 1px 1px;}
fence:after
{margin-right:2px;
border-width:1px 1px 1px 0;}
math fence:before, math fence:after
{height:2em;}
fence[left="curly"]:before
{border-left-style:dashed;}
fence[right="curly"]:after
{border-right-style:dashed;}
fence[left="dashed"]:before
{border-style:dashed;
border-width:0 0 0 1px;}
fence[right="dashed"]:after
{border-style:dashed;
border-width:0 1px 0 0;}
fence[left="double"]:before
{border-style:double;
border-width:0 0 0 3px;}
fence[right="double"]:after
{border-style:double;
border-width:0 3px 0 0;}
fence[left="round"]:before
{border-style:double;
border-width:1px 0 1px 3px;}
fence[right="round"]:after
{border-style:double;
border-width:1px 3px 1px 0;}
fence[left="solid"]:before
{border-style:solid;
border-width:0 0 0 1px;}
fence[right="solid"]:after
{border-style:solid;
border-width:0 1px 0 0;}
fence[left="none"]:before
{content:normal;}
Drawing fences using SVG and inserting them using generated content is possible.
*/
wrap:before
{content:"\200B";/* zero width space */
white-space:normal;}
/*
Empty tag marks places where rendering engine may generate line break.
Depending of content width rendering engine may use or ignore this opportunity.
*/
line:before
{content:"\A";/* line feed */
white-space:pre;/* to preserve line feed */}
/*
Empty tag generates line breaks.
*/
bold
{font-weight:bold;}
italic
{font-style:italic;}
overline
{text-decoration:overline;}
strike
{text-decoration:line-through;}
underline
{text-decoration:underline;}
/*
STYLE SHEET ENDS HERE
Below is description of mathematical part of XML MAIDEN 2.1
markup language. This markup was specially developed together
with present style sheet as existing mathematical markup languages
are not compatible with CSS2.1 in sense that they does not admit
universal style sheets.
*/