<!doctype html>
<html>
<head>
<title>Circular Text or Emoji - RJM Programming - December, 2018 ... Thanks to https://appendto.com/2016/09/how-to-make-circularcurved-text-with-javascript/</title>
<meta charset="utf-8">
<script type='text/javascript'>

var rad='100';
var radbit='';
var deg=360;
var it=[];
var itc=[];
var fs="14";
var preitc="";
var isRoulette=false;
var rw=decodeURIComponent("3%3Cspan%3E2%3C%2Fspan%3E1%3Cspan%3E5%3C%2Fspan%3E1%3Cspan%3E9%3C%2Fspan%3E42%3Cspan%3E1%3C%2Fspan%3E22%3Cspan%3E5%3C%2Fspan%3E1%3Cspan%3E7%3C%2Fspan%3E3%3Cspan%3E4%3C%2Fspan%3E62%3Cspan%3E7%3C%2Fspan%3E1%3Cspan%3E3%3C%2Fspan%3E3%3Cspan%3E6%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E3%3Cspan%3E0%3C%2Fspan%3E82%3Cspan%3E3%3C%2Fspan%3E1%3Cspan%3E0%3C%2Fspan%3E52%3Cspan%3E4%3C%2Fspan%3E1%3Cspan%3E6%3C%2Fspan%3E3%3Cspan%3E3%3C%2Fspan%3E12%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E4%3C%2Fspan%3E3%3Cspan%3E1%3C%2Fspan%3E92%3Cspan%3E2%3C%2Fspan%3E1%3Cspan%3E8%3C%2Fspan%3E2%3Cspan%3E9%3C%2Fspan%3E72%3Cspan%3E8%3C%2Fspan%3E1%3Cspan%3E2%3C%2Fspan%3E3%3Cspan%3E5%3C%2Fspan%3E32%3Cspan%3E6%3C%2Fspan%3E0");

if (!String.fromCodePoint) { // thanks to http://xahlee.info/js/js_unicode_code_point.html
// ES6 Unicode Shims 0.1 , © 2012 Steven Levithan , MIT License
String.fromCodePoint = function fromCodePoint () {
var chars = [], point, offset, units, i;
for (i = 0; i < arguments.length; ++i) {
point = arguments[i];
offset = point - 0x10000;
units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
chars.push(String.fromCharCode.apply(null, units));
}
return chars.join("");
}
}

// parseInt("hex",16);


