Wrapping Text Around Circular Images With CSS Shapes

In a previous article I demonstrated how to wrap text around bitmap images with CSS Shapes.  The process of creating a separate image mask to do so was a little complicated; for images that are simply circular, a lot of that complexity can be avoided.

Turn, Turn, Turn

As before, you’ll need the Adobe polyfill to make this technique work in anything other than Chrome, at least right now. This will introduce a slight complication of its own, but we’ll come to that in a moment.

The image above is a JPEG that looks circular. Placing it in our page and wrapping text to it with a float is easy, as is applying the polyfill:

<img src="sliced-kiwifruit-on-plate.jpg" alt="A photograph of sliced kiwifruit on a while plate" class=curve>

<h1>KiwiFruit</h1>

<p>This is kiwifruit: originally called “yang tao”, “melonette” and Chinese gooseberry. Cultivated in its fuzzy variety from Chinese imports, the fruit proved popular with American military servicemen stationed in New Zealand during World War II, with commercial export to the United States starting after the end of the war.

<script src=shapes.js></script>

The CSS is also surprisingly simple:

.curve { 

width: 25%; height: auto;

float: left; margin-right:2rem; 

-webkit-shape-outside:circle();

shape-outside:circle();

}

(Note that we use need the prefixed property before the unprefixed version, as the polyfill requires the former).

The result works very well in Chrome, but you’ll find that it may look a little odd in other browsers. I’d suggest changing background color of the page to see what’s going on.

Browsers with native support for the Shapes module place the curved text above the image, but browsers that require the polyfill place text underneath the image. There are several possible solutions to this:

• push the text further away by using a higher margin value
• Increase shape-margin
• clip the image with a CSS mask

However, for many images the answer is far easier: apply border-radius.

.curve {

width: 25%; height: auto;

float: left; margin-right:2rem; 

border-radius: 50%;

-webkit-shape-outside:circle();

shape-outside:circle();

}

Note that border-radius does not, by itself, allow text to wrap around the image; instead, it works as a simple and effective circular clip.

Like radial-gradient, the radius of the circle wrap shape can be specified using any CSS length unit or the keywords closest-side and furthest-side, and its position determined by number pairs. It’s also possible to specify the box-model for the shape. It’s my guess that using these options will be relatively rare in production, but it’s nice to know they are available.

Handling Circle Shapes With SVG

Shapes can also be used to curved text around SVG content displayed on the page as an <img>; perhaps surprisingly, it can also be used with SVG inline content, with a little care. The next obvious enhancement is to use SVG paths as shape outlines, which is promised for the next iteration of the specification.

Conclusion

CSS Shapes are just part of an ongoing effort, from <picture> to regions, that allow web designers to achieve page layouts in a browser just as good as the traditional printed page. The Shapes specification also allows text to be wrapped inside circles, an aspect that this series will look at next.

Photograph by Vader Chen, used with permission. Inspect the code for the circular text wrap on CodePen