CSS3: InDesign-Like Text Formatting with Exclusions and Regions

It's Adobe again. They made two proposals to a coming standard, which would lead to the possibility to format and present texts on websites just as we already know it from DTP software such as InDesign. With Exclusions we will be able to let text flow in any shapes and forms, while Regions will allow us to split texts between two or more HTML elements. Adobe and HTML: Dreamteam?

Put Your Texts to Shape with CSS Exclusions

Texts in HTML are limited to a rectangular base form. In print design we are long used to the possibility to let texts flow along random shapes or even have texts form into shapes. There are JavaScript solutions to imitate this behavior, but up to now there never has been a possibility to achieve such effects using pure CSS and HTML. CSS Exclusions is the name for two new CSS properties that allow just that. Besides rounded rectangles formed by texts, we can also create texts that make up circles, ellipses and polygons:

p {
  shape-inside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

With shape-inside we create the form that will contain the text. The property shape-outside, you might have already guessed it, will care for the other way round, having a text flow around a shape. In our example, polygon is used to define the coordinates of the shape. Each pair of percentage values stands for an X and an Y coordinate.

Split Texts into Many Blocks Using CSS Regions

With Regions, Adobe created a feature, that enables you to split texts into two or more HTML elements, a task perfectly common in print design. There we use a random number of text frames that we interconnect to have texts flow freely from one to another. That way you can split your text, though not really being physically divided into a multitude of tranches, into any number of sections and place these fragments wherever you see them fit in your layout. To work with Regions we start with one HTML element that contains the text as a whole. We assign a fixed height to that element which is not sufficient to have the text shown as a whole. Then we need at least one more element to have a target where ourt text shall flow to. Finally we define the direction of the text flow using CSS:

#text1 {
  flow-into: textflow;
  width: 200px;
  height: 300px;
}

#text2 {
  flow-from: textflow;
  width: 200px;
  height: 200px;
}

In our example the element with the ID text1 contains the whole text. Using the property flow-into we assign a random name to be able to re-identify the textflow (here textflow, great isn't it?). The element with the ID text2 does get the same name for the textflow as text2, with the difference that the property is named flow-form here. That way we defined the text from text1 to be floating further to text2.

Browser Support

CSS Exclusions and Regions are drafts in active development. No modern browser has support for them at this stage. If you want to get your hands on earliest you will want to install Chrome Canary, Google's developer version. Canary already supports Adobe's proposals.

Related Links

• Adobe and HTML

(dpe)