running words around
design education and visual communication
authored by chris m hughes

Getting Wrapped Up in CSS3 Exclusions

Sunday, 1 January 2012

With the introduction of multi-columns*, CSS3 took the first positive steps towards a complete emulation of print layout on the web. This has been further enhanced by the rather amazing css3 exclusion and region properties which are currently in draft form specification.

Exclusions allow inline content to be wrapped around or within other div's and classes using CSS properties - in other words, real text-wrapping. This can also be extended to shapes, giving us some of the effects we normally associate with text envelopes and shape wrapping.

The Regions properties allow designers to create true threaded text in the same manner as can be achieved in InDesign. This will be especially useful in responsive design where layouts need to rte-oriented (for example in an iPad).

In the meantime, its the Exclusion property which is more easily applicable on any kind of website.

CSS Exclusions - Wrap-Flow
For these exclusion, or text-wrapping effects, the property is the rather beautifully named 'wrap-flow', and the various values it can be assigned run the gamut from simple to complex text-wrapping, equal to anything InDesign can muster.

Let's say you have a quote and you want to wrap the rest of an article around it. You create an absolutely positioned div that is set relative to the article, and drop the quote into it. A wrap-flow value is then assigned to the positioned div, and the result will be a text-wrapping effect you normally associate with print.

The wrap-flow values are: auto, left, right, maximum, both, and clear.

The wrap-flow default value is 'auto', the result of which is that no text-wrapping is applied between elements in a columned layout. The others are as self-explanatory, And here is an example of how wrap-flow looks in practice, with a div called #extract wrapped up inside an article and with a value of both -

The best description (and examples) I've been able to find about the new exclusion properties comes from a great article on Adobe's Devnet.

At this stage, I wouldn't recommend implementing these techniques on client projects - the browser support is till an issue, but if you really need textwrapping to work there is also a cool jquery solution - JQSlickWrap - which allows for complex textwrap around shapes and text blocks.

*For examples and resources on multi-column CSS3, see my post from March 2010.