CSS Shapes Module Level 2

1. Introduction

This section is not normative.

Level 1 of this specification defined properties to control the geometry of an element’s float area. This level defines how shapes apply to exclusions. It also includes a shape-inside property for applying a shape to an element’s content area. And finally it defines new ways of specifying shapes for all of these applications.

2. Terminology

Exclusion area

The area used for excluding inline flow content around an exclusion box. The exclusion area is equivalent to the border box for an exclusion box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular exclusion areas. The shape-inside property also defines an exclusion area, but in this case it is the area outside the shape that inline content avoids.

Float area

The area used for wrapping content around a float element. By default, the float area is the float element’s margin box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular float areas.

Content area

The content area is normally used for layout of the inline flow content of a box.

3. Shapes

Shapes define arbitrary geometric contours around which inline content flows. The shape-outside property defines the float area for a float, and the exclusion area for an exclusion.

4. Basic Shapes

Add the final level 1 section.

4.1. Supported Shapes

Add the final level 1 section, with the following integrated.

path() = path( [<fill-rule>,]? <string> )

• <fill-rule> - The filling rule used to determine the interior of the path. See fill-rule property in SVG for details. Possible values are nonzero or evenodd. Default value when omitted is nonzero.
• The <string> represents an SVG Path data string. The path data string must be conform to the grammar and parsing rules of SVG 1.1. The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1.

5. Referencing SVG shapes

An SVG shape can be referenced using the url() syntax. The shape can be any of the SVG basic shapes or a path element.

<style>
div {
	height: 400px;
	width: 400px;
}
.in-a-circle {
	shape-outside: url(#circle_shape);
}

.in-a-path {
	shape-outside: url(#path-shape);
}

</style>

<svg ...>
<circle id="circle_shape" cx="50%" cy="50%" r="50%" />
<path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" />
</svg>

<div class="around-a-circle">...</div>
<div class="around-a-path">...</div>

6. Shapes from Image

Add the final level 1 section.

One suggestion is to define a shape based on an element’s rendered content. This could have security implications.

Another suggestion is to add something to an image() function that determines the relevant pixels to use (both for defining a shape and for display).

7. Shapes from Box Values

Add the final level 1 section.

8. Declaring Shapes

A shape can be declared with the shape-outside property, with possible modifications from the shape-margin property. The shape defined by the shape-outside and shape-margin properties changes the geometry of a float element’s float area and an exclusion element’s exclusion area.

A shape can be declared with the shape-inside property, with possible modifications from the shape-padding property. The shape defined by the shape-inside and shape-padding properties defines an exclusion area that contributes to the element’s wrapping context. The shape-inside property applies to all block-level elements.

<style type="text/css">
.exclusion  {
    wrap-flow: both;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    shape-outside: circle(50% at 50% 50%);
    border: 1px solid red;
}
</style>

<div style=”position: relative;”>
<div class=”exclusion”></div>
Lorem ipsum dolor sit amet...
</div>

8.1. The shape-outside Property

Add the final level 1 section with the change that shape-outside applies to block-level elements and has an effect if the element is an exclusion.

8.2. The shape-inside Property

The shape-inside property adds one or more exclusion areas to the element’s wrapping context. This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion areas are defined by subtracting the shape from the element’s content area. Any part of the shape outside the element’s content area has no effect.

The values of this property have the following meanings:

auto

The shape is computed based on the content box of the element.

outside-shape

The shape is computed based on the shape defined by the shape-outside and shape-margin properties.

<basic-shape>

The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon().

<uri>

If the <uri> references an SVG shape element, that element defines the shape. Otherwise, if the <uri> references an image, the shape is extracted and computed based on the alpha channel of the specified image.

If the <uri> does not reference an SVG shape element or an image, the effect is as if the value auto had been specified.

display

The shape is computed based on the shape of the display as described in css-round-display.

The shape-inside property applies to floats.

The shape-inside property may not apply on some elements such as elements with a computed display value of table.

Effect of shape-inside on inline content.

Overflow content avoids the exclusion area(s) added by shape-inside and shape-padding (as well as any other exclusion areas in the element’s wrapping context). In other words, overflow continues outside the rectangular bounds of the element.

Overflow interacting with exclusion areas defined by shape-inside and shape-padding.

improve the illustration above, using text to show overflow instead of greeked boxes.

When a shape-inside has a definite size (no percentages used in the shape’s definition) an auto-sized element should use the shape as a constraint in determining its maximum size.

8.3. The shape-image-threshold Property

Add the final level 1 section with the change that it applies to both shape-inside and shape-outside.

8.4. The shape-image-source-type Property

Should we add an alpha/luminance switch to determine which values we use from the shape-image source? This could just be a keyword on the shape-image-threshold property. Whatever we go with should be compatible with the alpha/luminance switch from mask sources.

8.5. The shape-margin property

Add the final level 1 section with the change that it applies to exclusions.

8.6. The shape-padding Property

The shape-padding property adds padding to a shape-inside. This defines a new shape where every point is the specified distance from the shape-inside. This property takes on positive values only.

A shape-padding creating an offset from a circlular shape-inside. The light blue rectangles represent inline content affected by the shape created by the padding.

Note: The shape-padding property only affects layout of content inside the element it applies to while the shape-margin property only affects layout of content outside the element.