{"id":2774,"date":"2024-06-21T05:17:46","date_gmt":"2024-06-21T11:17:46","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2774"},"modified":"2024-06-21T05:17:48","modified_gmt":"2024-06-21T11:17:48","slug":"pure-css-circular-text-without-requiring-a-monospace-font","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/pure-css-circular-text-without-requiring-a-monospace-font\/","title":{"rendered":"Pure CSS Circular Text (without Requiring a Monospace Font)"},"content":{"rendered":"\n

There is no simple and obvious way to set text on a circle in CSS. Good news though! You can create a beautiful, colorful, and even\u00a0rotating<\/em>\u00a0circular text with pure CSS. It just takes a bit of work and we’ll go over that here.<\/p>\n\n\n\n

Circular-set text can be used as a decorative element, a cool headline, wrapping a call-to-action button, a loading animation, and really anything else you can think of.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

This whole concept of circular text is not new. I encountered a few articles and videos about it over the years, starting with Chris Coyier\u2019s article from way back in 2012<\/a>, up until this article by Jhey Tompkins<\/a> from last year that shows a great use of CSS trig functions. Both of them, and others, use a very similar method: splitting the text into individual characters, then rotating these characters around a common center. Like Chris shows in his article:<\/p>\n\n\n

\n
\"\"
Each letter becomes a very tall rectangle rotated around a common point at the far end away from the letter.<\/figcaption><\/figure>\n<\/div>\n\n\n

While it does work, and looks great, it limits us to using a monospace font.\u00a0Otherwise, the characters start to overlap each other, it doesn\u2019t look as good, and the text can be unreadable. But I’ve never liked this limitation (or limitations in general to be honest), so we\u2019re going to look at a completely different method that allows us to use any font we want, not necessarily monospace, including weird cursive fonts, and even emojis. And hopefully we can learn a new thing or two along the way, so let\u2019s begin!<\/p>\n\n\n\n

In order to get the desired result, we will divide our work into three steps.<\/p>\n\n\n\n

Step 1) Splitting<\/h2>\n\n\n\n

As I said, up until now, people tended to split the text into individual characters (e.g. Splitting.js<\/a>), but now we’re actually going to split the text into equal width segments (using <span><\/code> elements) and each segment will have a visual piece of the final text. In order to do that we will add a number of span elements into our text container, each containing the desired text (please read the accessibility note at the end of this part).<\/p>\n\n\n\n

In the example we’re building toward here I\u2019m using 24 <span><\/code>s, but the number of segments is up to you. The more segments you use the better it will look, just don’t use too<\/em> much as it might affect performance, especially if you’re going to animate the text.<\/p>\n\n\n

<div<\/span> class<\/span>=\"textContainer\"<\/span>><\/span>\n  <span<\/span> style<\/span>=\"--i: 0;\"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit<\/span<\/span>><\/span>\n  <span<\/span> style<\/span>=\"--i: 1;\"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit<\/span<\/span>><\/span>\n  <span<\/span> style<\/span>=\"--i: 2;\"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit<\/span<\/span>><\/span>\n  <!-- add more spans --><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
As you can see, I’ve also added a style<\/code> attribute to each span and inline a custom property of --i<\/code> with an ascending value. We will use this value later on to position each segment.<\/p>\n\n\n\n
For the CSS, let’s set the font-size<\/code> to something a bit bigger, say 60px<\/code>, and we’re going to set the width<\/code> of each span to 1em<\/code>. Next, we want to keep the text in one line so we’ll add white-space<\/code> of nowrap<\/code>, and set the inner position of each text using text-indent<\/code> with a simple calc function in it of the --i<\/code> custom property times -1em<\/code> (the width). And the last thing, to keep everything inside the span, we will use overflow: hidden<\/code>.<\/p>\n\n\n\n
We’re going to add two more things (just temporarily, so we can see things better): a display<\/code> of inline-block<\/code> as the default display of a span is inline<\/code>, and some of the properties we set don’t work on inline elements. And we will add an outline<\/code> for each span to see they’re outline.<\/p>\n\n\n
.textContainer<\/span> {\n  span {\n    width<\/span>: 1em<\/span>;\n    font-size<\/span>: 60px<\/span>;\n    white-space<\/span>: nowrap;\n    text-indent<\/span>: calc<\/span>(var(--i) * -1em<\/span>);\n    overflow<\/span>: hidden;\n    \n    \/* temporarily *\/<\/span>\n    display<\/span>: inline-block;\n    outline<\/span>: 2px<\/span> solid red;   \n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
And this is the result so far:<\/p>\n\n\n\n