Math Rendering Using Only CSS

William F. Hammond

revised July 16, 2014

It is now quite imaginable that the mechanism of Cascading Style Sheets (CSS) as a rendering aid for HTML pages in web browsers might eventually be developed to the point where, at least for a given mathematical font, it is adequate without the assistance of other processing for fine rendering of mathematics.

I have arrived at this conclusion after finding that it is possible to render “multiscripts” using the new provision for “inline-flex” styling in CSS. I exaggerate slightly in that a modification of the MathML content model for the MathML element mmultiscripts (that can be automatically reached from slightly restricted use of the regular content model) is needed to facilitate this, and there is a similar content model adjustment for the MathML element msubsup.

For a quick illustration I have provided a “clickable” screenshot

Image file: fscratchpicsm.png

of a bit of CSS flexible box scatter painting with some mathematical decoration. The screenshots are provided because it (this HTML document with only CSS for math) will fall apart badly in a browser that does not support recently developed CSS concepts. (Recent versions of at least three of the “big four” web browsers are good — modulo some undesirable cross-platform variations.)

Additionally CSS, again with a particular font, is sufficient for most rendering needs of what I call a LaTeX profile — see my talk at TUG 2010 and the write-up in TUGboat.

Viewing the following examples requires a browser that supports level 3 features of CSS, including the flexible box model, and that supports web fonts. Browsers I know to be good for this include recent versisons of Mozilla's Firefox,1 Google's Chrome, and Opera. A quick look may be had with the following screenshot, which highlights CSS flexible boxes with blue borders for “row” flex-direction and red for “column” direction.2

Image file: cssFlexEx.png

The small document behind this screenshot features examples of the use of CSS Flexible Boxes. There are three versions of this document differing from each other only in the linked CSS stylesheets:

demo math stylesame with flex highlightedno math style at all

For those interested there are more demonstration documents. Because not everyone will be able to see the examples below as they are intended to be seen, I'm posting two screenshots of a large portion of “Document 1-lm” taken on a GNU/Linux platform (Ubuntu 12.04.4 LTS), the first in Firefox 29 and the second in Google Chrome 36 beta.

 demo math style for HTMLdemo style for LaTeX profile
Document 1-lmodxmlcssex-lm.htmlxmlcssex-lm.xml
Document 2-lmodxmlcsspatches-lm.htmlxmlcsspatches-lm.xml
Document 3-lmodgfracalign-lm.htmlgfracalign-lm.xml
Document 4-lmodxmlcssborders-lm.htmlxmlcssborders-lm.xml
Document 1-xitsxmlcssex-xi.htmlxmlcssex-xi.xml
Document 2-xitsxmlcsspatches-xi.htmlxmlcsspatches-xi.xml
Document 3-xitsgfracalign-xi.htmlgfracalign-xi.xml
Document 4-xitsxmlcssborders-xi.htmlxmlcssborders-xi.xml

For this experiment the XITS fonts, which are available as webfonts, were my early choice. More recently I've taken a liking to Latin Modern, which is a unicode font available for web browsers, for LaTeX2E (with limitations) using the package lmodern, and for the unicode-capable TeX engines (xetex and luatex).

Also as this experiment has progressed, I have switched the emphasis of my attention from working with HTML to working with (the XML guise of) a LaTeX profile. There are three reasons for this:

  1. The best ultimately possible online rendering of mathematics is likely to be the rendering of MathML using the native facilities of a web browser such as we have had for 15 years with Mozilla and Firefox.

  2. It is not reasonable to hope that web browsers will provide native rendering of LaTeX profiles.

  3. The rich LaTeX-like vocabulary of a LaTeX profile enables more attention to small details than is easily possible with MathML in styling with CSS.

Because use of a webfont may be directed from a CSS stylesheet and because a webfont may be served through HTTP parallel to a CSS stylesheet, the restriction to a particular font is not especially burdensome. With sufficient standardization of fonts and sufficient development of CSS it is possible to imagine that in the future mathematical styling for fine rendering need not be tied to a particular font.

In fact, I've begun a wish list: Wishes for CSS.

The CSS code used for multiscripts is based on a revision, in DTD language, of the content model for the presentation MathML element mmultiscripts as follows:

<!-- ELEMENT mmultiscripts  - - (%PresExpression;)                 -->
<!ELEMENT mmultiscripts - - ((%PresExpression;)|(mmubase,mmupost,(mmupre)?)) >
<!ELEMENT mmubase - -         (%PresExpression;)                     >
<!ELEMENT mmupost - -         (%PresExpression;)                     >
<!ELEMENT mmupre - -          (%PresExpression;)                     >

The elements mmupost and mmupre are restricted to two children each, any of which may be mrow or mfenced elements so that there is no significant restriction on content. This does mean that the opportunity for vertical alignment, element-by-element, in the scripts and prescripts may be somewhat lost. However, with the commonly cited example of a tensor field, there is from the viewpoint of mathematics no reason for the number of subscripts to match the number of superscripts, and, regardless of that, classical typesetting standards have never provided such specific alignment. Moreover, if mfenced is used, there is semantic alignment.3

The CSS code for handling the multiscripts is this:

mmultiscripts {
  vertical-align: baseline;
  align-self: center;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
mmultiscripts > mmubase {
  order: 2;
mmultiscripts > mmupost {
  order: 3;
  font-size: 0.8em;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
mmupost > *:nth-child(1) {
  order: 2;
mmupost > *:nth-child(2) {
  order: 1;
mmultiscripts > mmupre {
  order: 1;
  font-size: 0.8em;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
mmupre > *:nth-child(1) {
  order: 2;
mmupre > *:nth-child(2) {
  order: 1;
mmupost > none, mmupre > none {
  height: 2ex;


  1. * These HTML documents use pseudo MathML that is formally an entirely anonymous foreign vocabulary in HTML5 so as to bypass any native knowledge of MathML that a browser might have.
  2. * In the present CSS styling for HTML, displayed mathematical boxes are also CSS flexible boxes with “row” direction, but in the present CSS styling for the demonstration LaTeX profile of the GELLMU didactic production system, displayed mathematical boxes have the CSS display value “block”.
  3. * This despite admonitions in the MathML specification that mfenced is never to be understood as more than profiled use of mrow.