In this article, I will share the CSS and JS code to generate circle text from an HTML text element. This technique makes a span element for each letter and rotates it slightly. You can generate a circle text by adjusting the font size and circle radius.
Similar techniques have been implemented in online web applications like in the circle text generator in MockoFun.
Circle Text Code
Let’s break down the steps to creating curved text or circle text using a little JS and CSS.
Circle Text HTML Code
The HTML code is pretty straightforward. The
div.curved-text element is actually the only important one because that’s where we will write our circle text.
div element simply contains the configuration options for the curved text:
- input text for inputting the curved text content
- radius slider for adjusting the radius of the circle text
Circle Text CSS Code
For creating the circle text effect, we will only use two CSS classes:
.curved-text: CSS class used for the wrapper element where the curved circle text will reside
.curved-text span: CSS class used for each individual letters that make up the circle text
First, we import the jQuery library. You could probably get away without using jQuery, but I just find it convenient in this case for manipulating the HTML elements of the circle text setup.
updateCurvedText() function takes in two parameters:
$curvedText, which is a reference to the curved text wrapper element
radius: the radius for our curved/circle text
Let’s see how this function works and how it creates our circle text:
First, we reset the
min-height properties of our wrapper. This will allow us to actually measure the dimensions of our text in its normal straight form.
We do this because when we curve the text, we will end up with an element that we don’t want to be smaller than the original text. Otherwise, the element will jump all over the place when adjusting its radius.
We store the width (
w), height (
h) and also the
text for later use.
Next, we need to wrap each letter of the text we want to curve into
span elements. We simply go over each character of the text and add a
span element around it. Then, we replace the content of our wrapper with the new HTML code.
Please notice that the
span elements will use the CSS code we defined earlier.
Just a few more steps and we are done!
Imagine that each letter of our curved text becomes a rectangle element with the height set to the radius value of our desired circle text. We also need to set the
transformOrigin to the bottom center of the rectangle, because we will want to rotate each letter by a certain angle to distribute the letters on a circle.
The image above is just to give you an idea of how the elements are transformed. We add the
position:absolute CSS style, because we want all the letters to initially overlap. We want this because we want to rotate those rectangles around the same origin point.
And now, the last step — the actual rotation for writing text in a circle:
Let me explain the code:
circleLength variable is not actually used. It’s just a reminder of how to calculate the length of the circle.
This helps us determine the angle of a circle slice when we have the length of the slice edge. We simply divide this length by two times the radius of the whole circle.
The length of the circle slice, in our case, is the width of the original text. The idea here is that no matter how you bend text, the letters’ combined width will always be the same.
Using the formula mentioned
angleRad = w/(2*radius) gives us an angle in radians. CSS likes working with degrees though.
So, we simply need to transform the radians to degrees. We then divide this by the number of letters in the text. This will give us the angle step we need to rotate each letter.
With the angle calculated, we apply the CSS to translate each letter to the center of the word, and then rotate each letter with the same angle multiplied by the letter’s index in the word.
When we rotate each letter, because we start at the angle value 0, we will end up with a curved text that starts on top.
That’s fine, but it looks a lot better if the text in a circle is centered and balanced to the left and right.
So, we simply need to subtract
text.length*angle/2 each time we rotate a letter.
Now you know how to make curved text or circle text in CSS and JS.
If you don’t want to start coding this yourself, you can use the Codepen snippet, or even better, you can use the MockoFun circle text generator. It’s FREE and it gives you lots of flexibility, over 1,500 different fonts, changing colors and sizes with just a few clicks.