Meta

CSS Regions Auto-size

The CSS Regions implementation in WebKit has grown by an important but less obvious feature: it is now possible to have regions which auto-size themselves based on the constraints of the content that flows inside them.

Until recently, elements which are regions – the ones which have the flow-from CSS property – required the developer to specify explicit dimensions for the content to be renderd in them. This makes sense if you have complete control over the content that flows into the region, the region itself, the viewport size, the font-size the device orientation, resolution … you get the idea. Thruth be told, on the modern, adaptive and ever-changing web, developers don’t have the luxury of such absolute control.

Being adaptive is crucial and probably the best preparation for the unforeseen. Allowing CSS regions to auto-size plays an important role in adaptiveness because it gives the content a voice (pun indentend) when deciding its layout.

Use case

A good example where regions need to respect the content’s dimensions, not the other way around, is the layout of article titles. Breaking titles across multiple boxes is usually unwanted behavior. Setting fixed dimensions for the region with the title is also troublesome because this might cause the text to be cut-off if the font size is increased, for example.

Demo

Have a look at this demo of an auto-sizing region and peek at the source code. Keep in mind that auto-sizing for regions is still a cutting-edge feature. You’ll need a nightly build of Webkit.

Demo screenshot

Regions with fixed dimensions may cause the content to be cut-off.

Code sample

h2{
/* pull the title into a named flow */
flow-into: title-flow;
/* make sure the title is the only content in its region */
region-break-after: always;
}
#region1{
/* render the title content from the named flow */
flow-from: title-flow;
/* figure out the dimensions based on the content*/
width: auto;
height: auto;
}
#region2{
flow-from: title-flow;
/* fixed region height may cause cut-off */
height: 3em;
}

The algorithm that allows regions to pick their own size is described in detail on the CSS Regions W3C proposal. In a nutshell: the constraints on the content that flows into a region, such as region-break-after: always, as well as loose constraints such as max-height on the region itself, help compute how much space the region will take.

Auto-sizing regions help keep contextually related content from visually breaking apart across boxes – the default behavior introduced by CSS regions. Content such as titles, footnotes and pullquotes are prime candidates to use auto-sizing regions.