CSS Exclusions Prototype by Adobe Web Platform

Contents

This document briefly describes the properties from the the CSS Exclusions editor's draft that has been prototyped so far.

Definitions and concepts

Content shape: the interior of the shape defined by a wrap-shape, clipped by the content-box.

Exclusion: the exterior of the shape defined by a wrap-shape, not clipped by the content-box.

Shapes and exclusions

-webkit-wrap-shape

The -webkit-wrap-shape property is used to define the boundary in which to flow content. The -webkit-wrap-shape property is also used to define the area to be avoided when laying out content. Whether content flows inside or around the shape depends on the wrap-shape-mode property.

The prototype implementation lets you specify a wrap shape as a polygon in a series of x,y points in coordinates relative to the containing box.

Example

<style type="text/css">
#content-shape{
    height:200px;
    width:200px;
    -webkit-wrap-shape: polygon(0px,0px 200px,200px 0px,200px);
    -webkit-wrap-shape-mode: around;
}		
</style>

<div id="content-shape">
    <p>I do like triangles, don't you?</p>
</div>
-webkit-wrap-shape-mode

The -webkit-wrap-shape-mode property can be set to 'content', 'around' or 'none' (the default). 'none' means this element ignores all wrap shapes. If set to 'content', the content in the element will flow inside its own wrap shape and around any other wrap shapes, but that wrap shape will not affect any outside element. If set to 'around', then the wrap shape fully affects both inside and outside content.

Example

<style type="text/css">
#triangle-exclusion{
    height:200px;
    width:200px;
    -webkit-wrap-shape: polygon(0px,0px 200px,200px 0px,200px);
    -webkit-wrap-shape-mode: around;
}
#content{
    -webkit-wrap-shape-mode: content;
    width:40%;
}
</style>

<div id="triangle-exclusion"></div>
<div id="content"><p>The outside of a triangle provides a good slope for content to fall down.</p></div>
-webkit-wrap-shape-order

Exclusions only affect the block elements that have an equal or smaller -webkit-wrap-shape-order number. The values can be both positive and negative. The default value is 0.

Example

<style type="text/css">
#triangle-exclusion{
    height:200px;
    width:200px;
    -webkit-wrap-shape: polygon(0px,0px 200px,200px 0px,200px);
    -webkit-wrap-shape-mode: around;
}
#defaultOrder{
    -webkit-wrap-shape-mode: content;
    width:40%;
}
#higherOrder{
    -webkit-wrap-shape-mode: content;
    -webkit-wrap-shape-order: 1;
    width:40%;
}
</style>

<div id="triangle-exclusion"></div>
<div id="defaultOrder">
  <p>This div will be affected by the wrap shape with a default wrap-shape-order of zero.</p>
</div>
<div id="higherOrder">
  <p>But this div will ignore the wrap shape, because its wrap-shape-order is higher.</p>
</div>
-webkit-render-wrap-shape

Using -webkit-render-wrap-shape: auto shows the wrap shape for an element. This is for debugging purposes only and is not part of the CSS Regions Editor's draft.

Example

<style type="text/css">
#triangle-exclusion{
    height:200px;
    width:200px;
    -webkit-wrap-shape: polygon(0px,0px 200px,200px 0px,200px);
    -webkit-render-wrap-shape: auto;
}
</style>

<div id="triangle-exclusion"></div>