// https://appendto.com/2016/09/how-to-make-circularcurved-text-with-javascript/
function circularText(intxt, radius, arcd) {
var txt=[], etxt=[], one=1, isemoji=false, kk=0, kkk=0, zero=0, ishex=false, dtxt=[], dectxt='', lu='', tprefix='';
//alert(intxt);
if (intxt.replace(/\&\;/g,'&').indexOf('&#') != -1 && intxt.indexOf(';') != -1) {
etxt=justinnertextish(intxt,true).replace(/\&\;/g,'&').replace(/\;\&\#/g,',').split('&#');
//alert(etxt[0]);
for (var k=0; k<etxt.length; k+=one) {
if (!isemoji) {
if (etxt[k].substring(zero).length > 1 && etxt[k].substring(zero).substring(0,1).charCodeAt(0) > 255) {
while (zero < etxt[k].length && etxt[k].substring(zero).length > 1 && etxt[k].substring(zero).substring(0,1).charCodeAt(0) > 255) {
//alert(etxt[k].substring(zero).substring(0,1).charCodeAt(0)) + ' ' + eval('' + etxt[k].substring(zero).substring(1).charCodeAt(0));
txt.push(String.fromCodePoint(eval('' + etxt[k].substring(zero).substring(0,1).charCodeAt(0)),eval('' + etxt[k].substring(zero).substring(1).charCodeAt(0)) ));
itc[eval(-1 + txt.length)]="cursor:pointer\" onclick=\"window.open('" + "//www.google.com/search?client=firefox-b-ab&q=%26%23" + etxt[k].substring(zero).substring(0,1).charCodeAt(0) + "%3B%20%26%23" + etxt[k].substring(zero).substring(1).charCodeAt(0) + "%3B&ie=UTF-8&oe=UTF-8" + "','_blank');";
zero+=2;
}
}
//if (zero != 0) { alert('' + zero + ' ' + etxt[k].substring(zero) + '! k=' + k + ' and etxt.length=' + etxt.length + ' ... ' + intxt.replace(/\;\&\#/g,',')); }
one=1;
for (kk=zero; kk<etxt[k].length; kk+=one) {
if (etxt[k].substring(kk, eval(1 + kk)).charCodeAt(0) > 255) {
txt.push(String.fromCodePoint(eval('' + etxt[k].substring(kk).charCodeAt(0)),eval('' + etxt[k].substring(kk).substring(1).charCodeAt(0)) ));
itc[eval(-1 + txt.length)]="cursor:pointer\" onclick=\"window.open('" + "//www.google.com/search?q=%26%23" + etxt[k].substring(kk).charCodeAt(0) + "%3B%20%26%23" + etxt[k].substring(kk).substring(1).charCodeAt(0) + "%3B&ie=UTF-8&oe=UTF-8" + "','_blank');";
one=2;
} else {
txt.push(tprefix + etxt[k].substring(kk, eval(1 + kk)));
one=1;
tprefix='';
}
}
one=1;
zero=0;
isemoji=true;
} else {

if (ishex || etxt[k].split(';')[0].toLowerCase().replace('x','a').replace('b','a').replace('c','a').replace('d','a').replace('e','a').replace('f','a').indexOf('a') != -1) {
ishex=true;
dtxt=etxt[k].split(';')[0].split(',');
dectxt='' + parseInt(dtxt[0].replace('x','').replace('X',''),16);
lu=dtxt[0];
for (kkk=1; kkk<dtxt.length; kkk++) {
dectxt+=',' + parseInt(dtxt[kkk].replace('x','').replace('X',''),16);
lu=dtxt[kkk];
}
eval("txt.push(String.fromCodePoint(" + dectxt + "))");
itc[eval(-1 + txt.length)]="cursor:pointer\" onclick=\"window.open('" + "//www.google.com/search?q=%26%23" + dectxt.replace(',','%3B%20%26%23') + "%3B&ie=UTF-8&oe=UTF-8" + "','_blank');";
} else {
eval("txt.push(String.fromCodePoint(" + etxt[k].split(';')[0].replace(/x/g,'').replace(/X/g,'') + "))");
itc[eval(-1 + txt.length)]="cursor:pointer\" onclick=\"window.open('" + "//www.google.com/search?q=%26%23" + etxt[k].split(';')[0].replace(/x/g,'').replace(/X/g,'').replace(',','%3B%20%26%23') + "%3B&ie=UTF-8&oe=UTF-8" + "','_blank');";
}
zero=eval(1 + eval('' + etxt[k].split(';')[0].length));
//if (zero != 0) { alert('' + zero + ' ' + etxt[k].substring(zero) + '! k=' + k + ' and etxt.length=' + etxt.length + ' ... ' + intxt.replace(/\;\&\#/g,',')); }
if ((etxt[k] + '&').substring(kk, eval(1 + kk)) != '&'.substring(0,1)) {
if (intxt.split(lu + ';')[1].length > 1 && intxt.split(lu + ';')[1].substring(0,1).charCodeAt(0) > 255) {
//alert('' + String.fromCodePoint(eval('' + intxt.split(lu + ';')[1].substring(0,1).charCodeAt(0))) + ' ' + intxt.split(lu + ';')[1].substring(0,1).charCodeAt(0) + ' ' + intxt.split(lu + ';')[1].substring(1).charCodeAt(0) + ' ' + etxt[k].substring(kk));
//txt.push(etxt[k].substring(kk));
txt.push(String.fromCodePoint(eval('' + intxt.split(lu + ';')[1].substring(0,1).charCodeAt(0)),eval('' + intxt.split(lu + ';')[1].substring(1).charCodeAt(0)) ));
} else {
//alert(intxt.split(lu + ';')[1] + ' ' + intxt.split(lu + ';')[1].length + ' ' + intxt.split(lu + ';')[1].substring(0,1).charCodeAt(0));
one=1;
for (kk=zero; kk<etxt[k].length; kk+=one) {
if (etxt[k].substring(kk, eval(1 + kk)).charCodeAt(0) > 255) {
txt.push(String.fromCodePoint(eval('' + etxt[k].substring(kk).charCodeAt(0)),eval('' + etxt[k].substring(kk).substring(1).charCodeAt(0)) ));
itc[eval(-1 + txt.length)]="cursor:pointer\" onclick=\"window.open('" + "//www.google.com/search?q=%26%23" + etxt[k].substring(kk).charCodeAt(0) + "%3B%20%26%23" + etxt[k].substring(kk).substring(1).charCodeAt(0) + "%3B&ie=UTF-8&oe=UTF-8" + "','_blank');";
one=2;
} else {
txt.push(tprefix + etxt[k].substring(kk, eval(1 + kk)));
one=1;
tprefix='';
}
}
}
one=1;
zero=0;
} else {
isemoji=false;
}
}
}
} else {
txt = justinnertextish(intxt,false).split("");
}
//alert(txt.length);
var deg = arcd / txt.length, origin = 0, j = 0;

while (eval('' + origin) < arcd) {
if (txt.length > j) {
//if (it[j] != '') { alert(it[j]); }
//alert('' + radius + ' ... ' + fs + ' ... ' + eval(fs - 14 + radius));
document.getElementById('test').innerHTML+="<p style=\"height:" + eval(eval('' + fs) - 14 + eval('' + radius)) + "px;font-size:" + fs + "px;position:absolute;transform:rotate(" + origin + "deg);transform-origin:0 100%;" + preitc + itc[j] + "\">" + txt[j] + it[j] + "</p>";
}
origin += deg;
j++;
}
//alert(it[11]);

}


function justinnertextish(intx, within) {
var sone=1, tagis='', iit=0, less=false, ioffset=0;
outx=intx;
it=[];
itc=[];
if (intx.indexOf('</') != -1) {
outx="";
for (iit=0; iit<intx.length; iit+=sone) {
if (intx.substring(iit, eval(1 + iit)) == '<') {
tagis=intx.substring(iit).substring(1).split('>')[0];
less=false;
if (tagis.indexOf(' ') != -1) { // || within) {
less=true;
//document.getElementById('atend').style.display='block';
//document.getElementById('atend').style.backgroundColor='#c0d0f0'; //'transparent';
document.getElementById('atend').innerHTML='<' + tagis + '>' + intx.substring(eval(iit + 2 + tagis.length)).split('>')[0] + '>';
//alert('' + eval(iit + 2 + tagis.length) + ' ... ' + tagis + ' --- ' + intx.substring(eval(iit + 2 + tagis.length)));
//alert('<' + tagis + '>' + intx.substring(eval(iit + 2 + tagis.length)).split('>')[0] + '>');
it[Math.max(0,eval(-1 + it.length))]+='<' + tagis + '>' + intx.substring(eval(iit + 2 + tagis.length)).split('>')[0] + '>';
if (it[Math.max(0,eval(-1 + it.length))] != ('<' + tagis + '>' + intx.substring(eval(iit + 2 + tagis.length)).split('>')[0] + '>')) {
ioffset=eval(it[Math.max(0,eval(-1 + it.length))].length - ('<' + tagis + '>' + intx.substring(eval(iit + 2 + tagis.length)).split('>')[0] + '>').length);
less=false;
}
} else if (tagis.toLowerCase().replace('br','b').replace('i','b') == 'b') {
less=false;
it[Math.max(0,eval(-1 + it.length))]='<' + tagis + '>';
itc[Math.max(0,eval(-1 + itc.length))]='';
} else {
less=false;
it[Math.max(0,eval(-1 + it.length))]='<' + tagis + '>' + intx.substring(eval(iit + 2 + tagis.length)).split('>')[0] + '>';
itc[Math.max(0,eval(-1 + itc.length))]='';
}
sone=eval(ioffset + it[Math.max(0,eval(-1 + it.length))].length);
if (ioffset != 0) {
it[Math.max(0,eval(-1 + it.length))]=it[Math.max(0,eval(-1 + it.length))].substring(0,Math.abs(ioffset));
}
ioffset=0;
//if (sone != 1) { alert('' + Math.max(0,eval(-1 + it.length)) + ' ' + it[Math.max(0,eval(-1 + it.length))] + ' ... ' + less); }
if (less) { it[Math.max(0,eval(-1 + it.length))]=""; itc[Math.max(0,eval(-1 + itc.length))]=""; }
//alert(sone);
} else {
it.push("");
itc.push("");
outx+=intx.substring(iit, eval(1 + iit));
sone=1;
}
}
} else {
it=intx.split("");
for (iit=0; iit<it.length; iit++) {
it[iit]="";
itc[iit]="";
}
}
return outx;
}

//circularText("this text is in a circle ", 100, 0);

function onl() {
var textis=location.search.split('text=')[1] ? decodeURIComponent(location.search.split('text=')[1].split('&')[0]) : '';
if (textis == rw) { isRoulette=true; preitc="background-color:orange;"; }
deg=location.search.split('degrees=')[1] ? eval(decodeURIComponent(location.search.split('degrees=')[1].split('&')[0])) : deg;
fs=location.search.split('fontsize=')[1] ? decodeURIComponent(location.search.split('fontsize=')[1].split('&')[0]) : fs;
var crad=location.search.split('radius=')[1] ? decodeURIComponent(location.search.split('radius=')[1].split('&')[0]) : '' + rad;
if (crad != ('' + rad)) {
if (crad.indexOf('.') != -1) {
deg=eval(crad.split('.')[1]);
rad=eval(crad.split('.')[0]);
} else if (rad.indexOf('.') != -1) {
deg=eval(rad.split('.')[1]);
rad=eval(rad.split('.')[0]);
} else {
rad=eval(crad);
}
}
document.getElementById('iself').value='' + fs;
if (('' + rad) != '100' || ('' + deg) != '360') { radbit='radius=' + encodeURIComponent('' + rad + '.' + deg) + '&'; document.getElementById('irad').value=('' + rad).split('.')[0]; document.getElementById('ideg').value='' + deg; }
if (textis == '') {
circularText("this text is in a circle &#x1f34d; &#x1f34c; ", rad, deg);
} else {
//document.getElementById('inp').value=textis; //.replace(/\&\#/g,'&#');
//alert(textis);
circularText(textis, rad, deg);
document.getElementById('inp').value=textis.replace(/\&\#/g,'&#');
}
var rect=document.getElementById('test').getBoundingClientRect();
//alert('' + rect.left + ',' + rect.top + ' ... ' + rect.width + ',' + rect.height);
document.getElementById('atend').style.position='absolute';
document.getElementById('atend').style.left=eval(-rad + 20 + rect.left) + 'px';
//document.getElementById('atend').style.top=eval(38 + rect.top) + 'px';
//document.getElementById('atend').style.top=eval(98 + rect.top) + 'px'; // 14.34 32.? 54.98
document.getElementById('atend').style.top=eval(eval('' + fs) * 2 + 4 + eval('' + rect.top)) + 'px';

document.getElementById('atend').style.width=eval(2 * rad - 38) + 'px';
document.getElementById('atend').style.height=eval(2 * rad - 38) + 'px';
//document.getElementById('atend').innerHTML='X';
document.getElementById('atend').style.borderRadius=eval(2 * rad - 28) + 'px';
//if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.backgroundColor='#c0d0f0'; } //'transparent';
if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.background='radial-gradient(circle,#c0d0f0,#c3d3f3)'; } //#c0d0f0'; } //'transparent';
//document.getElementById('atend').style.display='none';
}

function placethis(oi) {
if (oi.value == '') {
oi.value=oi.placeholder;
} else {
var purl=document.URL.split('#')[0].split('?')[0] + '?' + radbit + 'text=' + encodeURIComponent(oi.value.replace(/\&\#/g,'&#')) + '&fontsize=' + fs;
if (purl.length > 900) {
document.getElementById('iradius').value=(('' + rad).split('.')[0] + '.' + ('' + deg).split('.')[0]);
document.getElementById('itext').value=(oi.value.replace(/\&\#/g,'&#'));
document.getElementById('ifontsize').value=fs;
document.getElementById('isubmit').click();
} else {
location.href=document.URL.split('#')[0].split('?')[0] + '?' + radbit + 'text=' + encodeURIComponent(oi.value.replace(/\&\#/g,'&#')) + '&fontsize=' + fs;
}
}
}

</script>
</head>
<body onload='onl();'>
<h1>Circular Text or Emoji or <a target=_blank title='Analogue Clock' href='https://www.rjmprogramming.com.au/HTMLCSS/circular_text.html?radius=320.360&text=1%3Cspan%3E2%3C%2Fspan%3E1234567891%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E%3Ciframe%20frameborder%3D0%20style%3D%27z-index%3A23%3Bmargin-left%3A127px%3Bmargin-top%3A130px%3Bheight%3A400px%3B%27%20src%3Danalogue_clock.htm%23xbody%3E%3C%2Fiframe%3E'>Analogue Clock</a> or <a target=_blank title='Analogue Clock' href='https://www.rjmprogramming.com.au/HTMLCSS/circular_text.html?radius=300.360&text=3%3Cspan%3E2%3C%2Fspan%3E1%3Cspan%3E5%3C%2Fspan%3E1%3Cspan%3E9%3C%2Fspan%3E42%3Cspan%3E1%3C%2Fspan%3E22%3Cspan%3E5%3C%2Fspan%3E1%3Cspan%3E7%3C%2Fspan%3E3%3Cspan%3E4%3C%2Fspan%3E62%3Cspan%3E7%3C%2Fspan%3E1%3Cspan%3E3%3C%2Fspan%3E3%3Cspan%3E6%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E3%3Cspan%3E0%3C%2Fspan%3E82%3Cspan%3E3%3C%2Fspan%3E1%3Cspan%3E0%3C%2Fspan%3E52%3Cspan%3E4%3C%2Fspan%3E1%3Cspan%3E6%3C%2Fspan%3E3%3Cspan%3E3%3C%2Fspan%3E12%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E4%3C%2Fspan%3E3%3Cspan%3E1%3C%2Fspan%3E92%3Cspan%3E2%3C%2Fspan%3E1%3Cspan%3E8%3C%2Fspan%3E2%3Cspan%3E9%3C%2Fspan%3E72%3Cspan%3E8%3C%2Fspan%3E1%3Cspan%3E2%3C%2Fspan%3E3%3Cspan%3E5%3C%2Fspan%3E32%3Cspan%3E6%3C%2Fspan%3E0&fontsize=14'>Roulette Wheel</a></h1>
<h3>RJM Programming - December, 2018 ... Thanks to <a target=_blank title='Usefulk link, thanks' href='https://appendto.com/2016/09/how-to-make-circularcurved-text-with-javascript/'>https://appendto.com/2016/09/how-to-make-circularcurved-text-with-javascript/</a></h3>
Your <select id=iself onchange="fs='' + this.value;"><option value=14>text (14px)</option><option value=6>text (6px)</option><option value=8>text (8px)</option><option value=10>text (10px)</option><option value=12>text (12px)</option><option value=20>text (20px)</option><option value=24>text (24px)</option><option value=32>text (32px)</option><option value=40>text (40px)</option><option value=48>text (48px)</option><option value=64>text (64px)</option></select> (on circle radius <input style='width:5%;' id=irad title=pixels type=number onchange="rad=eval(this.value); radbit='radius=' + encodeURIComponent(('' + rad).split('.')[0] + '.' + ('' + deg).split('.')[0]) + '&'; " value=100 min=1 max=2000></input><input style='width:5%;' title=degrees id=ideg type=number onchange="deg=eval(this.value); radbit='radius=' + encodeURIComponent('' + rad + '.' + deg) + '&'; " value=360 min=1 max=360></input> arc): <input id=inp onblur=placethis(this); type=text style='width:50%;' placeholder="this text is in a circle &#x1f34d; &#x1f34c;"></input>

<div class="container" style="text-align: center; ">
<!--the holders for the text, reuse as desired-->
<div class="circTxt" id="test" style="display: inline-block; margin-bottom: 128px; "></div>
</div>

<input type=text style="position:absolute;top:-200px;left:-200px;" value=""></input>
<div id=atend></div>
<form style=display:none; method=POST action=./circular_text.php>
<input type=text id=itext name=text value=''></input>
<input type=text id=iradius name=radius value=''></input>
<input type=text id=ifontsize name=fontsize value=''></input>
<input id=isubmit type=submit value=Submit></input>
</form>
</body>
</html>