CSS Quickie: shape-outside

You ever open up a book or magazine and see how the text wraps around an image and think, I’d love to do that on the web. I’m happy to inform you that it actually is! There is a pretty cool CSS property that allows you to do that, shape-outside. This rule allows for a lot of different possibilities in how you can wrap the beginning of your text based on images or shapes.

Because of how many options there are, we’re going to focus on highlighting circle and image. Especially since you’ll more or less be using these more than the rest. Let’s look at some code!

<p class="TestParagraph">
  <img src="testimage.png" class="TestParagraph__Image" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  culpa qui officia deserunt mollit anim id est laborum.
</p>

.TestParagraph {
  padding: 15px;
}

/* 
  This creates a circlular type padding 
  around the image that the text will wrap around 
*/
.TestParagraph__Image--circle {
  shape-outside: circle(50%);
}

/* This sets the text to wrap around the image itself */
.TestParagraph__Image--circle {
  shape-outside: url(testimage.png);
}