Letter wrapping around a circle

Question

I am trying to wrap letters around a circle border of 4 divs. I have figured out 'How' to accomplish this but i am falling short understanding how to position my letters to wrap counterclockwise and from top to bottom. Below is my snippet. I want the top of the letters to ride the inside border of the bottom two divs and the bottom of the letters to ride the top of the inside border on the top two divs.

// begin jQuery -- 
$(document).ready(function($) {
  var audio = new Audio('http://soundbible.com/grab.php?id=1377&type=mp3');

  function beep() {

    audio.play();
  }

  var c = 0;
  var resumeT = 0;
  var t;
  var timer_is_on = 0;
  $('#resume').hide();
  var pomodoros = 0;
  // Convert given number to readable format
  var SecondsTohhmmss = function(totalSeconds) {
    var hours = Math.floor(totalSeconds / 3600);
    var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
    var seconds = totalSeconds - (hours * 3600) - (minutes * 60);

    // round seconds
    seconds = Math.round(seconds * 100) / 100

    var result = (hours < 10 ? "0" + hours : hours);
    result += ":" + (minutes < 10 ? "0" + minutes : minutes);
    result += ":" + (seconds < 10 ? "0" + seconds : seconds);
    return result;
  }

  // timer functions
  function timedCount(c) {
    $('#quart').off('mouseenter mouseleave');
    if (c === 0) {
      $('#time').val('Great Job!')
      beep();
      clearTimeout(t);
      alert('Now go for a short, brisk walk you over-achiever!')
      pomodoros++;
      $('#pomodoros').val(pomodoros);
    } else {
      var totalSeconds = c--;
      resumeT = totalSeconds;
      //console.log(resumeT);
      var results = SecondsTohhmmss(totalSeconds);
      $('#time').val(results);
      $('.center').val(results);
      t = setTimeout(function() {
        timedCount(c)
      }, 1000);
    }
  }

  function resetCount() {
    c = 0;
    resumeT = 0;
    timer_is_on = 0;
    if (!timer_is_on) {
      // console.log(c);
      timer_is_on = 1;
      var check = $('#timeInt').val();
      console.log(check);
      if (check === '') {
        c = 25 * 60;
      } else c = check * 60;
      // below commented gives option to set their own time default is 25.
      //c = $('#timeInt').val()
      timedCount(c);
    }
  }

  function startCount() {
    $('#one').removeClass("quart:hover");
    if (!timer_is_on) {
      // console.log(c);
      timer_is_on = 1;
      var check = $('#timeInt').val();
      console.log(check);
      if (check === '') {
        c = 25 * 60;
      } else c = check * 60;
      // below commented gives option to set their own time default is 25.
      //c = $('#timeInt').val()
      timedCount(c);
    }
  }

  function resumeCount() {
    $('#resume').hide();
    $('#pause').show();
    timer_is_on = 0;
    console.log(resumeT);
    //c = resumeT;
    //timedCount(c);
    t = setTimeout(function() {
      timedCount(resumeT)
    }, 1000);

  }

  function stopCount() {
    // Toggle text on Pause/ Resume
    $('#pause').hide();
    $('#resume').show();
    clearTimeout(t);
    timer_is_on = 0;
  }
  // Button Control
  $('#one').click(startCount);
  $('#four').click(resumeCount);
  $('#two').click(stopCount);
  $('#three').click(resetCount);
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
#controls {
  width: 50%;
  display: table;
  margin: 0 auto;
}

#mainTitle {
  display: table!important;
  margin: 0 auto!important;
}

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 55%;
  top: 1%;
  display: table;
  margin: 0 auto;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

#one span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  right: 30%;
  top: 20%;
  transform-origin: 35% 46%;
}

.char13 {
  transform: rotate(-60deg);
}

.char14 {
  transform: rotate(-50deg);
}

.char15 {
  transform: rotate(-40deg);
}

.char16 {
  transform: rotate(-30deg);
}

.char17 {
  transform: rotate(-20deg);
}

#two span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  left: 30%;
  top: 12%;
  display: table;
  margin: 0 auto;
  transform-origin: 3% 46%;
}

