Using CSS to Set Text Inside a Circle

Using CSS to Set Text Inside a Circle

css-tricks.com css-tricks.com3 months ago in #Dev Love32

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 an author citation 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: 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.     – Jesse James Garrett   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 . We’ve got class names for the CSS styling hooks we’ll need. Next, some baseline CSS Let’s start with the div wrapper. First, we’ll set the minimum (responsive) square size at 300px so it fits on smaller screens. then, we’ll add relative positioning (because we will need it later).  .quote-wrapper {   height: 300px;   position: relative;   width: 300px; } Now we’ll make the blockquote fill the whole wrapper and fake a circle shape with a radial gradient background. (That’s right, we are not using border-radius in this example). .text {   background: radial-gradient(     ellipse at center,     rgba(0, 128, 172, 1) 0%,     rgba(0, 128, 172, 1) 70%,     rgba(0, 128, 172, 0) 70.3%   );   height: 100%;   width: 100%; } One thing to note is that 70% displays a much rougher edge. I manually added very small percentage increments and found that 70.3% looks the smoothest. Notice the edge on the right is much smoother than the edge on the left. Now we have our base circle in place. Add these additional style rules to .text. .text {   color: white;   position: relative;   margin: 0; } Here’s what we have so far: Giving text the CSS treatment Let’s style the paragraph first: .text p {   font-size: 21px;   font-style: italic;   height: 100%;   line-height: 1.25;   padding: 0;   text-align: center;   text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3); } Let’s use the blockquote’s ::before pseudo-element to create our shaping. This is where the shape-outside property comes into play. We plot out the polygon() coordinates and float it to the left so the text wraps inside the shape. .text::before {   content: “”;   float: left;   height: 100%;   width: 50%;   shape-outside: polygon(     0 0,   98% 0,     50% 6%,     23.4% 17.3%,     6% 32.6%,     0 50%,     6% 65.6%,     23.4% 82.7%,     50% 94%,     98% 100%,     0 100%   );   shape-margin:…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply