印刷媒体では長い間、複雑なレイアウトを実現することが主な関心事だった。雑誌や新聞には物理的な制約があるので、複数列いまたがった文章に表や画像を組み合わせるような複雑なレイアウトが発明された。しかも、このレイアウトは組版の過程で動的に変更できる必要がある。CSS Regions ModuleとCSS Exclusions ModuleをW3Cに提案することで、Adobeはこのような複雑なレイアウトをウェブに持ち込もうとしている。
Arno Gourdol氏のプレスリリースによれば、この提案には4つの特徴が含まれている。
- スレッディングコンテント: ある領域から別の領域へ流し込めるコンテンツ
- 任意の形状のコンテナ: 矩形ではない領域へのテキストの表示
- 任意の形状の除外領域: 任意の形状でテキストを囲める
- 領域のスタイリング: 領域に依存して中のコンテンツをスタイリングする
複数の領域にコンテンツを流し込むには、CSSの“flow”属性を付加したdiv要素を使う。複数のdivを使う必要がある場合は、divのスタイルに“content: from(xxx);”という属性を付加する。xxxはflow属性の名前だ。こうすると各div内が満たされるようにして、コンテンツがdivに流し込まれる。
矩形ではない領域を使うには、wrap-shape属性とwrap-shape-mode属性を使う。現在、wrap-shape属性はポイントを指定することで多角形の形状を定義できる。しかし、“その他の幾何学的原型で形状を定義することも、画像のアルファ値を使って定義することもできるかもしれません。”.
除外領域はテキストを表示しない領域だ。これもwrap-shape-mode属性で実現する。ただし、“content”ではなく“around”を指定する。
WebKitのプロトタイプではまだ利用できないが、Adobeは領域のスタイリングも計画している。例えば、下記の画像では、同じコンテンツを表示している領域でも、最初の領域のフォントサイズが大きく、色も異なっている。
Note: The above image is Copyright © 2012 Adobe Systems Incorporated