CSS & X(HT)ML Matrices

Original Experiment Date
early 2004 (possibly prior)

The best method for displaying mathematics on the web is a controversial issue, and several alternatives to using MathML have been developed. A possible approach to displaying mathematical equations is the combination of XHTML and CSS. In this field a major effort is being undertaken by George Chavchanidze who offers the XML-MAIDEN DTD, along with core math stylesheets and JavaScripts that transform, for example, LaTeX syntax into XML+CSS equivalents.

An important requirement is the ability to display matrices correctly. Using CSS and XML I developed a technique for creating matrices and vectors. At the time of the experiment it was unique in the sense that it also supports the corners which are used for notating matrices on paper. However, the method later developed by George Chavchanidze is more elegant as it makes smart use of table border-collapsing (annotated stylesheet). My approach is still interesting in the way the desired visual effect is achieved: position generated content as to obscure part of the border of the parent element.

The XML page makes use of practically the same code as the XHTML one, only the sections with matrices uses custom tags. To give the page a proper layout though, I have created an XML-to-XHTML stylesheet which emulates Opera's internal UA stylesheet.

See matrices in HTML and matrices in XML.
The code, especially for the XML sample, is very small, the markup scales well and it groups information in vectors, and not in rows, which makes it semantically superior over tables.
Only Opera properly supports display:inline-table; and CSS generated content, and consequently the design is severely broken in other browsers. The required CSS depends on the background-color of the page and is therefore not applicable in a core math stylesheet.
Browser support
Opera 7+
This page was created to illustrate the use of CSS for matrices, during a discussion with George Chavchanidze and Håkon Wium Lie.

© 2003-2006, Mark Schenk.