# Matrices with XML and CSS

In a quest to display mathematics on the web, it was desirable to find a method to display matrices by means of X(HT)ML and CSS. Currently no real matrices can be created due to limitations in border styles, but a close attempt is possible. The approach outlined below allows ordening in columns (i.e. vectors) instead of rows such as tables, requires little markup and scales quite easily. It is however limited, because the border-colours have to be chosen with care.

This page is the XML example page and the elements for the matrices have been replaced by short and logical custom tags. So for instance a matrix is started with `<m>`

, a vector with `<v>`

and a cell with `<c>`

.

## Examples

The outer div with the borders is `display:inline-table`

(to allow multiple matrices on one line), the vectors are `display:inline-table`

(to allow multiple vectors in one matrix) and the cells are `display:block`

(which will force the cells to show below each other). In this setup both the vectors and the cells are coloured. Individual styling is always possible of course.

112131122231
11211222
=
112131122231

The next example uses transpose vectors to create rows. The rows are `display:table`

and the cells are `display:table-cell`

. It is to be solved for a vector.

111213212223ab

A difficulty here is the rows cannot easily be given a background-color, as possible with the vectors, because background-color won't apply to `table-row`

.

© 2003-2006, Mark Schenk.