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.

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, 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; 
	-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 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%;
	-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 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.