.char18 {
  transform: rotate(5deg);
}

.char19 {
  transform: rotate(18deg);
}

.char20 {
  transform: rotate(31deg);
}

.char21 {
  transform: rotate(43deg);
}

.char22 {
  transform: rotate(56deg);
}

#three span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  left: 0;
  top: 0;
  display: table;
  margin: 0 auto;
  transform-origin: 560% -20%;
}

.char23 {
  transform: rotate(310deg);
}

.char24 {
  transform: rotate(315deg);
}

.char25 {
  transform: rotate(320deg);
}

.char26 {
  transform: rotate(325deg);
}

.char27 {
  transform: rotate(330deg);
}

#four span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  right: 0;
  bottom: 10%;
  display: table;
  margin: 0 auto;
  transform-origin: -2000% -90%;
}

.char28 {
  transform: rotate(5deg);
}

.char29 {
  transform: rotate(10deg);
}

.char30 {
  transform: rotate(15deg);
}

.char31 {
  transform: rotate(20deg);
}

.char32 {
  transform: rotate(25deg);
}

.char33 {
  transform: rotate(30deg);
}

#play {
  float: right;
  width: 22%;
}

#pause {
  width: 21%;
  -ms-transform: rotate(1deg);
  /* IE 9 */
  -webkit-transform: rotate(1deg);
  /* Chrome, Safari, Opera */
  transform: rotate(1deg);
  position: absolute!important;
}

#pomodoros {
  width: 50%;
  display: table;
  marign: 0 auto;
}

#time {
  display: table;
  margin: 0 auto;
  height: 300px;
  width 200px;
  border-radius: 50%;
  border: solid;
  text-align: center;
  margin-top: 2%;
  font-size: 30px;
}

button,
input {
  display: table;
  margin: 0 auto;
}

#pomodoros {
  border-radius: 50%;
  width: 30px;
  margin-right: 5%;
  ;
  text-align: center;
  color: white;
  font-weight: 400;
  background-color: black;
}

#clock {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: solid;
  margin-top: 20px;
}

#outer {
  width: 550px;
  height: 550px;
  border-radius: 50%;
  border: solid;
}

label {
  display: inline-block;
  width: 5em;
}

.wrap {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 5%;
  cursor: pointer;
}

.quart {
  position: absolute;
  height: 50%;
  width: 50%;
  background: tomato;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.quart:first-child {
  top: 0;
  left: 0;
}

.quart:nth-child(2) {
  top: 0;
  left: 50%;
}

.quart:nth-child(3) {
  top: 50%;
  left: 0;
}

.quart:nth-child(4) {
  top: 50%;
  left: 50%;
}

.quart:nth-child(4):hover {
  content: 'text';
}

#keepCount {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  position: absolute;
  background-color: yellow;
}

.center {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  background-color: dimgray;
  border-radius: 50%;
  text-align: center;
  line-height: 160px;
}

.quart:hover {
  transform: scale(1.2);
  background-color: yellow;
  color: black;
}

#timeInt {
  z-index: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<div id="outer" class="container-fluid wrap">
<div id="clock" class="container-fluid">
  <input id="time" type="text" disabled></input>
  <div class="container-fluid">
  <div id="controls">
 <div class="resetTime">
<button id="reset">Reset</button>
   <button id="pause">Pause</button><button id="resume">Resume</button>
</div>
       <input id="pomodoros"></input>
    </div>
<div class="adjust">
  <input id="timeInt" type="text" enabled placeholder="       Enter time in mins."><button id="start">Start</button></input>
  </div>
  </div>
</div>
</div>


<img id="play" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/591470/1466634277_Play1Disabled.png'></img>
<img id="pause" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/591470/1466634288_PauseDisabled.png'>
-->
<h1 id="mainTitle">
  <span class="char1">Y</span>
  <span class="char2">o</span>
  <span class="char3">u</span>
  <span class="char4">r</span>
  <span class="char4"> </span>
  <span class="char5"> P</span>
  <span class="char6">o</span>
  <span class="char7">m</span>
  <span class="char8">o</span>
  <span class="char9">d</span>
  <span class="char10">o</span>
  <span class="char11">r</span>
  <span class="char12">o</span> 
