CSS Template Layout is not only for big grids

Slides

The CSS Advanced Layout module that is currently under development in W3C grew out of a need to easily create “portal” pages in HTML with different layouts on screens of different sizes, in particular on mobile phones. But it can not only create grids for positioning text boxes and images, but also create very small grids, such as for placing the elements of a mathematical formula.

This presentation shows how the same idea, the traditional layout grid, can be used at different scales, from a whole document or a printed page, via forms and GUIs, down to an inline formula.

The CSS rule to define a grid is typically only one line. And the grids are quite independent of the mark-up, which is what makes it possible, e.g., to render subscripts in MathML in front of a symbol, although they come after the symbol in the mark-up.

The Advanced Layout module thus promises not only to make the “visual semantics” of a document easier to express, but also to make the mark-up, which embodies the rest of the meaning, less dependent on the desired rendering.

The presentation includes a demo with a (partial) prototype implementation.