Shape outside

The shape-outside CSS property allows us to have text that flows around the form of a shape without overlapping it. Here you see how this works. Currently, not all browers support this functionality.

This is helpful in contexts which can benefit from storytelling (as seen in Alice in Wonderland) or where a visual element needs to seamlessly fit with the textual content. The icons on the right show that spacing affects our ability to distinguish separate elements, especially in a larger context. More space serves to reduce the visual noise we need to perceive. At the same time, leaving too much of it can make the layout feel patchy. Shape outside helps us to strike a delicate balance in order to both reduce the visual noise and increase the cohesiveness of different types of content. Shape-outside is a type of functionality that will likely find many different shapes.