Happy holiday folks! All the best from us at Digitpaint
🍌

Day 5

Shapely text wrapping with shape-outside

Wrapping text around floats has been possible a long-long time but they could just be rectangular. If you had round or or other complex shapes, you were square (pun intended) out of luck. Well, not anymore, with shape-outside we have control over the shape the text will wrap around. As long as you're using Chrome or Safari, that is.

In the following demo, you'll see what shape-outside looks like when it's used.

NEW!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore!

How does this work?

We define the "outside" of an element by setting the shape-outside property. If you already know clip-path in CSS or SVG this should look familiar. You define the shape of your element by using circle, ellipse, inset and polygon functions. While defining shapes by hand can be useful there are a couple of more function which will really come in handy if you have for instance rounded borders. These are: content-box, border-box, margin-box and padding-box. We used this technique to show the "new" stamp.

.stamp {
  shape-outside: border-box;
  border-radius: 50%;
}

Tweaking spacing

If we'd just use the code above the text would wrap pretty tightly around our stamp. Luckily we can offset the shape by using shape-margin. Keep in mind though that the shape-margin will not extend the box itself so you need to make sure the margin-box of the element is big enough to contain the shape including offset. Every part of the shape outside the margin-box will be cut off.

Complex shapes

Defining shapes using primitive shape or *-box functions may not always be enough, that's why you it's also possible to extract a shape from an image. The code snippet below shows how an image can be used to create a shape around which text can be wrapped. The shape-image-threshold determines what pixels get added to the shape. In the example down below, for instance, all pixels with an opacity higher than 0.7 will be used in the shape. In our demo above we use an .svg but you can use a .gif or .png just as well.

.present {
  shape-outside: url('image.svg');
  shape-image-threshold: 0.7;
}

Browser compatibility

shape-outside and friends currently doesn't work in Microsoft's browsers or in Firefox. There is good news however, it's in development for Firefox and they're considering it for Edge.

  • Chrome
  • Samsung Internet
  • Chrome for Android
  • Safari
  • iOS Safari
  • Opera

More detailed information on caniuse.com

Further reading

Demo source code

Do you want to dig in the nitty-gritty of this demo, check out the source files:

Back to home