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
.
I’ve waited for these features for years ! As much as I love new technology, anything that doesn’t have browser support at the time is a waste of time. It’s sad, but that’s the way it is when the web development is such a huge field of innovation.
That really sounds pretty cool ! Hope at least Mozilla and WebKit based browsers will soon add support for this !