Draw Circle With Text Html5

Y'all want to gear up some text within the shape of a circle with HTML and CSS? That's crazy talk, right?

Non really! Thanks to shape-exterior 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, similar character count, discussion count, typeface variations, font sizing, font formatting, and responsive requirements to proper name a few. One size, does not fit all hither. Just hey, let's practice it anyhow.

Here's the goal: we want to display a <blockquote> and author attribution (proper noun) inside a circle shape. We also desire to make the layout as flexible as we tin can. This layout won't require any boosted files and keeps the HTML markup squeaky clean.

This is what we're striving for:

The shape-outside feature is not supported in Net Explorer or Microsoft Edge 18 and below at the fourth dimension of this writing.

Commencement up, the HTML

Nosotros're going to cease upwards needing a wrapper chemical element to pull this off, so permit'southward use the semantic <blockquote> as the inner element. The outside wrapper can exist a div:

          <div class="quote-wrapper">   <blockquote class="text" cite="http://world wide web.inspireux.com/category/quotes/jesse-james-garrett/">     <p>Experience design is the blueprint of annihilation, contained of medium, or beyond media, with human experience every bit an explicit event, and human engagement every bit an explicit goal.</p>     <footer>– Jesse James Garrett</footer>   </blockquote> </div>        

If you lot're interested in a deep-dive on the HTML of quotes, y'all're in luck. We're going to set the quote itself in a <p> and the name of the author inside a <footer>. We've got form names for the CSS styling hooks we'll need.

Next, some baseline CSS

Let's offset with the div wrapper. Offset, we'll set the minimum (responsive) square size at 300px and so it fits on smaller screens. and so, we'll add together relative positioning (because nosotros will need it later).

          .quote-wrapper {   height: 300px;   position: relative;   width: 300px; }        

Now we'll make the blockquote fill up the whole wrapper and fake a circle shape with a radial gradient background. (That's right, we are not using edge-radius in this example).

          .text {   background: radial-gradient(     ellipse at center,     rgba(0, 128, 172, i) 0%,     rgba(0, 128, 172, one) lxx%,     rgba(0, 128, 172, 0) 70.3%   );   height: 100%;   width: 100%; }        

One affair to note is that 70% displays a much rougher edge. I manually added very small percent increments and found that seventy.iii% looks the smoothest.

Notice the edge on the right is much smoother than the border on the left.

Now we have our base of operations circle in place. Add these additional style rules to .text.

          .text {   colour: white;   position: relative;   margin: 0; }        

Here'southward what we have so far:

Giving text the CSS treatment

Let'southward style the paragraph first:

          .text p {   font-size: 21px;   font-fashion: italic;   height: 100%;   line-pinnacle: 1.25;   padding: 0;   text-align: center;   text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.three); }        

Since posting this article, others take commented below about an alternate technique using radial-gradient as the shape-outside. This yields a smoother semicircular curve over polygons.

Let's use the blockquote's ::before pseudo-element to create our shaping. This is where the shape-outside holding 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: fifty%;   shape-exterior: polygon(     0 0,     98% 0,     l% 6%,     23.iv% 17.iii%,     6% 32.6%,     0 fifty%,     6% 65.six%,     23.4% 82.7%,     l% 94%,     98% 100%,     0 100%   );   shape-margin: seven%; }        

Let's modify the radial background color to carmine. The path editor polygon points and connecting lines are too blue. We are changing this color temporarily for greater contrast with the editor tool.

          background: radial-gradient(   ellipse at center,   rgba(210, 20, xx, ane) 0%,   rgba(210, 20, 20, one) 70%,   rgba(210, 20, twenty, 0) lxx.3% );        

I like Firefox's programmer tools because it has super handy features like a shape-exterior path editor.  Click on the polygon shape in the inspector to run into the active shape in the browser window. Big thumbs up to the Mozilla dev team for creating a very absurd interface!

The Firefox shape editor tool too works forprune-path and <bones-shape> values.

Here's what we have at this point:

Those points along the shape are from Firefox's editing tool.

We can do the aforementioned sort of affair for the paragraph's ::earlier pseudo-element. We use the shape-outside to brand the aforementioned polygon, in opposite, then float it to the right.

          .text p::before {   content: "";   float: right;   meridian: 100%;   width: 50%;   shape-outside: polygon(     ii% 0%,     100% 0%,     100% 100%,     two% 100%,     l% 94%,     76.half dozen% 82.7%,     94% 65.six%,     100% fifty%,     94% 32.6%,     76.vi% 17.three%,     50% half-dozen%     );   shape-margin: 7%; }        

Looking good, just where did the footer get? It overflowed the <blockquote> (where the circular colored groundwork is), and then we're unable to see that white text on a white groundwork.

Styling the footer

Now we tin can style the <footer> and give it an absolute position to bring it back on superlative of the circle.

          .quote-wrapper blockquote footer {   lesser: 25px;   font-size: 17px;   font-style: italic;   position: absolute;   text-align: center;   text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);   width: 100%; }        

Once again, experience gratuitous to change the background color to suit your needs.

This is where the fiddly part comes in. The text itself needs to be styled in such a fashion that the number of words and characters work inside the shape. I used these CSS rules to assist get in fit nicely:

• font-size
• shape-margin (we accept two exclusion areas to adjust)
• line-meridian
• letter-spacing
• font-weight
• font-style
• min-width and min-height (to size of the .quote-wrapper container)

Adding the quote mark for some flourish

Did you see the giant quotation marker in the original demo? That'southward what we want to make side by side.

We'll take advantage of the ::before pseudo-element for .quote-wrapper. Yet again, this volition take a off-white amount of petty to make information technology await right. I establish line-summit has a huge outcome on the mark's vertical position.

          .quote-wrapper::before {   content: "\201C";   color: #ccc;   font-family: sans-serif, serif;   font-size: 270px;   height: 82px;   line-height: ane;   opacity: .9;   position: accented;   elevation: -48px;   left: 0;   z-index: 1; }        

There's actually a difference between curly ("smart") quote marks and directly (impaired) ones. I'd suggest using curly quote marks for dialogue and straight quote marks for coding.

Handling responsive styles

We should probably brand our quote bigger on larger screens. I'm setting a breakpoint at 850px, but you lot may desire to utilise something different.

          @media (min-width: 850px) {   .quote-wrapper {     peak: 370px;     width: 370px;   }   .quote-wrapper::before {     font-size: 300px;   }   .text p {     font-size: 26px;   }   .quote-wrapper blockquote footer {     bottom: 32px;   } }        

In that location we take it!

We fix HTML text within a circular shape using a combination of old and new CSS techniques to make an appealing <blockquote> that commands attention. And nosotros achieved our brandish goal without whatsoever additional dependencies, while still keeping the HTML markup make clean and semantic.

I hope this commodity encourages yous to explore new layout possibilities with shape-outside. Stay tuned for shape-inside.

crouchthans1971.blogspot.com

Source: https://css-tricks.com/using-css-to-set-text-inside-a-circle/

Share this post