wrap text around an image or shape from both sides

Question

How can I have a text wrapping around an arbitrarily positioned image or shape within a single block of text?

_{image is property of https://www.sarasoueidan.com/blog/css-shapes/}

---

Note (13-03-2020) that I am not looking for a solution that involves separate columns of text such as this one which exploits left/right floats with shape-outside.

Note2 (17-08-2024) that I am not looking for a solution (SO1, SO2, Blog, CodeSandbox experiment) that involves right-or-left-floating spacers (w/ or w/o shape-outside) as my text needs to surround an arbitrarily positioned obstruction.

Answer 1

At this moment, this behaviour is not supported, however, there is a draft for it.

More reading:
https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/
https://www.sarasoueidan.com/blog/css-shapes/
https://drafts.csswg.org/css-exclusions-1/

CSS Exclusions Module Level 1

Editor’s Draft, 16 January 2020

CSS Exclusions define arbitrary areas around which inline content can flow.

---

CSS Shapes Module Level 2

Note that there also was a shape-inside property, which would have been possible to use as a workaround with a proper polygon, but its support was removed and implementation postponed until https://drafts.csswg.org/css-shapes-2/. So right now, it is only possible to use shape-outside with a float-ing element.

_{images property of https://www.sarasoueidan.com/blog/css-shapes/}

The initial Shapes specification included a property shape-inside for creating shapes inside an element. This property, along with the possibility of creating shapes on non-floated elements, has been moved to level 2 of the specification. As the shape-inside property was initially in Level 1 of the specification, you may find tutorials on the web detailing both properties.
~ MDN