A photograph of sliced kiwifruit on a while plate

KiwiFruit

This is kiwifruit: originally called “yang tao”, “melonette” or 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. In California, the fruit was rebranded as “kiwifruit” due to its resemblance to New Zealand’s national bird. However, it is not a “kiwi”, which is also the demonym for native New Zealanders. Saying “I’m going to eat a kiwi” implies that you are either a cannibal or planning to dine on an endangered flightless bird.

Part of the CSS Shapes & Masks Reading List

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 Firefox and IE / Edge, at least right now: the curent verions of all other browsers support the CSS Shapes spec.

The image above is a JPEG that looks circular. Placing it in our page and wrapping text to it with a float, while 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: 

.curve { 
	width: 25%;
	height: auto;
	float: left;
	margin-right:2rem; 
	shape-outside:circle();
}

The result works very well in Chrome, but you may find that it looks 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:

  1. turn the image into a PNG with an alpha mask
  2. push the text further away by using a higher margin value
  3. Increase shape-margin
  4. 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%;
	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 curve 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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/FvJDB