Adding Features to Your Game - Learn HTML5 by Creating Fun Games - page 320

CSS to render text from a given source into three separate div elements, along with
an arbitrary SVG polygon. Each of these elements need not be related in any par-
ticular way—one can be absolutely positioned, one can be transformed, and so on.
The text would then flow from one element into the next, following the order in which
each element is defined within the HTML file. Exclusions, on the other hand, do the
exact opposite. Instead of defining areas where text flows into, they describe areas
or shapes where text is to go around.
The whole reason for these two separate, yet closely related APIs, is to push the
envelope of where we can take the visual design of web applications. Until now, the
only way to achieve this sort of effect was through external software, and hopefully a
very specific plugin that allowed such software or technology to be executed inside
a browser. Now that the browser has grown a bit more mature, we can pull off these
magazine-like effects right from the stylesheet.
Regions
The way regions work is somewhat similar to columns, yet it is fundamentally differ-
ent. In general, all that regions do is specify a content source, then assign a CSS
expression as the destination of that content. The content is moved from the element
specified as the source and flowed into all elements assigned as destinations. If one
or more elements don't receive any content because there wasn't enough content,
these elements will behave just like a regular empty element. Other than the CSS
property that identifies an element as a destination, there is nothing else about that
element that is different from any other regular HTML elements.
<style>
h2, p {
margin: 0 0 10px;
}
#src {
flow-into: mydiv;
}
.container {
flow-from: mydiv;