</h1>
<div class="wrap">
  <div id="one" class="quart" title="Start your Pomodoro">
    <span class="char13">S</span>
    <span class="char14">t</span>
    <span class="char15">a</span>
    <span class="char16">r</span>
    <span class="char17">t</span>
  </div>
  <div id="two" class="quart" title="Pause Pomodoro">
    </img>
    <span class="char18">P</span>
    <span class="char19">a</span>
    <span class="char20">u</span>
    <span class="char21">s</span>
    <span class="char22">e</span>
  </div>
  <div id="three" class="quart" title="Reset Pomodoro">
    <span class="char23">t</span>
    <span class="char24">e</span>
    <span class="char25">s</span>
    <span class="char26">e</span>
    <span class="char27">R</span>
  </div>
  <div id="four" class="quart" title="Resume Pomodoro">

    <span class="char28">e</span>
    <span class="char29">m</span>
    <span class="char30">u</span>
    <span class="char31">s</span>
    <span class="char32">e</span>
    <span class="char33">R</span>
  </div>
  <input id="timeInt" type="text"></input>
  <h1><input class="center" disabled>
      <div id="countPomos"><input id="keepCount"></input></div>
<!--
Working CSS for 'REsume'

#four span{
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  right: 0;
  top: 10%;
  display: table;
  margin: 0 auto;
  transform-origin: -1000% -9%; ;
}
.char28 { transform: rotate(90deg); }
.char29 { transform: rotate(95deg); }
.char30 { transform: rotate(20deg); }
.char31 { transform: rotate(25deg); }
.char32 { transform: rotate(30deg); }
.char33 { transform: rotate(35deg); }


-->
    
    
    
    </input></h1>
</div>

I've made a more compact version of circular text that you can play with here: https://jsfiddle.net/Arg0n/L9wswL7h/ — Arg0n, Jun 23 '16 at 14:47
Update for text at bottom (different rotation etc.): https://jsfiddle.net/Arg0n/L9wswL7h/1/ — Arg0n, Jun 23 '16 at 15:05
this method i got the top to look perfect about, but the bottom is still very tricky when splitting it into two `div` s(needed for both click events). I am still trying to play with this and make it worth — Josh Lavely, Jun 23 '16 at 15:34
[my codepen](http://codepen.io/Azayzel/pen/ezBpaB) The above link shows where i am right now. Ive tried editing the function and/ or making another function based on what you provided and none worked. I know there is a simple way of bowing that text out some (on bottom `div`s. Thank you again for the help, i'm almost there! — Josh Lavely, Jun 23 '16 at 16:08
I was thinking something in the lines of this: http://codepen.io/anon/pen/aZpjYd — Arg0n, Jun 26 '16 at 07:01
@Arg0n this is perfect, thank you!! Now time for me to study what you did lol. Thank you so much. — Josh Lavely, Jun 26 '16 at 13:28

score 1 · Accepted Answer · answered Jun 27 '16 at 06:28

As per the comments, i provided something to fiddle with here

HTML

<h1 class="circular circular-top"
  style="left: 0; top:100px; transform: rotate(-60deg)">Testing circular text</h1>
<h1 class="circular circular-bottom" 
  style="position: absolute;top: 100px;left:175px;transform: rotate(70deg)">
  Testing circular text
</h1>

JavaScript

$(function() {
    $(".circular").each(function(index, el){ 
    var $el = $(el);
    $el.html($el.text().replace(/(.{1})/g, '<span>$1</span>'));
    $el.find("span").each(function(index2, el2) {
        $(el2).css("transform", "rotate(" + ($el.hasClass("circular-top") ? 6 : -6) * index2 + "deg)");
    });
  });
});

CSS

.circular {
  font: 26px Monaco, MonoSpace;
  position: absolute;
}

.circular span {
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
}

.circular-top span {
  height: 200px;
  transform-origin: bottom center;
}

.circular-bottom span {
  padding-top: 180px;
  transform-origin: top center;
}

And modified the "real" code here

Letter wrapping around a circle

1 Answers1