Mathematics and CSS

The purpose of present site is to demonstrate how Cascading Style Sheets can be used in scientific web publishing. In particular, site shows how to format mathematical articles with CSS. Style sheets listed here can be used in distant learning projects, web publishing, on math forums and in other cases when one needs to embed mathematical expression in XML. Below are some examples of real mathematical articles formatted with CSS, demo pages that reveal some capabilities of CSS, annotated style sheets and XML DTDs that describe conceptual mathematical markup language that admits universal CSS2.1 based style sheet.

Using CSS one can specify general layout of mathematical articles, perform automated numbering of equations, lists, headers, theorems, propositions, format tables, render mathematical expressions etc. In other words one can control formatting of articles in details. The main advantage of CSS comparing to XSL and DSSSL style languages is its simplicity. It is convenient and widely used. Historically CSS was mainly used to format web pages however as CSS support grows stronger, area of its applications starts to spread beyond webdesign and currently CSS slowly enters into desktop publishing. When it comes to scientific publishing, one nontrivial question emerges: can CSS render complex mathematical expressions? To answer it one has to specify what is CSS and what do we mean by complex expression. At the moment there are three levels (versions with growing capabilities) of CSS: CSS1, CSS2 and CSS3. CSS1 is the simplest style language that can be used to format simple web pages, it is supported by all major browsers, but its capabilities are very far from being sufficient for needs of scientific publishing. CSS2 (2.1) is general purpose style language with more powerful capabilities. It does not contain any mathematics oriented properties, but it turned out that its general, text oriented, visual formatting model is capable to render complex mathematical expressions obtained by combining and nesting subscripts, superscripts, prescripts, under and over scripts, fractions, operators, matrices, vectors, determinants, cases, fences and radicals. Unfortunately CSS2.1 is not fully supported by current browsers, however browser developers claim that they will implement it.

CSS3 is the most powerful version of CSS that currently is under construction, it will contain several modules like math module, advanced layouts, generated content that will significantly boost markup processing and formatting capabilities of CSS and allow us to render even more complex mathematical expressions then we do today. But CSS3 is not the matter of near future (in spite of the fact that some of its parts like selectors and paged media are already supported by some rendering engines). So we will focus on CSS2.1 that is realistic style language expected to gain good browser side support in near future (for some unbounded values of 'near').

Some Examples

A lot of things can be done just using CSS2.1. Below are some examples of XML articles formatted in this way. You can try them in your browser.
Articles
This articles contain mostly simple math formulae formatted with CSS2.1. CSS generated content used to number equations, lists, theorems etc.
CSS Stress
This demo page contains collection of math expressions intended to check different nesting patters. Some expressions are really complex and go far beyond the needs of average mathematician. It illustrates possibilities of CSS2.1 and works in recent versions of Opera (9), Mozilla and other Gecko based browsers (latest nigthly builds, march 2007) and versions 5-6 of Prince formatter.
CSS Torture
This demo page is analogue of MathML torture tests, but uses XML MAIDEN 2.1 instead and is rendered using CSS only. At the moment only Opera 9, latest nightly builds of Mozilla (after inline-block and inline-table were implemented by David Baron) and Prince 5-6 managed to afford CSS version of these tests.
XSLT + XSL FO approach
The fact that XML MAIDEN was designed to be mathematical markup for XML + CSS framework by no means does not imply that other styling options like XSLT + XSL FO or DSSSL are not available. It is possible to render XML MAIDEN 2.1 (excluding overscripts with complex base) using XSL in formatters that support fo:inline-container (for example Antenna XSL Formatter 4). Examples include XML MAIDEN input and XSL FO output.

CSS Style Sheets

