JavaScriptで円に沿って文字を並べる

html

<div class="circle-text">あいうえお</div>

css

.circle-text{
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background: blue;
  color: #fff;
  margin: 0 auto;
  position: relative;
  font-size: 2.5em;
}

javascript

var textbox = document.querySelector('.circle-text');

circleText(textbox,20);

function circleText (textElement,angle) {
  var parentR = textbox.offsetWidth/2;
  var text = textElement.textContent;  
  var chars = text.split('');
  if(chars.length%2 === 0){
    chars.splice(chars.length/2,0,' ');
  }
  textElement.innerHTML = null;

  chars.forEach(function (c, i, arr) {
    var span = document.createElement('span');
    span.textContent = c;
    span.style.display   = 'inline-block';
    span.style.position  = 'absolute';
    span.style.left = '50%';
    span.style.top = '50%';

    span.style.transformOrigin = 'left top';
    span.style.transform = 
      'rotate(' + (i*angle-angle*((arr.length/2)>>0)) + 'deg) ' +
      'translate(0%,40%) ' + 
      'translate(0, -' + (parentR) + 'px) ' +
      'translate(-50%,-50%)';
    textElement.appendChild(span);
  });
}

circleText(textbox,20) 引数はテキスト要素と文字の角度を渡しています。
文字数が偶数の場合は空白を追加して奇数になるようにしています。

spanの配置はCSSのみで時計を作るを参考にしました。