Mathematics layout in CSS

W3C Working Draft 30 October 1999

This version:
David Carlisle, <davidc@nag.co.uk>
Angel Diaz


This is a proposal for Mathematics layout in CSS. It is based on the Presentation Markup of MathML.

Status of this document

This document forms one part of a modular set of Working Drafts which will, when complete, define the next level of CSS.

The W3C Membership and other interested parties are invited to review this public specification and report implementation experience. Please send comments to the publicly archived list www-style@w3.org (archive). We welcome experimental implementation experience reports, although the CSS Working Group will not allow early implementation to constrain its ability to make changes to this specification prior to final release.

This Working Draft may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.


The goal of this draft is to describe a CSS syntax for Mathematics layout that is compatible with Presentation MathML, and also with proposed Math Formatting Objects for XSL.

Adding Mathematical support to CSS may be compared with adding table support. Firstly some new display properties (corresponding to new XSL Formatting objects) must be added to support the various layout schema required for mathematics. (Supercripts, fractions, fences, etc.) For CSS these are realised as new values for the 'display' property. Secondly new properties are defined to control the layout of elements in each of these layout schema.

Needs changing to have less visually-oriented language.

The MathML/CSS Math Model

The CSS model does not require that the document language include elements that correspond to each of these components. For document languages (such as XML applications) that do not have pre-defined table elements, authors must map document language elements to table elements; this is done with the 'display' property. The following 'display' values assign table semantics to an arbitrary element:

display-math (In MaML: math, with mode="display" )
Specifies that an element defines a block-level Mathematical expression: it is a rectangular block that participates in a block formatting context.
inline-math (In HTML: math, width mode="inline")
Specifies that an element defines an inline-level mathematical expression: it is a rectangular block that participates in an inline formatting context.
math-token (In MathML: mi, mn)
Specifies that an element is a Math token element.
math-operator (In MathML: mo)
Specifies that an element is a Math operator element. Certain characters, such as `(' may be stretched by visual UA so that they have a vertical extend governed by an ancestor element (which will normally be an explicit or implied math-row). This is usually the parent element but some elements are ignored for the purposes of determining the size of operators, see MathMl Recommendation (Decorated operators).

math-operator could possibly be combined with math-token, but has different default spacing behavior, and stretchy character behaviour.

math-row (In MathML: mrow)
General grouping element for inline math constructs.

MathML mspace covered by other CSS properties<.p>

math-frac (In MathML: mfrac)
Layout scheme for fractions.
math-root (In MathML: msqrt mroot)
Layout scheme for square roots and other radicals..
math-text (In MathML: mtext, ms)
Specifies that an element is a Math text element (ie a span of no-mathematical text..

The MathML ms element may be simulated as math-text with suitable properties set to select monospaced font and to insert " (or other characters specified by the MathML mquot and lquot attributes).

MathML style element just a handle on which to hook CSS properies.

MathML mphantom is obtainable by setting standard CSS properties

MathML mpadded is obtainable by setting standard CSS properties

math-fenced (In MathML: mfenced)
Specifies that the child elements are to be `fenced' with the characters specified by the appropriate properties.

In MathML an mfenced is always strictly equivalent to an mrow and one or more mo operators, however it may make sense to retain the fenced display property in CSS as the re-arrangement to the equivalent mrow may not be possible to specify in CSS.

math-subsup (In MathML: msubsup, msub, msup)
Specifies that an element that has super and sub scripts.
math-multiscripts (In MathML: multiscripts, msubsup, msub, msup)
Specifies that an element that has super and sub scripts.
math-underover (In MathML: munderover, munder, mover)
Specifies that an element that has under or over decoration.

mtable probably does not need a CSS equivalent given the inline-table model if the table model can by extended to support malignmark constructs.

maction probably needs integrating and/or reworking to fit current thinking on event models

Additional Properties

Elements declared to have one of the above display properties may have additional properties set (in addition to standard CSS properties). Note that MathML, and therefore this CSS Math Model, makes great use of the ordering of child elements. For example in an element of display class math-fraction, the first child is the numerator and the second child is the denominator. There are no specific 1numerator' or `denominator' child elements. Thus it is expected that most of these properties will be set using the proposed CSS 3 :nth-child pseudo-class selector.

The following list is not complete or fully worked out.