Universal Math Style Sheet
The idea behind universal math style sheet was to write single CSS2.1 style sheets that would handle arbitrary complex math formulae obtained by combining and nesting subscripts, superscripts, prescripts, under and over scripts, fractions, operators, matrices, vectors, determinants, cases, accents, fences, radical and other mathematical expressions. In this case any good CSS rendering engine would be able to render mathematical expressions without having native LaTeX/MathML/EMS support. The good news is that such a style sheet exists (that was not obvious from the first glance) and even works in three different CSS rendering engines (Presto, Gecko and Prince). The bad news however that evil browser with large share does not have sufficient CSS2.1 support yet to process style sheet properly. In any case it is here and currently we are testing how it handles deep nesting patterns. To show some capabilities of style sheet torture demo page that is analogue of MathML torture tests and stress page that contains collection of meaningless expressions intended to check different nesting patters were prepared. Demo pages are written in XML MAIDEN 2.1. At the moment style sheet works in Prince 5-6, Opera 9 and latest nightly builds of Mozilla (march 2007). Other browsers does not have sufficient CSS support yet (flawless support for inline-blocks and inline-tables is crucial for proper functionality of the present style sheet). Size:7K. Language: CSS2.1
Annotated Math Style Sheet
This is annotated version of universal style sheet that explains basic rendering technique and provides brief description of markup language itself. Style sheet needs to be updated to reflect recent changes. Size:66K. Language: CSS2.1
Default Math Style Sheet
Modified version of universal style sheet that assembles large brackets using bracket fragments from Unicode #x23a1-#x23ad range. Size:6K. Language: CSS2.1
Modified Math Style Sheet
Modified version of universal style sheet that in rendering of fractions relies on inline-blocks (not inline-tables). Size:6K. Language: CSS2.1
Box drawing enhanced Math Style Sheet
Modified version of universal style sheet that assembles large brackets using box drawing shapes from Unicode #x2502-#x256e range. Size:6K. Language: CSS2.1
Simplified Math Style Sheet
Modified version of universal style sheet that uses simplified approach in formatting of fences and operators. Size:4.7K. Language: CSS2.1
Table Free Math Style Sheet
Modified version of simplified math style sheet that eliminates inline-tables and uses only inline-blocks. Style sheet is not universal as under scripts with complex base are not handled properly. Size:4.5K. Language: CSS2.1
CSS2 Math Style Sheet
Modified version of simplified math style sheet that eliminates inline-blocks that are not allowed in CSS2 (they were introduced in CSS2.1) and uses only inline-tables. Style sheet is not universal as over scripts with complex base are not handled properly and sqrt element is not supported (radical construction can be used instead). Size:4.6K. Language: CSS2
Style Sheet for Articles
This style sheet can be used to format mathematical articles written in XML MAIDEN 2.1. It specifies general layout of article, performs automated numbering of headers, equations, lemmas, theorems, propositions, lists etc. Style sheet includes universal math style sheet that renders mathematical formulae. Size:10K. Language: CSS2.1
Alternative Style Sheet for Articles
Experimental version of style sheet for XML MAIDEN 2.1 articles that uses Prince CSS extensions that perform automated update of cross references. Size:10K. Language: CSS2.1 with target-counter() extension
Style sheets are gradually updated as CSS support in browsers grows stronger. At this stage it is better to use universal stylesheet. The rest have to be updated to reflect recent changes in Gecko.

XSLT Style Sheets

XSLT for MSIE
Since MSIE does not have sufficient CSS support to format XML MAIDEN 2.1 documents with pure CSS style sheets, one may try XSLT + CSS style sheet that can render most of XML MAIDEN expressions in MSIE. Style sheet is close to universal but is not universal as for example it can't handle underscripts with complex base. Works in MSIE 6.0 and mostly works in Opera 9 too (apart of radicals). Some examples are available. Size:7K. Language: XSLT 1.0
XSLT for XSL Formatters (mathematical part)
This XSLT style sheet converts XML MAIDEN 2.1 mathematical formulae to XSL FO. Output is compatible with Antenna XSL Formatter (at the moment other XSL formatters like RenderX XEP and Apache FOP do not support fo:inline-container needed to format complex formulae, Xinc supports fo:inline-container but fails to align it properly). Size:8K. Language: XSLT 1.0
XSLT for XSL Formatters (full style sheet)
This XSLT style sheet converts mathematical articles written in XML MAIDEN 2.1 to XSL FO 1.0. Output is compatible with Antenna XSL Formatter. Size:17K. Language: XSLT 1.0

Manuscript Authoring, Interchange and Delivery Environment

