CSS Figures: responsive newsmag in 10 lines of CSS

By combining multicolumn layout with CSS figures, some amazingly beautiful, scalable and responsive pages can be built. This page shows screenshots from Opera's WebKit-based implementation, along with links to the actual HTML page [1]. The CSS code is very simple: each of the sample documents below use at most 10 lines of CSS code. No media queries are used to achieve the effects showcased. The images show the same HTML document in various viewport sizes. Notice that there are no scrollbars. Instead, pages are discrete and user move from one to the next with a finger/mouse/pgdn/pgup.

2 3 5 6 6 6 6

On this page, a basic multicolumn layout has been adorned by text and image elements that span several columns. Also, the images (along with the textual description) float to the top and bottom of the page. Notice how the images move to the next page(s) as the size of the window gets smaller. The number of columns also decrease. Here's the code:

body { overflow: paged-x }  /* described in CSS Overflow */
article { columns: 10em }
.lead { column-span: 2; float: top }
h1 { column-span: 4; float: top }
.fig { column-span: 2 }
.fig img { width: 100% }
.first.fig { float: bottom }
.second.fig { column-span: 3; float: top; float-defer-column: last }
.third.fig { column-span: 1; float: bottom  }

PDF version can be generated Prince and AntennaHouse from a prefixed version: landscape, portrait. The prefixed version also works in Opera 12. The test case is inspired by a real-world newspaper article.

8 9 10


In the salty screenshots on the right, one image spans the full width of the screen. The headline spans two colums. When there is only one column left, the headline naturally only uses one column. Here's the code:

body { overflow: paged-x }   /* described in CSS Overflow */
article { columns: 14em }
.fig { float: bottom; clear: column }
h1 { float: top; float-defer-column: last; column-span: 2 }
img#sail { column-span: all; float: top }

And here's the document.



The screenshot on the right are from two different pages where images are either in their natural position, or where images are snapped to the nearest edge. The images are initially placed in their natural position in the flow. However, if the images end up being close to either the top or bottom edge, the image will snap to the edge. This way, one can avoid (a) white-space at the bottom of columns, and (b) widows/orhpans between images and edges. Here's the seminal code:

img { float: snap(100px, near); width: 100% }

The snap() function is described in CSS Figures.

17 19


On this page, one page float contains the contact information for Watson and Crick. It it floated to the lower left corner in a two-column layout, and at the bottom of the one-column layout. Here's the seminal code:

.note { float: bottom; border-top: thin solid black; margin: 0.3em 0 0; padding: 0.4em 0 1em }
12 13

Magazines go nuts

A background image on a this page suddenly makes it look like a magazine.

[1] Implementations used to create the screenshots and PDF files linked from this page support a slightly different set of keyword values than shown on this page.

Håkon Wium Lie