Set Text on a Circle

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 doesn't support some 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

View Demo   Download Files   Go Play on CodePen

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 */

But imagine that with every vendor prefix as well, pretty messy. With Sass and Compass it's a three-liner:

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

Demo and Download

View Demo   Download Files   Go Play on CodePen
Taking things a bit further, we could get a little more finicky and fancy:

Or how about setting text on a spiral?

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))

Set Text on a Circle is a post from CSS-Tricks