CSS help

The web has become a rich repository of content for reference and educational materials, news, articles, and interactive apps. However, some of the capabilities that are taken for granted when designing content for print are still impossible or very difficult to implement using web standards.

Print publications are exploring better ways of translating and adapting their content to a rich digital format. We see this as an opportunity to make the web more expressive and to support more sophisticated layouts.

Adobe has been experimenting with some improvements to CSS to express the kind of complex layouts used by traditional magazines. We have submitted some proposals to the W3C CSS Working Group, and we have built a prototype implementation of these proposals using WebKit. You can download the prototype from Adobe Labs and try it out. You can find the W3C Editor’s drafts on the CSS Regions Module and the CSS Exclusions Module pages on the W3C website. Discussion on these proposals take place on the W3C CSS mailing list. You are welcome to send comments to this public mailing list. Please include “[css3-regions]” or “[css3-exclusions]” in your message’s subject.

You can also send us feedback on our WebKit-based prototype and our samples on the CSS Regions forum on Adobe Labs.

A few caveats: This is a work in progress. As we continue the discussion with the broader community, we will be making some changes. The syntax used in this article reflects the state of the current W3C Editor’s drafts, but it will probably evolve as the discussions in the W3C CSS working group and with the broader community continue. Note also that, in accordance with common practice, all the new proposed properties are prefixed with “-webkit-” in our WebKit prototype. For the sake of simplicity, I have omitted this prefix in the rest of the article.

Now, let’s dive into the proposed extensions. They can be divided into four categories:

• Threading content: Content that flows from one area to another.
• Arbitrarily shaped containers: Text displayed in non-rectangular areas.
• Arbitrarily shaped exclusions: Text can wrap around arbitrary shapes.
• Region styling: Styling content depending on the area in which it flows.

Below are some simple examples of each.

In a typical HTML document, text can be displayed in multiple regions, but the text in each of those regions is independent (see Figure 1). If you wanted to display text across multiple columns, or use other more complex arrangements of areas you would need to manually fit the text in each region. This would not work very well when users magnify the text, or even if they have different fonts on their systems than the ones you specified. This approach also makes it impossible to have fluid layouts that adapt when the window is resized, or, when displaying content on a tablet, adapts to portrait and landscape orientations.

Figure 1. Text displayed across three columns of different widths.

What if you could specify separately a thread of content (like text and images), and how that thread should flow across a chain of regions? This is what content flow does.

To use it, give a name to a thread by using the proposed flow CSS property to the region that contains the content. Doing so will remove the content from the normal CSS layout flow. You can then insert this thread in one or more other regions, by using the from() function as the value of the content property.

The markup for the three-column example above would look something like this:

CSS

HTML

You can combine multiple named flows on a single page. You can also explicitly control the order in which the text is flowed using the content-order property. If it’s not specified, the normal document order is used instead.

With this simple building block, you can represent more complex layouts, including multiple columns of text, columns of different width and height, and regions that span multiple columns (see Figure 2).

Figure 2. Text flowing across stacked regions and columns.

With wrap shape, you can control the shape of the region in which text is flowed (see Figure 3). You can use this property in conjunction or independently from content flow to create more interesting designs.

Figure 3. Text content flowing inside custom shapes.

To use this feature, you need to define the shape itself, using the wrap-shape property, and set the wrap-shape-mode property to the desired value. By specifying a value of content the text will be displayed inside the shape.

The markup to display the heart-shape text above would look like this:

CSS

HTML

Our WebKit-based prototype supports specifying a shape using a simple polygon, but you could imagine that other geometric primitives could be used to specify the shape, or even using the alpha values of an image. This is being discussed in the W3C working group.

By using different values for the wrap-shape-mode property, you can create different effects, including specifying that the wrap-shape property should be interpreted as an area to be avoided altogether (see Figure 4).

Figure 4. Text flowing around custom shapes.

CSS

HTML

It is common in magazine articles to assign a different style to content flowing through a particular area of the design. We are calling this region styling. The example shows that text flowing in the first region (which includes the “Introduction” header) is made dark blue, whereas the rest of the text is gray (see Figure 5).

Figure 5. Text style depends on the region it flows into.

CSS

HTML

Region styling is not yet implemented in the WebKit prototype that is currently available on Adobe Labs.

Those basic building blocks can be combined to create more interesting and complex layouts, similar to what you are used to seeing in a print publication. You can also combine these with other web standards. For example, by using these features in combination with CSS media queries, you can build layouts that can adapt to different device orientations, portrait and landscape.

Figure 6 shows using the wrap-shape property in combination with CSS3 media queries to have a layout that adapts to different orientations.

Figure 6. Using the wrap-shape property in combination with CSS3 media queries to have a layout that adapts to different orientations

Figure 7 shows how the same content can be authored to adapt to different orientations, including varying the number of columns.

Figure 7. Content authored to adapt to different orientations, including varying the number of columns.

You can also combine these capabilities with JavaScript to create interactive content. In the example shown in Figure 8, you can slide the double arrow to pan around and reveal more of the image. As you do this, the text reflows around the shape of the mountains and the car.

Figure 8. You can slide the double arrow to pan around and reveal more of the image—the text reflows around the shape of the mountains and the car.

This example is included in the prototype you can download from Adobe Labs. I invite you to download it to try it out for yourself. I’m really looking forward to see the creative ideas you will be inspired to build with our proposal, and I’m looking forward to working with you to build a better web.