When designing universal math style sheet it turned out that existing mathematical markup languages in general and MathML 2.0 in particular do not fit well in the scope of CSS2.1 visual formatting model in sense that none of them admits existence of single universal style sheet that would be able to replace native browser side support and in this way would allow CSS rendering engines to format mathematical formulae without implementing additional mathematics oriented formatting mechanism. As a result need in new markup emerged and was addressed by designing XML MAIDEN markup language (XML Manuscript Authoring, Interchange and Delivery Environment). See annotated DTDs listed below for description of markup language.
Mathematics in XML MAIDEN 2.1 (Article)
Article that describes mathematical part of XML MAIDEN 2.1. Available in XML and PDF formats.
XML MAIDEN 2.1 DTD (Mathematical Part)
Mathematical part of XML MAIDEN 2.1 DTD. Markup can be used to represent complex formulae obtained by nesting and combining common mathematical expressions such as indices (arbitrary complex subscripts, superscripts, prescripts, under and over scripts), fractions (including arbitrary deeply nesting ones), operators (with arbitrary complex, multiple under and over scripts), fences, radical, matrices (including deeply nested ones, with markers), determinants, vectors and cases. Scope and capabilities of mathematical part of DTD are roughly aligned with those of Electronic Manuscript Standard and presentational part of MathML. This DTD captures basic structure of mathematical articles and admits universal CSS2.1 style sheet that can imitate native support without imposing limitations on nesting of mathematical expressions. Plain text version, as well as plain and annotatded DTDs are also available.
XML MAIDEN 2.1 DTD (General Part)
Document part of XML MAIDEN 2.1 DTD. It describes elements used capture general structure of scientific articles written in XML MAIDEN 2.0 (front matter, headers, sections, statements, paragraphs, references etc). Certain restricted subset of XML MAIDEN DTD is interoperable and suitable for rendering in current browsers. Full DTD however requires stronger CSS2.1 support. There is brief DTD tutorial for those who are not familiar with XML DTD. Plain text version, plain DTD and annotatded DTD are available too.
XML MAIDEN 2.0 DTD (Mathematical Part)
Mathematical part of XML MAIDEN 2.0 DTD. Plain DTD without annotations is also available. Both annotated DTD and plain DTD are available from OASIS schema registry.
XML MAIDEN 2.0 DTD (General Part)
General part of XML MAIDEN 2.0 DTD. Plain DTD without annotations is also available. Both annotated DTD and plain DTD are available from OASIS schema registry.
XML MAIDEN 1.1 DTD
Old version of XML MAIDEN (1.1) imposes strict limitations on nesting of mathematical expressions. Versions 1.1 and 2.0 can be considered as completely different markup languages as DTD was rewritten from top to bottom in order to remove nesting restrictions. Annotated version of old DTD is also available.
Frequently Asked Questions
Some common questions about math oriented CSS style sheets, XML MAIDEN markup language and related stuff.
XML MAIDEN News
Latest news from math front. Project status updates and information on related CSS activities.

Document Type Declarations

Generally speaking it is not necessary to attach document type declaration to XML MAIDEN documents, however for validation purposes one may use the following document type declarations
XML MAIDEN 2.1 Article
]]>
XML MAIDEN 2.1 Standalone Mathematical Formula
]]>
XML MAIDEN 2.1 Standalone Equation Array
]]>
XML MAIDEN 2.1 Standalone Inline Mathematical Formula
]]>
XHTML 1.1 with embedded XML MAIDEN 2.1 Formulae
]]>
Some examples of XML MAIDEN documents with explicit document type declaration are available.
Here we decided to collect some side products of XML MAIDEN project that are either based on XML MAIDEN, use the same rendering technique or are related otherwise.
UserJS for MathML 2.0 Presentational Markup
Experimental version of MathML UserJS implementation. Can be used to simulate MathML support in Opera 9.0 or later. At this stage it is incomplete, but recent changes in Presto that may end up in Kestrel release should drastically simplify formatting of maths with CSS and allow us to ship UserJS with better MathML support.
M7 Markup
XHTML extension with limited capabilities that can handle only for simple fractions, simple indices and operators (no matrices, no nesting). Good toy to play with, otherwise not much useful.
MAIDEN in LaTeX
Experimental LaTeX to XML convertor that uses XML MAIDEN as output format. Converter is written in EcmaScript + DOM and can be used offline. Only limited subset of LaTeX notations used today is supported, low level TeX commands are not recognized.
XSL-TeX Experiment
The idea behind XSL-TeX was to develop experimental LaTeX like mathematical markup that fits well in X(HT)ML + XSLT + CSS, X(HT)ML + XSLT + XSL FO and X(HT)ML + JS + CSS frameworks. Basically it is just experiment intended to find out whether it is worth to send non-XML input to browsers, as well as CSS and XSL formatters. It seems like it is not worth, at least both XSLT and JS covertors are too slow.

About this site

This site is maintained by George Chavchanidze. If you have any questions or comments regarding markup language, fill free to drop a message to

ΜΑUΡ@ΧΜL-ΜΑIDΕΝ.CΟΜ

To protect аddress from spаmmers it is partly written in Greek, so don't copy, retype in lowercase Latin

Last modified on 20:12 04.03.2007