Implementing CSS Shapes for Creative Text Wrapping

Introduction

Traditionally, wrapping up any content on a webpage such as texts relies on rectangular boundaries. Of course, it's functional but sometimes it feels rigid as developers are cornered with a limited option and there is little to no room for flexibility. But with CSS shapes, designers and developers can break free from these constraints creating layouts that are visually appealing and dynamic.

What are CSS Shapes

CSS Shapes are unique CSS features that allow text to flow around images seamlessly and around custom shapes such as circles and polygons, enabling designs that were previously difficult to achieve with CSS alone. Whether you're designing a magazine-style layout or a modern portfolio with a bit of aesthetic craze, CSS Shapes can elevate your web design to the next level. This article will explore how to implement CSS shapes for creative text wrapping offering insights, techniques, and examples to help you transform your web projects. Walk with me!

Core CSS Properties for Text Wrapping

Before we delve into the different shapes used for text wrapping, let's briefly examine some fundamental CSS shape properties we will be using.

Shape-outside

Shape-outside property is the backbone of CSS Shapes. It defines the area around which text should be wrapped. Normally, the default behavior of inline elements is to wrap around a margin like this.

but this property allows it to wrap around objects of various shapes, let's say a circle for instance like this ?

Float

Float property is used in conjunction with shape-outside. The shape-outside property cannot really function or achieve its full potential in the absence of float as this positions the element so the text can wrap around it.

Clip-path

Clip-path can be likened to a cropping tool. Anytime you see this being used, just have it at the back of your mind that a custom shape is being cut out from the default shape of an image or shape. Examples below ?

Default Look

.test-img{
   width: 150px;
   height: 150px;
   background-color: purple;
   margin: 1rem;
}

Clipped look

.test-img{
   width: 150px;
   height: 150px;
   background-color: purple;
   margin: 1rem;
   clip-path: circle();
}

Default look

.test-img{
   width: 150px;
   height: 150px;
   margin: 1rem;
}

Clipped look

.test-img{
   width: 150px;
   height: 150px;
   margin: 1rem;
   clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%,
      25% 100%, 0% 60%, 10% 20%);
}

Shape-margin

Shape-margin simply adds space between text and the proposed image/shape to avoid the cluster/jam-packed look. A simple margin property can suffice here too.

How To Implement Basic Shapes

Now that we've covered the core properties needed, let's look into how they can be integrated into creating basic shapes for text wrapping. These shapes could include circles, polygons. Etc.

Circle (circle())

Below is a code snippet on how to wrap text around a circular shape

HTML

<div class="circle-shape"></div>
<p>This text flows dynamically around the circle shape defined using CSS Shapes.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, nulla amet velit distinctio quos corporis atque vel maxime laborum fuga enim ad quod dolorum vitae laboriosam natus unde repellendus soluta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non cupiditate, laudantium incidunt minus hic ipsa repellat a nihil. Culpa accusantium reprehenderit facere eius ipsam voluptas optio rerum velit expedita!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum voluptatem minus ratione quas consequatur laudantium modi quod nulla, beatae eaque hic repudiandae doloribus nam facilis rem odio, nemo assumenda. Impedit!</p>

CSS

circle-shape{
   float: left;
   shape-outside: circle();
   width: 150px;
   height: 150px;
   border-radius: 100%;
   background: #f206fa;
   clip-path: circle();
   margin: .5rem;
}

The result

Ellipse (ellipse())

An ellipse is just a more dimensional form of a circle where you can manipulate its x and y axis. Code snippet as seen below: (I used same HTML as the former.)

CSS

.ellipse-shape{
   float: left;
   shape-outside: ellipse(60px 100px at 50% 50%);
   width: 200px;
   height: 200px;
   border-radius: 100%;
   background: #f206fa;
   clip-path: ellipse(60px 100px at 50% 50%);
   shape-margin: 20px;
}

The result

Polygon (polygon())

Polygon (polygon())(Also using same HTML as the first example)

CSS

.polygon-shape{
   float: left;
   shape-outside: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%,
      25% 100%, 0% 60%, 10% 20%);
   width: 200px;
   height: 200px;
   background: #f206fa;
   clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%,
      25% 100%, 0% 60%, 10% 20%);
   margin: 20px;
}

The result

Advanced Text Wrapping Techniques

Irregular shaped Images

Only images with transparent backgrounds can be used for this dynamic text wrapping. Image formats with transparent backgrounds include PNG & GIF, but for the sake of this article, we'll be using PNG. Wrapping text around irregularly shaped images is not too different from basic shapes. The core difference is that in the place where a shape function (e.g circle()) is put after the "shape-outside" property, the URL of the said image is put instead as seen below:

HTML

<img src="satoru.png" class="image" alt="satoru Gojo">
<p>This text flows dynamically around this image using CSS Shapes.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, nulla amet velit distinctio quos corporis atque vel maxime laborum fuga enim ad quod dolorum vitae laboriosam natus unde repellendus soluta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non cupiditate, laudantium incidunt minus hic ipsa repellat a nihil. Culpa accusantium reprehenderit facere eius ipsam voluptas optio rerum velit expedita!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum voluptatem minus ratione quas consequatur laudantium modi quod nulla, beatae eaque hic repudiandae doloribus nam facilis rem odio, nemo assumenda. Impedit!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor veritatis iure possimus minus, dolores suscipit repellat eum eaque officiis porro, rem aspernatur voluptates. Eos distinctio numquam earum aperiam dolor porro!</p>
</body>

CSS

body{
   background-color: rgb(247, 90, 116);
   color: aliceblue;
}

.image{
   float: right;
   shape-outside: url('satoru.png');
   shape-margin: 10px;
   width: 80vw;
   height: auto;
}

Result

Browser Dev tools visualization

To better understand how your shapes influence text-wrapping, inspect your elements in the browser Developer tools. Sometimes also, you don't really know the exact dimension of the shape you want to insert for the text wrapping. But by inspecting via developer tools, you can tweak the shape to your preferred dimension, and then you copy the updated version of the code and paste in your CSS file as seen below; (keep in mind that Mozilla Firefox browser is best for this)

Handling Browser Inconsistencies and Performance Issues

While most modern browsers support CSS Shapes, certain features may behave differently. For example, the path() property of shape-outside is no longer supported by browsers, so always check compatibility and try to use fallback if possible.

Also, remember that multiple elements/complex shapes can impact performance, so optimize your shapes as much as possible by avoiding overly-use of high-detailed paths.

Accessibility and Responsiveness

Always ensure that your shapes and layouts do not hinder readability or accessibility so strive to provide adequate spacing and avoid overly complex designs that might confuse users.

Often, elements involved in these dynamic text-wrapping shenanigans don't behave as intended on other viewports/screen sizes. So, especially if images are involved, it's advisable to style these elements in percentage relative to surrounding elements instead of styling in pixels (px). Also, cross-check between various screen sizes to see the visual appeal and use media queries when necessary.

Conclusion