Monday, November 04, 2013

Using CSS Shapes to Enhance Visual Storytelling

CSS Shapes to  Enhance Visual Storytelling

Web designers have long been forced to create within the constraints of blocks. Since most daring ventures into non-rectangular layouts using regular CSS and HTML usually end in frustration, most of the content on the web is still trapped in simple boxes.

All that is about to change with the implementation of CSS Shapes, a new standard which allows web designers and developers to wrap content inside or around custom shapes. Shapes are defined in simple, practical, and reusable ways; most importantly, unlike most CSS hacks that just simulate shapes, they can affect the entire layout of a web page.

Building Alice in Wonderland

In order to demonstrate how custom shapes can enhance layout expressiveness on the web, we built a demo based on the story of Alice in Wonderland by Lewis Carroll. We teamed up with the French agency ultranoir which created stunning hand-drawn graphics for us which we integrated into a beautiful and evocative story.

On top of the carefully drawn landscapes and characters, we built an interactive HTML5 experience where CSS Shapes are used in key places to enhance the visual storytelling experience. We also employed a scroll-driven navigation model which keeps the reader engaged in a linear and gradual exploration of the content.

Text wraps inside and around custom shapes in unexpected ways for an HTML & CSS web page, enticing the reader to continue scrolling and discovering. Clever uses of custom shapes help support content at key points throughout the story.

Since our adaptation of Alice uses cutting edge web standards, it currently requires Google Chrome Canary with support for CSS Shapes enabled.

Expressive Layout

The first scene opens up with a curious Alice looking down into the famous rabbit hole. Using a shape-inside CSS property, the text wraps intricately between the outline of the girl and that of the tree. By varying the top margin of the content as the user scrolls, we achieved the effect of the text draining down the rabbit hole, enticing further exploration. This effect was simple to build with CSS Shapes and it demonstrates how the browser can quickly update content layout within a shape-inside.

The experience is extremely fluid because no JavaScript is used to control the text layout. The browser's native layout engine achieves much better performance when dealing with shapes for wrapping content.

Throughout the story, the content interacts with its surroundings in interesting ways. In some cases, the content wraps around the custom shapes of characters while also wrapping inside the layout of the rabbit hole. The scene with the Cheshire Cat falling is a good example: each instance of the cat uses the shape-outside property which makes the adjacent text wrap around the outline of the falling feline. Adjusting the position or size of the cat will automatically layout the content around it.

CSS Shapes to  Enhance Visual Storytelling

In the original story of Alice in Wonderland there is a scene where Alice has a conversation with the caterpillar smoking a hookah. The art direction we got suggested that the caterpillar's words might appear as puffs of smoke. This was a great opportunity to use animated shape-inside. As the scroll-driven dialogue between the two unfolds, the shape of the text container gradually animates giving the impression of smoke clouds floating up in the air.

CSS Shapes to  Enhance Visual Storytelling

This again demonstrates naturally occurring wrapping within a shape-inside with no JavaScript at all to directly adjust the layout of the text. There are several other uses of sophisticated shapes throughout the demo; in fact, there are no rectangular boxes used within the app at all.

CSS Shapes are designed to work well with existing CSS features. At the very end of the demo, the cat's head slowly appears in a carving between slanted blocks of text. These are actually two CSS Regions, each with their own shape-inside polygons. Editing or changing the font will not cause the text to overlap the cat's head due to the custom shapes which the text must respect.

CSS Shapes to  Enhance Visual Storytelling

Source and Support

The implementation of CSS Shapes is ongoing in WebKit and Blink. CSS Shapes is available in a few browsers, but it may not be turned on by default. To see which browsers support shapes — and to learn how to enable them — see Enabling Cutting-Edge Graphical & Layout Features.

The source code for the entire Alice in Wonderland demo is available on GitHub for you to peek at and explore. Simple examples, which are better suited for getting started with CSS Shapes, are available on CodePen.

Going Forward

Widespread support for CSS Shapes is coming soon. These are not one-off experiments or prototypes, but actual CSS features that passionate developers are working hard to implement in order to make sure the web keeps moving forward.

Shapes provides a whole new set of options for web designers to define content layout in creative, innovative and expressive ways which enhance the reader's experience. They are a giant leap forward in making the web browser a first-class design surface.

These features are long overdue on the open web, and we can’t wait to see what you will build with them.