You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?
Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that.
However, this can be a fiddly layout option. We have to take lots of different things into consideration, like character count, word count, typeface variations, font sizing, font formatting, and responsive requirements to name a few. One size, does not fit all here. But hey, let’s do it anyway.
Here’s the goal: we want to display a
and author attribution (name) inside a circle shape. We also want to make the layout as flexible as we can. This layout won’t require any additional files and keeps the HTML markup squeaky clean.
This is what we’re striving for:
CodePen Embed Fallback
The shape-outside feature is not supported in Internet Explorer or Microsoft Edge 18 and below at the time of this writing.
First up, the HTML
We’re going to end up needing a wrapper element to pull this off, so let’s use the semantic
as the inner element. The outside wrapper can be a div:
Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.
If you’re interested in a deep-dive on the HTML of quotes, you’re in luck. We’re going to set the quote itself in a
and the name of the author inside a