{"id":42570,"date":"2018-12-27T03:01:53","date_gmt":"2018-12-26T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=42570"},"modified":"2023-04-24T12:34:30","modified_gmt":"2023-04-24T02:34:30","slug":"circular-text-or-emojis-genericity-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-genericity-tutorial\/","title":{"rendered":"Circular Text or Emojis Genericity Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emojis Genericity Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ctbiggerbetter.jpg\" title=\"Circular Text or Emojis Genericity Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emojis Genericity Tutorial<\/p><\/div>\n<p>A major consideration in any &#8220;genericity&#8221; drive you have for your web applications is to allow for a large amount of user entered data, perhaps a surprising amount.  If you offer a textbox to enter data, then a user may enter a hugely long, and perhaps valid, field.  If we&#8217;d left it at the scenario of yesterday&#8217;s <a title='Circular Text or Emojis Analogue Clock Tutorial' href='#cteact'>Circular Text or Emojis Analogue Clock Tutorial<\/a>, though, we&#8217;d have been restricted to a textbox entry of about 800 characters for the rjmprogramming.com.au domain.  In the first of the improvements below, then, we try to cater for this via &#8230;<\/p>\n<ul>\n<li>for textbox entries that are long we now populate an HTML form method=POST action=<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.php_GETME\" title=\"circular_text.php\">circular_text.php<\/a> where we intervene at appropriate places with the large data items &#8230; and today we also &#8230;<\/li>\n<li>make sure compound emojis like the country flags work (where the great <a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a> website webpages such as <a target=_blank title='Japan flag emoji information from Iemoji' href='https:\/\/www.iemoji.com\/view\/emoji\/173\/flags\/japan'>Japan&#8217;s<\/a> flag emoji one, become so useful) &#8230; and we test that out with a &#8230;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a> content inside the circular text<\/li>\n<\/ul>\n<p> &#8230; and an <b>interesting thing<\/b> happened with the &#8220;getting to work&#8221; of today&#8217;s textbox entry (for a radius value of 570) you can try &#8230;<\/p>\n<p><!--code>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127464;&amp;amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127470;&amp;amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127482;&amp;amp;#127480;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127470;&amp;amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127463;&amp;amp;#127479;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127477;&amp;amp;#127472;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127475;&amp;amp;#127468;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127463;&amp;amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&amp;amp;#127479;&amp;amp;#127482;&nbsp;&nbsp;&nbsp;&amp;amp;#127471;&amp;amp;#127477;&nbsp;&nbsp;&nbsp;&amp;amp;#127474;&amp;amp;#127485;&nbsp;&nbsp;&nbsp;&amp;amp;#127477;&amp;amp;#127469;&nbsp;&nbsp;&amp;amp;#127483;&amp;amp;#127475;&nbsp;&nbsp;&amp;amp;#127466;&amp;amp;#127481;&nbsp;&nbsp;&amp;amp;#127465;&amp;amp;#127466;&nbsp;&nbsp;&amp;amp;#127466;&amp;amp;#127468;&nbsp;&amp;amp;#127470;&amp;amp;#127479;&nbsp;&amp;amp;#127481;&amp;amp;#127479;&nbsp;&amp;amp;#127481;&amp;amp;#127469;&nbsp;&amp;amp;#127464;&amp;amp;#127465;&nbsp;&amp;amp;#127467;&amp;amp;#127479;&nbsp;&amp;amp;#127468;&amp;amp;#127463;&nbsp;&amp;amp;#127470;&amp;amp;#127481;&lt;iframe frameborder=0 style=border-radius:600px;width:900px;height:600px;z-index:23;margin-left:87px;margin-top:270px; src=https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?title=<b>%c2%a0<\/b>%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0Country%20Populations&amp;onclick=y&amp;task=Country&amp;desc=Populations&amp;data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]#bitsatend&gt;&lt;\/iframe&gt;\n<\/code--><\/p>\n<p><code><br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127464;&amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127470;&amp;#127475;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127482;&amp;#127480;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127470;&amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127463;&amp;#127479;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127477;&amp;#127472;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127475;&amp;#127468;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127463;&amp;#127465;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#127479;&amp;#127482;&nbsp;&nbsp;&nbsp;&amp;#127471;&amp;#127477;&nbsp;&nbsp;&nbsp;&amp;#127474;&amp;#127485;&nbsp;&nbsp;&nbsp;&amp;#127477;&amp;#127469;&nbsp;&nbsp;&amp;#127483;&amp;#127475;&nbsp;&nbsp;&amp;#127466;&amp;#127481;&nbsp;&nbsp;&amp;#127465;&amp;#127466;&nbsp;&nbsp;&amp;#127466;&amp;#127468;&nbsp;&amp;#127470;&amp;#127479;&nbsp;&amp;#127481;&amp;#127479;&nbsp;&amp;#127481;&amp;#127469;&nbsp;&amp;#127464;&amp;#127465;&nbsp;&amp;#127467;&amp;#127479;&nbsp;&amp;#127468;&amp;#127463;&nbsp;&amp;#127470;&amp;#127481;&lt;iframe frameborder=0 style=border-radius:600px;width:900px;height:600px;z-index:23;margin-left:87px;margin-top:270px; src=https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?title=<b>%c2%a0<\/b>%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0%c2%a0Country%20Populations&amp;onclick=y&amp;task=Country&amp;desc=Populations&amp;data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]#bitsatend&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; where the use of <b>%c2%a0<\/b> creates whitespace but isn&#8217;t cleared by your normal trim functions, which is how we managed to get our Pie Chart title centralized enough not to be cut off by the HTML iframe border-radius applied to it.  Cute, huh?!<\/p>\n<p>Here is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html--GETME\" title=\"circular_text.html\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html--GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link for you to try yourself.<\/p>\n<hr>\n<p id='cteact'>Previous relevant <a target=_blank title='Circular Text or Emojis Analogue Clock Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-analogue-clock-tutorial\/'>Circular Text or Emojis Analogue Clock Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emojis Analogue Clock Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ctmorebetter.jpg\" title=\"Circular Text or Emojis Analogue Clock Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emojis Analogue Clock Tutorial<\/p><\/div>\n<p>Often a good way to proceed to challenge genericity issues with a web application you think has potential to be more than it appears is to make it be the missing piece to another web application and interface to it.  This is the scenario, today, putting together yesterday&#8217;s &#8230;<\/p>\n<ul>\n<li><a title='Circular Text or Emojis Primer Tutorial' href='#ctept'>Circular Text or Emojis Primer Tutorial<\/a> &#8230; and adapt it to an older &#8230;<\/li>\n<li><a title='Analogue Clock Timezone Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-timezone-tutorial\/'>Analogue Clock Timezone Tutorial<\/a> web application, that eventually became so much more than its top left analogue clock missing the hour numbers quite useful for mere mortal sanity purposes<\/li>\n<\/ul>\n<p>This interfacing match is great, as it fills in a gap, but there are a couple of things to overcome, those being &#8230;<\/p>\n<ol>\n<li>allow for a circular text component consist of more than one character, and here we allow the user to put &#8230;<br \/>\n<code><br \/>\n1&lt;span&gt;2&lt;\/span&gt;<br \/>\n<\/code><br \/>\n &#8230; to show &#8220;12&#8221; for example\n <\/li>\n<li>allow for an element like the HTML iframe &#8220;child&#8221; element be the contents within a newly introduced HTML div element for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-GETME\" title=\"circular_text.html\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html-GETME\" title=\"circular_text.html\">circular_text.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> placed into the &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>? &#8230; yes, Franklin D. Roosevelt, that would be in the circle the circular text goes around, and we do that stylewise via (on the fly Javascript) code making use of the centrally justified circular text element (curiously causing rect.width and rect.height below to be zero) &#8230;<\/p>\n<p><code><br \/>\n  var rect=document.getElementById('test').<a target=_blank title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>();<br \/>\n  document.getElementById('atend').style.position='absolute';<br \/>\n  document.getElementById('atend').style.left=eval(-rad + 20 + rect.left) + 'px';<br \/>\n  document.getElementById('atend').style.top=eval(38 + rect.top) + 'px';<br \/>\n  document.getElementById('atend').style.width=eval(2 * rad - 38) + 'px';<br \/>\n  document.getElementById('atend').style.height=eval(2 * rad - 38) + 'px';<br \/>\n  document.getElementById('atend').style.borderRadius=eval(2 * rad - 28) + 'px';<br \/>\n  if (document.getElementById('atend').innerHTML != '') { document.getElementById('atend').style.backgroundColor='#c0d0f0'; } \/\/'transparent';<br \/>\n<\/code><\/p>\n<p> &#8230; and ahead of this our user entered data needed for the Analogue Clock has an HTML (child) <b>iframe element<\/b> part &#8230;<\/p>\n<p><code><br \/>\n1&lt;span&gt;2&lt;\/span&gt;1234567891&lt;span&gt;0&lt;\/span&gt;1&lt;span&gt;1&lt;\/span&gt;<b>&lt;iframe scrolling=no frameborder=0 style='z-index:23;margin-left:127px;margin-top:130px;height:400px;' src=analogue_clock.htm#xbody&gt;&lt;\/iframe&gt;<\/b><br \/>\n<\/code> <\/p>\n<p> &#8230; that we figure, because it is HTML containing spaces in its non-innerHTML parts, is meant as content for that new &#8216;atend&#8217; HTML div element located in the middle of the circular text, and created via the <b>codeline<\/b> reached in this scenario &#8230;<\/p>\n<p><code><br \/>\nfunction justinnertextish(intx, within) {<br \/>\n  var sone=1, tagis='', iit=0, less=false, ioffset=0;<br \/>\n  outx=intx;<br \/>\n  it=[];<br \/>\n  if (intx.indexOf('&lt;\/') != -1) {<br \/>\n    outx=\"\";<br \/>\n    for (iit=0; iit&lt;intx.length; iit+=sone) {<br \/>\n      if (intx.substring(iit, eval(1 + iit)) == '&lt;') {<br \/>\n        tagis=intx.substring(iit).substring(1).split('&gt;')[0];<br \/>\n        less=false;<br \/>\n        if (tagis.indexOf(' ') != -1 || within) {<br \/>\n        less=true;<br \/>\n        <b>document.getElementById('atend').innerHTML='&lt;' + tagis + '&gt;' + intx.substring(eval(iit + 2 + tagis.length)).split('&gt;')[0] + '&gt;';<\/b><\/p>\n<p>   \/\/ etcetera etcetera etcetera<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p><a target=_blank title='Time' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=320.360&#038;text=1%3Cspan%3E2%3C%2Fspan%3E1234567891%3Cspan%3E0%3C%2Fspan%3E1%3Cspan%3E1%3C%2Fspan%3E%3Ciframe%20scrolling%3Dno%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'>Got the time?<\/a><\/p>\n<p><iframe style='width:100%;height:900px;' src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html?radius=320.360&#038;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'><\/iframe><\/p>\n<hr>\n<p id='ctept'>Previous relevant <a target=_blank title='Circular Text or Emojis Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-primer-tutorial\/'>Circular Text or Emojis Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Circular Text or Emojis Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text_or_emoji.jpg\" title=\"Circular Text or Emojis Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Circular Text or Emojis Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a &#8220;proof of concept&#8221; tutorial for you today, because we got put onto an idea for something by <a target=_blank title='Usefulk link, thanks' href='https:\/\/appendto.com\/2016\/09\/how-to-make-circularcurved-text-with-javascript\/'>How to Make Circular\/Curved Text with JavaScript<\/a>, thanks.  We wanted to extend the logic of that &#8230;<\/p>\n<ul>\n<li>ascii codes (of characters) less than 256, text handling &#8230; to, now, be able to handle &#8230;<\/li>\n<li>emoji data (or that&#8217;s what we like to &#8220;nickname&#8221; it &#8230; sorry if this annoys, but it really concerns UTF-8 characters really<\/li>\n<\/ul>\n<p>We resisted the <a target=_blank title='Sushi Train Circuit Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/sushi-train-circuit-game-tutorial\/'>Sushi Train Circuit Game Tutorial<\/a> ideas, because it isn&#8217;t lunchtime, and opted to allow the user to enter their own text (including any emojis (available via Command-Control-Space menu here at Mac OS X) or via &amp;#[CodePoint]; HTML Entity (decimal or hexidecimal (CodePoint)) entries (where we&#8217;d like you to put &amp;amp; rather than just &amp; if you are going to do this, and if you want to do this, but need tips on how you might approach this, please consult our previous <a target=_blank title='Karaoke via YouTube API in Iframe Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-emoji-tutorial\/'>Karaoke via YouTube API in Iframe Emoji Tutorial<\/a> where we often start at good ol&#8217; <a target=_blank title='emojipedia' href='http:\/\/emojipedia.org'>emojipedia<\/a>).<\/p>\n<p>Maybe there will be some sequels, but for the meantime you can examine the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html_GETME\" title=\"circular_text.html\">circular_text.html<\/a> code (including more thank you links), that you can try for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circular_text.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>With that in mind, take a look at us creeping through the text characters you enter, and notice how an emoji will have two bytes in a row with ascii code greater than 255 &#8230;<\/p>\n<p><code><br \/>\n        var etxt=intxt.replace(\/\\&amp;amp\\;\/g,'&amp;').replace(\/\\;\\&amp;\\#\/g,',').split('&amp;#'); \/\/ intxt is your text<br \/>\n        var txt=[], zero=0; \/\/ changed elsewhere as well<br \/>\n        <br \/>\n        var one=1;<br \/>\n        for (kk=zero; kk&lt;etxt[k].length; kk+=one) {<br \/>\n         if (etxt[k].substring(kk, eval(1 + kk)).<a target=_blank title='charCodeAt information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_charcodeat.asp'>charCodeAt<\/a>(0) &gt; 255) { \/\/ emoji found<br \/>\n          txt.push(<a target=_blank title='String.fromCodePoint() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/fromCodePoint'>String.fromCodePoint<\/a>(eval('' + etxt[k].substring(kk).charCodeAt(0)),eval('' + etxt[k].substring(kk).substring(1).charCodeAt(0))   ));<br \/>\n          one=2;<br \/>\n         } else {  \/\/ normal ascii text<br \/>\n          txt.push(etxt[k].substring(kk, eval(1 + kk)));<br \/>\n          one=1;<br \/>\n         }<br \/>\n        }<br \/>\n        }<br \/>\n        one=1;<br \/>\n        zero=0;<br \/>\n<\/code><\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank title='Circular Text or Emojis Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-primer-tutorial\/'>Circular Text or Emojis Primer Tutorial<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d42527' onclick='var dv=document.getElementById(\"d42527\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42527' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d42555' onclick='var dv=document.getElementById(\"d42555\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42555' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d42570' onclick='var dv=document.getElementById(\"d42570\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42570' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A major consideration in any &#8220;genericity&#8221; drive you have for your web applications is to allow for a large amount of user entered data, perhaps a surprising amount. If you offer a textbox to enter data, then a user may &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/circular-text-or-emojis-genericity-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[105,2773,208,2699,354,385,452,1839,513,518,576,652,944,970,997,1986,2700,1254,1319,1425],"class_list":["post-42570","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-ascii","tag-charcodeat","tag-circle","tag-compound-emoji","tag-dom","tag-emoji","tag-form","tag-genericization","tag-google","tag-google-chart","tag-html","tag-javascript","tag-pie-chart","tag-post","tag-programming","tag-proof-of-concept","tag-string-fromcodepoint","tag-text","tag-tutorial","tag-whitespace"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42570"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=42570"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42570\/revisions"}],"predecessor-version":[{"id":59119,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42570\/revisions\/59119"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=42570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=42570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=42570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}