shape-outside

The shape-outside property is used to change the geometry of a float element‘s float area.

Changing an element’s float area means changing the way the content flows around the floating element. Every element on a web page is rectangular, and is seen as a rectangle by every other element on the page. So, even if you change the shape of an element by rounding it, for example, using border-radius, the content around the element will still flow as if the element is rectangular, not circular. Using shape-outside, you can change that, allowing content to wrap around a specified shape, instead of having it wrap around the old rectangular one.

For example, the following image shows an image that has been rounded using the border-radius property. It shows how the text flows around it without using shape-outside to change the float area, and then with using it.

The shape-outside property takes a <basic-shape> as a value. The basic shape is defined using a shape function, and is used to change the shape of the float area of the element.

The shape-outside property also accepts an image URI as a value. The URI should point to an image with alpha transparency. The browser will then extract the shape from the image and use it to change the float area of the element. Using an image, you can even define multiple shapes on an element, as the browser will extract all the shapes inside the image. You can’t define multiple shapes using shape functions; you can, however, do it using an image.

Prerequisites – Conditions That Need to be met in order for shape-outside to work

In order for the shape-outside property to work, these two conditions must be met:

• The element must be floated. The element whose float area you’re changing must be a float. Future levels of CSS Shapes may allow us to define shapes on non-floated elements, but that is not yet possible.
• The element must have intrinsic dimensions. The height and width set on an element will be used to establish a coordinate system on that element.

A coordinate system needs to be established in order for the shape-outside property to work. The reason behind this is that the <basic-shape>s used are defined by a set of points. These points are passed to the shape functions in the form of coordinate pairs. Because these points have coordinates, a coordinate system is necessary for the browser to know where to position each point on the element.

A Shape’s Reference Box

In addition to the basic shape function, the shape-outside property accepts a keyword that defines a shape’s reference box. The keyword defining the reference box can be used either on its own or in conjunction with a basic shape function.

A reference box is the box used to draw the shape on the element. In addition to the element’s height and width, the element’s box model boxes—margin box, content box, padding box, and border box—are also used as a reference to specify the extent of the shape on an element.

By default, the margin box is used as a reference—so, if an element you want to apply a shape to has a margin at the bottom, the shape you define on the element will extend to the edges of the margin area, not the element’s border area. If you want to use one of the other box values, you can specify it in conjunction with the shape function that you pass to the shape properties.

The following is a simple example defining a circular shape, and specifying the reference box along with it:

shape-outside: circle(15em at 10% 40%) padding-box;
                

The above code sample will define a circular shape on the element, within the bounds of the element’s padding area.

Trivia & Notes

Shapes applied to an element that has background images

Sometimes, defining a shape on an element and changing its float area isn’t enough to achieve the effect you may be after.

For example, suppose you have an element that has a background image, and you change the float area of the element using shape-outside. The content around the element floats around the shape you defined. All is good so far. However, one important thing to note at this point is that the shape property does not change anything about an element other than its float area. This means that any borders and background images will not adapt to the shape created on the element. So, even though the element’s float area changes, the content around the element may end up being on top of the element’s background image.

The following image shows an image that is a background image of an element with a triangular shape applied to it. The content flows around the shape as expected. However, the background image of the element remains rectangular because it is not affected by the shape-outside property.

In order “clip” the background of the element to match the defined shape, you can make use of a very useful CSS property from the CSS Masking module: the clip-path property.

The clip-path property can be used to literally clip parts of the element that we don’t need and keep only the parts inside the shape we defined. This is possible because of the fact that the clip-path property can take the same basic shape values as the shape-outside property, and also because the user coordinate system for the shapes defined by the clip-path property can be established using the same reference box used by the shape-outside property, so the two properties can use the same coordinate system, the same reference box, and the same shape functions.

If we were to recreate the example in the above image, and use the clip-path property to clip the element to the triangular shape, the CSS would look something like this:

.element {
    float: left; 
    width: 150px;
    height: 150px;
    shape-outside: polygon(50% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
                

Clipping the element’s background and border areas to the same shape used on the float area gives the following result:

The clip-path property is an excellent companion to the CSS Shapes properties, so you’re likely going to find yourself using them together a lot.

Animating Shapes

There are two ways you can define a shape on an element using the shape-outside property: using shape functions, or an image URI (See the Values section below for details.).

Shapes defined using an image are not animatable. So, if you define a shape using an image, specify a transition, and then define another shape using another image when the element is hovered, for example, the shape applied to the shape will change but it will not animate or transition into the new shape; it will just “jump” from one shape into another in an abrupt manner.

A CSS Shape can be animated, however, if it is defined using a shape function. A shape function, as mentioned earlier, takes a set of points as values that are make up the shape. These points are defined by coordinate pairs. Coordinates are either length values, or percentage values. Both lengths and percentages can be interpolated and hence are animatable. So the transitions on CSS shapes are really transitions on the individual points making up a shape. More specifically, transitions on the coordinates of each point, where the coordinates are interpolated as real numbers to allow animations and transitions, just like any other animatable CSS values.

With that said, there is one condition that has to be met in order for shapes to be animatable: If you’re animating from one shape to another, the number of points defining the final shape must be the same as the number of points defining the initial shape.

There’s a lot that can be said about animating CSS Shapes that is outside the scope of this entry. For more information on this topic, refer to this article about Animating CSS Shapes with CSS animations and transitions.

Accessibility

There are certain things to consider before animating CSS shapes and even before choosing the shapes to change the float areas of elements.

• If you’re animating CSS shapes, keep in mind that the content that fits into one shape may not perfectly fit into another. You may start out with a simple shape, and when you animate that shape into a new one, the content inside that shape may overflow the new shape, or may be too little for the new shape. So you may need to resize the element as you change its shape as well, so, the design has to be thought through in detail. This also means that it wouldn’t be very simple to depend on animated CSS shapes for dynamic content, unless you create the shapes dynamically with Javascript.
• Animating text composition in general, whether by animating Shapes or even a simple animation of width, will make the text temporarily unreadable. The process of text changing its layout blocks the ability of the reader to read your content, and it is only after the animation is over that they will again be able to read the text.
• If you’re using an image to define a shape, you will be able to define multiple shapes inside that image (see the Values and Examples sections below), and those shapes can be used to modify the float area. Multiple shapes, or shapes that are too complex, can cause readability problems and can render the text completely illegible to some people. Choose shapes that do not affect the readability of the text in a bad way, and it never hurts to test and ask people to read the content after the shape has been applied, because what may seem readable to a designer, may not always be readable to other people.