Bert Bos | Complex layouts: can we push the limits of CSS? | 9 May 2012

Complex layouts: can we push the limits of CSS?

Cascading Style Sheets

Some layout challenges for CSS, extrapolated from published printed material

Bert Bos (W3C) <bert@w3.org>

9 May 2012


For any layout feature, As long as there is a simple model and syntax for CSS, it is easier for users to bypass XSLT*

* or a similar tool


To create…Use…
ToC XSLT, hxtoc, Module postprocessor, perl…
Index XSLT, Module preprocessor, hxindex…
Table-like layout CSS (grid)? or XSLT (+flexbox)?
Connected regions CSS? or XSLT? or both?

CSS process

HTML and CSS combine to produce a rendering

CSS process

A transformation of HTML and CSS combine to produce a rendering

CSS process

HTML and the output of a CSS preprocessor combine to produce a rendering

CSS process

HTML and transformation of CSS combine to produce a rendering

CSS process

HTML (possibly transformed and CSS (possibly generated and/or transformed) combine to produce a rendering

Templates – basic idea



Historically, the first time this was proposed, the outcome was absolute positioning. Not quite what the inventors (Dave Raggett, Håkon Lie and Bert Bos) wanted, but the only possibility in those days of browser wars and immature browser technology.

In 2004, the Device Independence Working Group was looking for a standard way to easily create layouts for different screen sizes: varying the number of columns, creating designs that resemble “stacks of cards”, and capturing the idea of a “portal” (several independently authored mini-documents assembled into a single layout).

Its members had been relying on proprietary HTML postprocessors, but because those had to run on the server, what went over the “wire” was non-semantic HTML. They were hoping the layout could be done with CSS instead. And so we revived the old idea of templates (originally called “frames,” before Netscape adopted that name for something else).

Discussions in the CSS WG led to dropping the stack-of-cards idea, for lack of immediate interest from members of the CSS WG. (In 2012, a solution for card deck layout is still missing…)

Templates – second idea

Grid Layout added two more ideas:

(Absolute positioning is rarely needed anymore once you have template-based layout. But the with keywords next and same for the position, it is still useful to create a table-like layout with an a-priori unknown number of elements, e.g., to make column-major tables.)

Sushi demo

Three rows, four columns, two
   spanning slots: A demo by Jina Bolton

(NB. Uses syntax from an older draft. Prototype implementation by César Acebal.)

Challenge 1: a simple grid?

Scanned page with four columns

Challenge 1: HTML source

<H1>Guide</H1> ← running header
<H2>Livres</H2> ← running header

<H3 ID=jacquemart>Un florilège français</H3>
<P><IMG SRC="..." ALT="..."> ← move up
<P>Directrice de recherche...
<P CLASS=signature>G. B. ← reverse run-in
<P CLASS=info>Le musée Ja... ← bottom-aligned

<H3 ID=versailles>Versailles...
<P><IMG SRC="..." ALT="...">

Challenge 1: CSS rules

BODY {grid: "aceg"
#jacquemart + P {flow: a} ← image
#jacquemart     {flow: b} ← heading
#jacquemart ~ * {flow: b} ← rest of text
#versailles + P {flow: c}
#versailles ~ * {flow: d}
#versailles ~ * {flow: d}
#hittorf + P    {flow: e}
#hittorf        {flow: f}
#hittorf ~ *    {flow: f}
#planque + P    {flow: g}
#planque        {flow: h}
#planque ~ *    {flow: h}

Challenge 1: other solutions?

With multicol/GCPM:

H3 {break-before: always}
H3 + P {float: column-top; height: 12em}

With XSLT & flexbox

DIV.container1, DIV.container2,
DIV.container3, DIV.container4,
DIV.container5... {display: flexbox}

Challenge 2: column span

Four articles occupying different
   parts of a four-column layout

There is no solution for the color inversion in any of our drafts yet. The overlap itself is also tricky, but a negative margin or an overflow can probably do it.

If we consider the top right article as a single region with a 'columns: 3' property, then the top-right image spans two columns. This is a reasonable extension for multicol. As an alternative, the three columns and the image can also be seen as four separate regions, three of which form a chain.

We have no way to guarantee that an element (or border) has exactly the height of the digits of a font, but if we can be reasonably sure of the font (thanks to Web fonts), it is probably OK to measure the font on server side.

Similarly, the kerning in the page header is probably a question of setting a fixed negative margin.

To fill all columns exactly to the bottom, there has to be some flexibility to exploit. The space between the paragraphs could be made stretchy (as in TEX), and the images could be cropped slightly differently. But we have no such features in any CSS draft yet.

The rules between the columns can be made in several ways: as borders on the slots ('::slot()' pseudo-element), or as narrow slots filled with a black background.

Challenge 2: CSS rules

grid: 15em *  *  *
       "a  .  e  e"
       "a  b  e  e"
       "a  b  c  d"
       "a  .  .  ."
       "a  f  f  i"
       "a  g  h  j";
chains: b c d, g, h;

Variant: include the gaps between the columns explicitly in the template.

Mentioning g and h as singleton chains is redundant: every slot not mentioned in the 'chains' property would automatically be a chain by itself.

Challenge 2: other solutions?

Multicol with spans:

::slot(p) {columns: 3}
::slot(q) {columns: 2}
#maquette img {float: top-corner;
  column-span: 2}
#broderies {column-span: all}

Challenge 3: column float

Simple 3-column article, except for
   the floating image at the top of the middle column

Challenge 4: centered floating images

Three columns of different widhts and
   2 images vertically centered in the middle of the text column

Challenge 5: mixed horizontal & vertical

Horizontal and vertical slots, some
   with columns

::slot(a) {writing-mode: vertical-rl}
::slot(b) {writing-mode: horizontal}

Difficult to model with multicol, but can be modeled with chained slots.

Challenge 6: manuscript ☺


Challenge 7: seven different sets of slots

Seven different pages show seven
   different ways to inscribe slots on the same 6 by 5 grid

@page p15 {
  grid: "ABBCCC"

Grid Template Layout – summary, May 2012 (1/2)

Grid Template Layout – summary, May 2012 (2/2)

Grid Template design

See section “History” in editor's draft (May 2012)