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. Finally, it defines new ways of specifying shapes for all of these applications.

1.1. Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

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 sections.

4.1.1. The shape() Function

Add the final level 1 section.

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. Fetching external shapes

To fetch an external resource for a shape, either an SVG or an image, given a CSS style declaration declaration, fetch a style resource given a value, with ruleOrDeclaration being declaration, destination "image", CORS mode "cors", and processResponse being the following steps given response res and null, failure or a byte stream byteStream: If byteStream is a byte stream, apply the image or SVG to the appropriate shape-accepting property.

Note: shapes require CORS mode as their effect is detected by the document.

8. Shapes from Box Values

Add the final level 1 section.

9. 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>

9.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.

9.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.

Name:	shape-inside
Value:	auto | outside-shape | [ || shape-box ] | | display
Initial:	auto
Applies to:	block-level elements
Inherited:	no
Percentages:	n/a
Computed value:	computed lengths for , the absolute URL for , otherwise as specified
Canonical order:	per grammar
Animation type:	as defined for , otherwise discrete

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.

The shape is computed based on the values of one of the functions.

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

If the 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.

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.

improve the illustration above, using text to show overflow instead of grey 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.

9.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.

9.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.

9.5. The shape-margin property

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

9.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.

Sets the padding of the shape to the specified value.

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.

Privacy Considerations

No new privacy considerations have been reported on this specification.

Security Considerations

No new security considerations have been reported on this specification.