Set Text on a Circle

There isn’t any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We’ll explore one way to do it here. But be forewarned, we’re going to use some CSS3 and JavaScript and not give two hoots about older browsers that don’t support some of the required tech. If you’re interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it.

An Example

Let’s proceed with something a bit simpler.

The Entire Process

Let’s take simple phrase for example:

Imagine if we took the words we were trying to set in a circle and broke them apart into individual letters.

Let’s make sure each box is the same exact size by using a monospace font.

Now let’s make each of those boxes long, like a bicycle wheel spoke.

Then we bundle up all those spokes so they are all right on top of each other.

Now imagine we afix the ends of those spokes to a central hub. We rotate each spoke just a little bit more than the last one.

If we rotate the parent element counter-clockwise and remove our red guides, we have some text on a circle!

Technical Bits

To be able to manipulate each letter like that, you have to wrap them in another element. Lettering.js can do that for you easily (jQuery and plugin dependency).

So you have this.

<h1>Established 2012</h1>

You load jQuery and Lettering.js and then call this:

$("h1").lettering();

And it turns into this in the DOM:

<h1>
  <span class="char1">E</span>
  <span class="char2">s</span>
  <span class="char3">t</span>
  <span class="char4">a</span>
  <span class="char5">b</span>
  <!-- you get the idea -->
</h1>

This really only works well with monospaced fonts. Even if you force monospaced-ness by setting each span to a fixed with, the space between each letter will be wrong and it will look weird. You could manually kern it by manually adjusting each rotation if you were nuts.

For each span, you want to set the height, position them all in the same spot, and then set the transform-origin to the bottom of the box (so they rotate around that hub. Vendor prefix that).

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

Now you need a whole bunch of class name selectors, each that rotates by a bit more.

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */

See the Pen Set Text on a Circle – 2012 by CSS-Tricks (@css-tricks) on CodePen.

But, that can get tedious and messy. With Sass and Compass it’s a three-liner:

@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

Update

Here’s a Sass (.sass) mixin from Chris Eppstein for a more extensible text rotation mixin:

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters
    .char#{$i} 
      +transform(rotate($angle-offset + $angle-per-char * $i))