{"id":54030,"date":"2021-11-23T03:01:30","date_gmt":"2021-11-22T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54030"},"modified":"2021-11-20T15:07:16","modified_gmt":"2021-11-20T05:07:16","slug":"text-to-emoji-preview-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-preview-tutorial\/","title":{"rendered":"Text to Emoji Preview Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Preview Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/fillin_preview.jpg\" title=\"Text to Emoji Preview Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Preview Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html-editor-html-preview-tutorial\/'>HTML Editor HTML Preview Tutorial<\/a> set us to thinking that its &#8220;Preview&#8221; of &#8220;future display&#8221; could also work well with our <a title='Text to Emoji Short Code Translation Textarea Flip Flop Tutorial' href='#tescttfft'>Text to Emoji Short Code Translation Textarea Flip Flop Tutorial<\/a>&#8216;s &#8220;Text to Emoji&#8221; web application.<\/p>\n<p>Within &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s work HTML iframe destination was populated via some HTML via that iframe&#8217;s &#8220;srcdoc&#8221; attribute &#8230; whereas with &#8230;<\/li>\n<li>today&#8217;s work switches the &#8220;target&#8221; attribute of an HTML form (POST<font size=1>ing<\/font> data to some PHP) to our &#8220;overlay preview&#8221; HTML iframe before putting that form&#8217;s &#8220;target&#8221; attribute back to the normal flow of work &#8230; <font color=blue>achieved as simply as adding HTML snippets<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;form id=\"iform\" <font color=blue>onsubmit=\"this.target=document.getElementById('itarget').value; setTimeout(latback, 3000); return true;\"<\/font> target='iftext' method='POST' action='.\/fillin_gaps_with_emojis.php'&gt;<font color=blue>&lt;input type=hidden name=itarget id=itarget value=iftext&gt;&lt;\/input&gt;<\/font><br \/>\n&lt;|-- rest of form follows would include submit button used by \"document.getElementById('mysubm').click();\" code below to submit form --&gt;<br \/>\n&lt;\/form&gt;<br \/>\n<\/code><br \/>\n &#8230; with associated Javascript (after) &#8230;<br \/>\n<code><br \/>\nfunction latback() {<br \/>\n  document.getElementById('itarget').value='iftext';<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and with associated Javascript <font color=blue>(before Preview)<\/font> &#8230;<br \/>\n<code><br \/>\nfunction popdiv(ot) {<br \/>\n  wasih=document.getElementById('intext').value;<br \/>\n  if (unpopsecs != 0 && document.getElementById('khtmlcontent')) {<br \/>\n    <font color=blue>if (1 == 1) {<br \/>\n    document.getElementById('itarget').value='khtmlcontent';<br \/>\n    document.getElementById('khtmlcontent').style.zIndex='99';<br \/>\n    document.getElementById('khtmlcontent').style.display='block';<br \/>\n    document.body.style.cursor='progress';<br \/>\n    document.body.style.cursor='progress';<br \/>\n    document.getElementById('mydiv').style.cursor='progress';<br \/>\n    document.getElementById('khtmlcontent').style.cursor='progress';<br \/>\n    document.getElementById('mysubm').click();<br \/>\n    \/\/document.getElementById('myaltb').click();<br \/>\n    setTimeout(halfpopdiv, Math.floor(eval(unpopsecs \/ 10)));<br \/>\n    setTimeout(unpopdiv, unpopsecs);<br \/>\n    } else <\/font>{<br \/>\n    document.getElementById('khtmlcontent').srcdoc=ot.value;<br \/>\n    document.getElementById('khtmlcontent').style.zIndex='99';<br \/>\n    document.body.style.cursor='progress';<br \/>\n    document.getElementById('mydiv').style.cursor='progress';<br \/>\n    document.getElementById('khtmlcontent').style.cursor='progress';<br \/>\n    setTimeout(halfpopdiv, Math.floor(eval(unpopsecs \/ 10)));<br \/>\n    setTimeout(unpopdiv, unpopsecs);<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Both techniques work to further emphasise just how useful and flexible are HTML <a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' title='HTML iframe tag information from w3schools'>iframe<\/a> elements regarding HTML navigation choices.<\/p>\n<p>Team that HTML iframe navigation talent with the CSS &#8220;overlay&#8221; talents of &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editor-html-preview-tutorial\/'>\n<p> &#8230; effectively controlling the &#8220;overlay&#8221; CSS (inferred, via <a target=_blank title='CSS rgba function information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/func_rgba.asp'>rgba<\/a>) friend &#8230;<\/p>\n<p><\/p>\n<ul>\n<li>opacity &#8230; teamed with other &#8220;overlay&#8221; CSS property friends &#8230;<\/li>\n<li>z-index &#8230; and &#8230;<\/li>\n<li>position:absolute; top:[matchedTopOfUnderlay]px; left:[matchedLeftOfUnderlay]px; (as well as width:[matchedWidthOfUnderlay]px; height:[matchedHeightOfUnderlay]px; today)<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and you have quite a powerful combination to work with to &#8220;jazz up&#8221; the &#8220;display smarts&#8221; of your web applications, a bit reminiscent of <a target=_blank title='Rubber banding' href='https:\/\/www.javatpoint.com\/computer-graphics-elastic-or-rubber-band-techniques'>&#8220;rubber banding&#8221;<\/a> previews of graphic element creations.<\/p>\n<p>Feel free to (re-)try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html-----GETME\" title=\"fillin_gaps_with_emojis.html\">the HTML and Javascript changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html-----GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">&#8220;Text to Emoji&#8221; web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-preview-tutorial\/'>Text to Emoji Preview Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tescttfft'>Previous relevant <a target=_blank title='Text to Emoji Short Code Translation Textarea Flip Flop Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-short-code-translation-textarea-flip-flop-tutorial\/'>Text to Emoji Short Code Translation Textarea Flip Flop 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\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Short Code Translation Textarea Flip Flop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/fillin_gaps_with_emojis_reverse.jpg\" title=\"Text to Emoji Short Code Translation Textarea Flip Flop Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Short Code Translation Textarea Flip Flop Tutorial<\/p><\/div>\n<p>The basis for yesterday&#8217;s <a title='Text to Emoji Short Code Translation Textarea Rotation Tutorial' href='#tescttrt'>Text to Emoji Short Code Translation Textarea Rotation Tutorial<\/a> rotation functionality revolves around the CSS <a target=_blank title='CSS transform property' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform property<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'><p>\ntransform: none|transform-functions|initial|inherit;\n<\/p><\/blockquote>\n<p> &#8230; specifically the use of the &#8220;rotate([numDegrees]deg)&#8221; &#8220;transform-function&#8221; and helped out considerably by a big friend of recent times &#8230; <font size=1>style=<\/font>position:fixed<\/p>\n<p>And today we delve into two more of those &#8220;transform-functions&#8221; to facilitate flip (mirror image in X) and flop (mirror image in Y), adding to yesterday&#8217;s &#8230;<\/p>\n<ul>\n<li>rotation of text &#8230; &#8220;transform-function&#8221; &#8220;rotate([numDegrees]deg)&#8221; &#8230; with today&#8217;s and\/or based &#8230;<\/li>\n<li>flip of text &#8230; &#8220;transform-function&#8221; &#8220;scaleX(-1)&#8221; &#8230; and\/or &#8230;<\/li>\n<li>flop of text &#8230; &#8220;transform-function&#8221; &#8220;scaleY(-1)&#8221;<\/li>\n<\/ul>\n<p> &#8230; all funnelled through that same Javascript prompt user access point of yesterday where the &#8220;prompt&#8221; of the prompt now goes &#8230;<\/p>\n<blockquote><p>\nRotate text by your entry degrees.  Negative entry (including -0) additionally flips.  Appending a space additionally flops.\n<\/p><\/blockquote>\n<p>As you can imagine if you gyrate yourself thinking about &#8220;transformations&#8221; (eg. the Twister game) order can be important, and we found a simplistic idea like &#8230;<\/p>\n<p><code><br \/>\nstyle=\" transform: scale(-1,-1); \"<br \/>\n<\/code><\/p>\n<p> &#8230; (ie. flipping and flopping) applied to one &#8220;div&#8221; element could not be made to work, for us.  So here&#8217;s the lesson here.  If you have nested elements, where this <i>style=&#8221; transform: scale(-1,-1); &#8220;<\/i> fails <font size=1>(and yes, we also failed with <i>style=&#8221; transform: scaleX(-1) scaleY(-1); &#8220;<\/i>)<\/font> we found &#8230;<\/p>\n<ul>\n<li>apply to parent element style=&#8221; transform: scaleX(-1); &#8220;<\/li>\n<li>apply to child element style=&#8221; transform: scaleY(-1); &#8220;<\/li>\n<\/ul>\n<p> &#8230; and suddenly we were getting somewhere.<\/p>\n<p>Again, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php-----GETME\" title=\"fillin_gaps_with_emojis.php\">the changed PHP helper<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php-----GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.php<\/a> to the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">live run<\/a> link off <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html----GETME\" title=\"fillin_gaps_with_emojis.html\">the HTML and Javascript changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html----GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.html<\/a> code.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-short-code-translation-textarea-flip-flop-tutorial\/'>Text to Emoji Short Code Translation Textarea Flip Flop Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tescttrt'>Previous relevant <a target=_blank title='Text to Emoji Short Code Translation Textarea Rotation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-short-code-translation-textarea-rotation-tutorial\/'>Text to Emoji Short Code Translation Textarea Rotation 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\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Short Code Translation Textarea Rotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/fillin_gaps_with_emojis_angle.jpg\" title=\"Text to Emoji Short Code Translation Textarea Rotation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Short Code Translation Textarea Rotation Tutorial<\/p><\/div>\n<p>When you look around you at advertisements and signage you may see lots of ways to represent text, and here we include emojis in that thinking.  And that is another reason we think emojis are useful.  For we graphically challenged, to learn about emojis opens up a whole new area of (self) expression.<\/p>\n<p>As such, onto yesterday&#8217;s <a title='Text to Emoji Short Code Translation Textarea Sharing Tutorial' href='#tescttst'>Text to Emoji Short Code Translation Textarea Sharing Tutorial<\/a> work we wanted to offer a text rotation additional (and optional) piece of functionality that you can access via a &#8220;Text&#8221; hardcoding becomes &#8220;a&#8221; link to prompt window piece of functionality that gets you to some <font color=blue>new PHP<\/font> code &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n <font color=blue>$rot=\"\";<br \/>\n if (isset($_POST['rotate']) || isset($_GET['rotate'])) {<br \/>\n if (isset($_POST['rotate'])) {<br \/>\n   $rot=('' . str_replace('+',' ',urldecode($_POST['rotate'])) . '');<br \/>\n } else {<br \/>\n   $rot=('' . str_replace('+',' ',urldecode($_GET['rotate'])) . '');<br \/>\n }<br \/>\n }<\/font><br \/>\n if (isset($_POST['intext']) || isset($_GET['intext'])) {<br \/>\n if (isset($_POST['intext'])) {<br \/>\n   $intext=' ' . str_replace('+',' ',urldecode($_POST['intext'])) . ' ';<br \/>\n } else {<br \/>\n   $intext=' ' . str_replace('+',' ',urldecode($_GET['intext'])) . ' ';<br \/>\n }<br \/>\n $phpsc='HTTP:\/\/www.rjmprogramming.com.au\/PHP\/short_codes.php';<br \/>\n if (strpos($_SERVER['SERVER_NAME'], \"localhost\") !== false) {<br \/>\n   $phpsc=str_replace(':80\/', '\/', 'http:\/\/localhost:' . $_SERVER['SERVER_PORT'] . '\/short_codes.php');<br \/>\n   \/\/echo $phpsc;<br \/>\n   \/\/exit;<br \/>\n }<br \/>\n $outtxt=file_get_contents($phpsc . '?intext=' . urlencode($intext));<br \/>\n if ($outtxt != \"\") { \/\/file_exists($phpsc)) { \/\/'..\/PHP\/short_codes\/php')) {<br \/>\n  if ($intext != '') {<br \/>\n   $outtext=$intext;<br \/>\n   <font color=blue>if (intval($rot) &lt; 90) {<br \/>\n   $xp=\"60\";<br \/>\n   $yp=\"20\";<br \/>\n   } else if (intval($rot) &lt; 180) {<br \/>\n   $xp=\"80\";<br \/>\n   $yp=\"60\";<br \/>\n   } else if (intval($rot) &lt; 270) {<br \/>\n   $xp=\"60\";<br \/>\n   $yp=\"80\";<br \/>\n   } else {<br \/>\n   $xp=\"40\";<br \/>\n   $yp=\"50\";<br \/>\n   }<\/font><br \/>\n   if ($outtxt == \"\") { $outtxt=file_get_contents($phpsc . '?intext=' . urlencode($intext)); }<br \/>\n   if (strpos($outtxt, '&lt;\/body&gt;') !== false) {<br \/>\n   $bod='&lt;body' . explode('&gt;', explode('&lt;body', $outtxt)[1])[0] . '&gt;';<br \/>\n   $outtext=str_replace('&lt;p&gt;', '', str_replace('&lt;\/p&gt;', '', explode($bod, explode('&lt;\/body&gt;', $outtxt)[0])[1]));<br \/>\n   if ($outtext != $intext) {<br \/>\n   <font color=blue>if ($rot != \"\" && $rot != \"0\") {<br \/>\n   \/\/if (strlen($rot) === 3) {  $xp=80\";   }<br \/>\n   $oneis=explode('.', ('' . sin(deg2rad($rot)) * 100.0))[0];<br \/>\n   $twois=explode('.', ('' . cos(deg2rad($rot)) * 100.0))[0];<br \/>\n   $threeis=explode('.', ('' . (0.0 - sin(deg2rad($rot))) * 100.0))[0];<br \/>\n   $fouris=explode('.', ('' . (0.0 - cos(deg2rad($rot))) * 100.0))[0];<br \/>\n   \/\/echo \"&lt;html&gt;&lt;head&gt;&lt;title&gt;Emoji-ize Text - RJM Programming - June, 2021&lt;\/title&gt;&lt;meta charset='UTF-8'&gt;&lt;\/head&gt;&lt;body style='width:100%;'&gt;&lt;p&gt;\" . str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"$@!\",\" \",trim($outtext))) . \"&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   echo \"&lt;html&gt;&lt;head&gt;&lt;title&gt;Emoji-ize Text - RJM Programming - June, 2021&lt;\/title&gt;&lt;meta charset='UTF-8'&gt;&lt;script type='text\/javascript'&gt;<br \/>\n<br \/>\nfunction getTopLeft(width, height, theta ) { \/\/ thanks to https:\/\/board.flashkit.com\/board\/showthread.php?775357-Find-four-points-of-rotated-rectangle<br \/>\n\t\/\/ half width and height directed appropriately (for top left)<br \/>\n\tvar hw = -width \/ 2;<br \/>\n\tvar hh = -height \/ 2;<br \/>\n\tvar xcos = Math.cos( theta );<br \/>\n\tvar xsin = Math.sin( theta );<br \/>\n\t\/\/alert('hw=' + hw + ' height=' + height + ' theta=' + theta + ' ' + ('' + eval(-1 * eval(hw * xsin + hh * xcos ))).split('.')[0] + '.' + ('' + eval(1 * eval(hw * xcos - hh * xsin))).split('.')[0]);<br \/>\n\t\/\/return ('' + eval(-1 * eval(hw * xcos - hh * xsin))).split('.')[0] + '.' + ('' + eval(-1 * eval(hw * xsin + hh * xcos ))).split('.')[0];<br \/>\n\t\/\/return ('' + eval(-1 * eval(hw * xsin + hh * xcos ))).split('.')[0] + '.' + ('' + eval(1 * eval(hw * xcos - hh * xsin))).split('.')[0];<br \/>\n\treturn ('' + eval(hw * xcos - hh * xsin)).split('.')[0] + '.' + ('' + eval(hw * xsin + hh * xcos )).split('.')[0];<br \/>\n}<br \/>\n<br \/> <br \/>\n    if (window.parent) {  if (parent.document.getElementById('divinvis')) {  var tts='' + parent.document.getElementById('divinvis').getBoundingClientRect().width, tst='' + parent.document.getElementById('divinvis').getBoundingClientRect().height, ttis=getTopLeft(parent.document.getElementById('divinvis').getBoundingClientRect().width,parent.document.getElementById('divinvis').getBoundingClientRect().height,\" . deg2rad($rot) . \"); parent.document.getElementById('divinvis').style.position='fixed'; parent.document.getElementById('divinvis').style.top='\" . $yp . \"%'; parent.document.getElementById('divinvis').style.left='\" . $xp . \"%';  if (1 == 4) { parent.document.getElementById('divinvis').style.transformOrigin='center center'; } var xxx='translate(' + eval(('' + ttis).split('.')[0]) + ',' + eval(('' + ttis).split('.')[1]) + ') ';  if (1 == 1) { xxx=''; } parent.document.getElementById('divinvis').style.transform=xxx + ' rotate(\" . $rot . \"deg) ' + ''; parent.document.getElementById('divinvis').style.opacity='0.5';   }  } &lt;\/script&gt;&lt;\/head&gt;&lt;body style='width:100%;'&gt;&lt;p&gt;\" . str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"$@!\",\" \",trim($outtext))) . \"&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   } else {<\/font><br \/>\n   echo \"&lt;html&gt;&lt;head&gt;&lt;title&gt;Emoji-ize Text - RJM Programming - June, 2021&lt;\/title&gt;&lt;meta charset='UTF-8'&gt;&lt;\/head&gt;&lt;body style='width:100%;'&gt;&lt;p&gt;\" . str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"$@!\",\" \",trim($outtext))) . \"&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   <font color=blue>}<\/font><br \/>\n   exit;<br \/>\n   }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php----GETME\" title=\"fillin_gaps_with_emojis.php\">The changed PHP helper<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php----GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.php<\/a> to the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">live run<\/a> link off <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html---GETME\" title=\"fillin_gaps_with_emojis.html\">the HTML and Javascript changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html---GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.html<\/a> code.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-short-code-translation-textarea-rotation-tutorial\/'>Text to Emoji Short Code Translation Textarea Rotation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tescttst'>Previous relevant <a target=_blank title='Text to Emoji Short Code Translation Textarea Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-short-code-translation-textarea-sharing-tutorial\/'>Text to Emoji Short Code Translation Textarea Sharing 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\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Short Code Translation Textarea Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/fillin_gaps_with_emojis_short_codes.jpg\" title=\"Text to Emoji Short Code Translation Textarea Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Short Code Translation Textarea Sharing Tutorial<\/p><\/div>\n<p>The work of yesterday&#8217;s <a target=_blank title='Short Code Personalized Emoji in Sector Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/short-code-personalized-emoji-in-sector-game-tutorial\/'>Short Code Personalized Emoji in Sector Game Tutorial<\/a> had more implications than just for the game web application of the &#8220;discovery time&#8221; &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/short-code-personalized-emoji-in-sector-game-tutorial\/'>\n<p>If you are a programmer dealing with emojis all the time, and therefore visiting websites like &#8230;<\/p>\n<p><\/p>\n<ul>\n<li><a target=_blank title='Emojipedia' href='https:\/\/emojipedia.org\/'>Emojipedia<\/a><\/li>\n<li><a target=_blank title='FileFormat' href='https:\/\/www.fileformat.info\/'>FileFormat<\/a><\/li>\n<\/ul>\n<p><\/p>\n<p> &#8230; on a regular basis you will probably have seen mention of Emoji &#8220;Short codes&#8221; of the form &#8220;<i>:[short_code]:<\/i>&#8221; (eg. <i>:e-mail:<\/i> or <i>:grinning_face:<\/i>) used by <a target=_blank href=\"https:\/\/github.com\">Github<\/a> and <a target=_blank href=\"https:\/\/slack.com\">Slack<\/a> (and, we think, <a target=_blank href=\"https:\/\/facebook.com\">Facebook<\/a>) which we want to get into today, as an idea for our players in our Emoji in Sector game be able to personalize their player names<\/p>\n<\/blockquote>\n<p>The concept of emoji short codes gives us a foot in the door to English Phrase &#8220;emoji translation&#8221; <font size=1>albeit tiny phrases<\/font> &#8230; still?!  Do you remember the work of the reasonably recent <a title='Text to Emoji Translation Textarea Sharing Tutorial' href='#tettst'>Text to Emoji Translation Textarea Sharing Tutorial<\/a>?  Well, rather than &#8230;<\/p>\n<ul>\n<li>&#8220;word by word&#8221; emoji translation principles (as used previously) &#8230; we can now offer &#8230;<\/li>\n<li>emoji short code translation of recognised English Phrases (with one underscored emoji short code representing an emoji for those words of an English Phrase) &#8230; <font size=1>eg. &#8220;man running&#8221; or &#8220;disappointed face&#8221;<\/font> &#8230; all the way back to single word short code translation &#8220;fall throughs&#8221; left (like above) &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n if (file_exists('..\/PHP\/short_codes\/php')) {<br \/>\n  if ($intext != '') {<br \/>\n   $outtext=$intext;<br \/>\n   $outtxt=file_get_contents('..\/PHP\/short_codes\/php?intext=' . urlencode($intext));<br \/>\n   if (strpos($outtxt, '&lt;\/body&gt;') !== false) {<br \/>\n   $bod='&lt;body' . explode('&gt;', explode('&lt;body', $outtxt)[1])[0] . '&gt;';<br \/>\n   $outtext=str_replace('&lt;p&gt;', '', str_replace('&lt;\/p&gt;', '', explode($bod, explode('&lt;\/body&gt;', $outtxt)[0])[1]));<br \/>\n   if ($outtext != $intext) {<br \/>\n   echo \"&lt;html&gt;&lt;head&gt;&lt;title&gt;Emoji-ize Text - RJM Programming - June, 2021&lt;\/title&gt;&lt;meta charset='UTF-8'&gt;&lt;\/head&gt;&lt;body style='width:100%;'&gt;&lt;p&gt;\" . str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"$@!\",\" \",trim($outtext))) . \"&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n   exit;<br \/>\n   }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; as a better paradigm <font size=1>(a tad more <a target=_blank title='Artificial Intelligence information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Artificial_intelligence'>AI<\/a> feeling)<\/font> for the workings of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php---GETME\" title=\"fillin_gaps_with_emojis.php\">the changed PHP helper<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php---GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.php<\/a> to the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">live run<\/a> link we welcome you to (re-)try.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-short-code-translation-textarea-sharing-tutorial\/'>Text to Emoji Short Code Translation Textarea Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tettst'>Previous relevant <a target=_blank title='Text to Emoji Translation Textarea Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-translation-textarea-sharing-tutorial\/'>Text to Emoji Translation Textarea Sharing 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\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Translation Textarea Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/fillin_gaps_with_emojis_emailsms.jpg\" title=\"Text to Emoji Translation Textarea Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Translation Textarea Sharing Tutorial<\/p><\/div>\n<p>The recent <a title='Text to Emoji Translation Textarea PHP Sort Tutorial' href='#tettphpst'>Text to Emoji Translation Textarea PHP Sort Tutorial<\/a> got to &#8220;selfish point status&#8221;.   Huh?!   Well, that is the status with a web application that &#8220;creates&#8221; or &#8220;converts&#8221; or can be thought of as &#8220;useful&#8221; or being a &#8220;tool&#8221; but makes no &#8220;internal use&#8221; functionality to help with sharing your creativity with anybody else.  Of course, any sharing is optional, but it&#8217;s good to include it in the logic, where possible, and with this particular web application it is &#8220;hugely possible&#8221; using four modes of sharing conduit into play &#8230;<\/p>\n<ul>\n<li>email emoji-izing text via an inline HTML email form sent via PHP mail<\/li>\n<li>email emoji-izing text via a downloadable HTML attachment sent via PHP mail<\/li>\n<li>email emoji-izing text via a URL link in a client email via &#8220;a&#8221; &#8220;mailto:&#8221; link (that you can amend further at the client email application end)<\/li>\n<li>SMS emoji-izing text via a URL link in a client email via &#8220;a&#8221; &#8220;sms:&#8221; link<\/li>\n<\/ul>\n<p> &#8230; and the newly added &#8220;Email or SMS&#8221; input type=submit button added can be used in <i>email emoji-izing text via an inline HTML email form sent via PHP mail<\/i> so as, if required, to continue on with the chain of communication.<\/p>\n<p>Interesting things we needed to do, and surprised us <font size=1>(some of which just constantly surprise me, but perhaps not you)<\/font>, were &#8230;<\/p>\n<ul>\n<li>email emoji-izing text via an inline HTML email form sent via PHP mail &#8230;\n<ol>\n<li>we needed to allow GET (only way inline HTML email forms work) logic (work the more widely distributed &#8220;name&#8221; attributes for input type=submit elements) &#8230;<br \/>\n<code><br \/>\nvar intext=location.search.split('intext=')[1] ? decodeURIComponent(location.search.split('intext=')[1].split('&')[0]).replace(\/\\+\/g,' ') : '';<br \/>\nvar emailsms=location.search.split('emailsms=')[1] ? decodeURIComponent(location.search.split('emailsms=')[1].split('&')[0]).replace(\/\\+\/g,' ') : '';<br \/>\nvar myaltb=location.search.split('myaltb=')[1] ? decodeURIComponent(location.search.split('myaltb=')[1].split('&')[0]).replace(\/\\+\/g,' ') : '';<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<li>email emoji-izing text via a downloadable HTML attachment sent via PHP mail &#8230;\n<ol>\n<li>need for &#8230;<br \/>\n<code>&lt;meta charset=\"UTF-8\"&gt;<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<li>email emoji-izing text via a URL link in a client email via &#8220;a&#8221; &#8220;mailto:&#8221; link (that you can amend further at the client email application end) &#8230;\n<ol>\n<li>no need for double encodeURIComponent usage (whereas SMS below does need) as per &#8230;<br \/>\n<code><br \/>\nfunction dummyencodeURIComponent(invl) {<br \/>\n  return invl;<br \/>\n}<br \/>\n<br \/>\n         ais.href='mailto:' + etois + '?subject=' + encodeURIComponent('My Emoji-izing Text') + '&body=' + encodeURIComponent('HTTPS:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html?intext=' + dummyencodeURIComponent(encodeURIComponent(document.getElementById('intext').value)));<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<li>SMS emoji-izing text via a URL link in a client email via &#8220;a&#8221; &#8220;sms:&#8221; link &#8230;\n<ol>\n<li>need for double encodeURIComponent usage as per &#8230;<br \/>\n<code><br \/>\n         ais.href='sms:' + etois + '&body=' + encodeURIComponent('HTTPS:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html?intext=' +  encodeURIComponent(encodeURIComponent(document.getElementById('intext').value)));<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>And so <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php--GETME\" title=\"fillin_gaps_with_emojis.php\">the changed PHP helper<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php--GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.php<\/a> is ready for you to (re-)try at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">live run<\/a> link, where you can share your creativity.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-translation-textarea-sharing-tutorial\/'>Text to Emoji Translation Textarea Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tettphpst'>Previous relevant <a target=_blank title='Text to Emoji Translation Textarea PHP Sort Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-translation-textarea-php-sort-tutorial\/'>Text to Emoji Translation Textarea PHP Sort 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\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Translation Textarea PHP Sort Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_ize_long_bad_to_good.jpg\" title=\"Text to Emoji Translation Textarea PHP Sort Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Translation Textarea PHP Sort Tutorial<\/p><\/div>\n<p>You can definitely benefit, as a programmer, with a sceptical outlook.  The way we developed the recent <a title='Text to Emoji Translation Textarea Tutorial' href='#tettt'>Text to Emoji Translation Textarea Tutorial<\/a>&#8216;s web application was a case in point.  It felt too simplistic by half, and so it panned out to be.  But here again, revisits help.  Trying things out, and honestly trying to break it.  This &#8220;trying to break it&#8221; started out with us trying &#8220;face&#8221; and &#8220;smile&#8221; and combinations to no avail.  No emoji description is that simple.  But then we tried &#8230;<\/p>\n<p><code><br \/>\nsmile, Grinning Face with Sweat<br \/>\n<\/code><\/p>\n<p> &#8230; and that&#8217;s where we discovered the source of our unease.  Before the fix it &#8220;Emoji-ized&#8221; this to &#8230;<\/p>\n<p><code><br \/>\nsmile, &#128512; with Sweat<br \/>\n<\/code><\/p>\n<p> &#8230; whereas it would have been better to have &#8220;Emoji-ized&#8221; that to &#8230;<\/p>\n<p><code><br \/>\nsmile, &#128517;<br \/>\n<\/code><\/p>\n<p>So, where to fix this?  It&#8217;s the PHP helper responsible.  Could it be as simple as presenting the <i>~[Emoji]|[Text]<\/i> array pairings in an order whereby the longer <i>[Text]<\/i> lengths appear first?  So far, with our testing, it appears &#8230; &#8220;Yup&#8221;.<\/p>\n<p>And so we involve PHP&#8217;s <a target=_blank title='PHP sort' href='https:\/\/www.php.net\/manual\/en\/function.sort.php'>sort<\/a> function, <font color=blue>in context<\/font>, in the changed PHP code below &#8230;<\/p>\n<p><code><br \/>\n$ diff fillin_gaps_with_emojis.php-GETME fillin_gaps_with_emojis.php_GETME<br \/>\n31,44d30<br \/>\n&lt;    $emarrpre=explode($ea, $objphp);<br \/>\n&lt;    $objphp=$ea;<br \/>\n&lt;    $emarr=[];<br \/>\n&lt;    $emarrlens=[];<br \/>\n&lt;    for ($ib=0; $ib&lt;sizeof($emarrpre); $ib++) {<br \/>\n&lt;      <font color=purple>array_push($emarrlens, ('' . (99 - strlen($emarrpre[$ib]))) . $emarrpre[$ib]);<\/font><br \/>\n&lt;    }<br \/>\n&lt;    <font color=blue>sort($emarrlens);<\/font><br \/>\n&lt;    for ($ib=0; $ib&lt;sizeof($emarrlens); $ib++) {<br \/>\n&lt;      $objphp.=substr($emarrlens[$ib], 2) . '~'; \/\/array_push($emarr, substr($emarrlens[$ib], 2));<br \/>\n&lt;    }<br \/>\n&lt;    $emarr=explode($endspan, $objphp);<br \/>\n&lt;  } else {<br \/>\n&lt;    $emarr=explode($endspan, $objphp);<br \/>\n45a32<br \/>\n&gt;  $emarr=explode($endspan, $objphp);<br \/>\n<\/code><\/p>\n<p>Have you noticed other types of &#8220;sort&#8221; functions in PHP?  Why not use those?  Well, when possible, we like to work with the &#8220;no frills&#8221; versions of language choices, rather than the obverse idea of &#8220;making the code less verbose&#8221;.  We like to fit in with &#8220;what has always been there&#8221; we&#8217;d guess you&#8217;d say.  And so that is where that <font color=purple>codeline<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=purple>array_push($emarrlens, ('' . (99 - strlen($emarrpre[$ib]))) . $emarrpre[$ib]);<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; is turning a &#8220;numeric sorting concept&#8221; (the length of [Text]) into a set length character result <font size=1>(us hoping no [Text] is longer than 89)<\/font>.<\/p>\n<p>No change to the parent HTML\/Javascript code here for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php-GETME\" title=\"fillin_gaps_with_emojis.php\">the changed PHP helper<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php-GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.php<\/a> ready for you to (re-)try at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-translation-textarea-php-sort-tutorial\/'>Text to Emoji Translation Textarea PHP Sort Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tettt'>Previous relevant <a target=_blank title='Text to Emoji Translation Textarea Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-translation-textarea-tutorial\/'>Text to Emoji Translation Textarea 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\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Translation Textarea Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_ize_ta.jpg\" title=\"Text to Emoji Translation Textarea Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Translation Textarea Tutorial<\/p><\/div>\n<p>Within the design of the web application behind yesterday&#8217;s <a title='Text to Emoji Translation Primer Tutorial' href='#tetpt'>Text to Emoji Translation Primer Tutorial<\/a> it would have grated with many web purists that &#8230;<\/p>\n<ul>\n<li>the data being textual (emojis are text) &#8230;<\/li>\n<li>we entered &#8220;data&#8221; into a &#8220;textarea&#8221; element &#8230; no complaints &#8230; very suitable &#8230; but &#8230;<\/li>\n<li>we translated into an &#8220;iframe&#8221; element &#8230; huh?!<\/li>\n<\/ul>\n<p>Yes, this is not the best approach, we concur.  And yet, it is not all bad.  Let&#8217;s tabularize what we mean here (including macOS two finger gesture or Windows right click menu functionality possibilities), below &#8230;<\/p>\n<table>\n<tr>\n<th>Element type<\/th>\n<th>Description<\/th>\n<th>Pro<\/th>\n<th>Con<\/th>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Repository of Text data<\/td>\n<td>&#10004;&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Repository of Text data<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Resizable<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Resizable<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Paragraph direction control<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Paragraph direction control<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Printing of Text data<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Printing of Text data<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Copy\/paste of Text data<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Copy\/paste of Text data<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>New tab<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>New tab<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>New window<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>New window<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Spelling and grammar check<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Spelling and grammar check<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Text to speech (macOS)<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Text to speech (macOS)<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Uppercase\/lowercase (macOS)<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Uppercase\/lowercase (macOS)<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Text services (macOS eg. iTunes Text to Speech recordings)<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Text services (macOS eg. iTunes Text to Speech recordings)<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Search engine lookup (macOS)<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Search engine lookup (macOS)<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Element source code<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Element source code<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td>Emoji specific title on non-mobile hover<\/td>\n<td><\/td>\n<td>&#10060;<\/td>\n<\/tr>\n<tr>\n<td>Iframe<\/td>\n<td>Emoji specific title on non-mobile hover<\/td>\n<td>&#10004;<\/td>\n<td><\/td>\n<\/tr>\n<\/table>\n<p>And so, we allow for the old &#8220;Iframe&#8221; element approach to still be accessed, but turn the default workflow into a design whereby &#8220;Emoji-ize&#8221; textual results end up in a &#8220;Textarea&#8221; element for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html-GETME\" title=\"fillin_gaps_with_emojis.html\">a changed parent HTML\/Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html-GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.html<\/a> ready for you to (re-)try at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-translation-textarea-tutorial\/'>Text to Emoji Translation Textarea Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tetpt'>Previous relevant <a target=_blank title='Text to Emoji Translation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-translation-primer-tutorial\/'>Text to Emoji Translation 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\/fillin_gaps_with_emojis.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text to Emoji Translation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_ize.jpg\" title=\"Text to Emoji Translation Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Text to Emoji Translation Primer Tutorial<\/p><\/div>\n<p>We&#8217;re starting a new coding project, today, calling on the genius of <a target=_blank title='Emojipedia' href='http:\/\/www.emojipedia.org'>Emojipedia<\/a> for an &#8230;<\/p>\n<p><code><br \/>\nEmoji-ize Text<br \/>\n<\/code><\/p>\n<p> <font size=1>&#8230; mangling of English<\/font> &#8230; as well as an interesting substitutional feeling web tool.<\/p>\n<p>Admittedly we started the day wondering about that &#8220;bluetooth icon&#8221; Spotify tutorial of recent times, wondering about how we could have improved the presentation via &#8230;<\/p>\n<ul>\n<li>delayed iPhone photo technique &#8230; yes, but what if there was &#8230;<\/li>\n<li>an emoji for that Bluetooth icon look a lot of us know by now<\/li>\n<\/ul>\n<p> &#8230; and looking into that second idea was surprised that the Bluetooth icon, let alone emojis for concepts like WiFi or &#8220;Power On&#8221; (ie. concepts, by and large, we guess) will either never become emojis or will be slow to get to becoming an emoji.  More, emojis suit our real object nouns in our languages, and so we wanted to write a substitutional web application to see whether my theorizing carries any weight.<\/p>\n<p>The user enters into a textarea element their text of interest, then they click\/touch a button, and this HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html_GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.html<\/a> parent asks of the called PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.php_GETME\" title=\"fillin_gaps_with_emojis.php\">fillin_gaps_with_emojis.php<\/a><\/p>\n<p>Simple idea you might be interested in trying, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">in a new window<\/a>, or below &#8230;<\/p>\n<p><iframe style='width:100%;height:900px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html'><\/iframe><\/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='#d52472' onclick='var dv=document.getElementById(\"d52472\"); 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='d52472' 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='#d52489' onclick='var dv=document.getElementById(\"d52489\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52489' 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='#d52514' onclick='var dv=document.getElementById(\"d52514\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52514' 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='#d52562' onclick='var dv=document.getElementById(\"d52562\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52562' 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='#d52993' onclick='var dv=document.getElementById(\"d52993\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji-short-code\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52993' 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='#d53001' onclick='var dv=document.getElementById(\"d53001\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/rotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53001' 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='#d53007' onclick='var dv=document.getElementById(\"d53007\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/flip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53007' 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='#d54030' onclick='var dv=document.getElementById(\"d54030\"); 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='d54030' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s HTML Editor HTML Preview Tutorial set us to thinking that its &#8220;Preview&#8221; of &#8220;future display&#8221; could also work well with our Text to Emoji Short Code Translation Textarea Flip Flop Tutorial&#8216;s &#8220;Text to Emoji&#8221; web application. Within &#8230; yesterday&#8217;s &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-preview-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":[263,281,385,452,576,587,652,3862,830,876,894,1988,983,3863,997,3864,1209,3565,1254,1301,1319,1496],"class_list":["post-54030","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-conversion","tag-css","tag-emoji","tag-form","tag-html","tag-iframe","tag-javascript","tag-lookup","tag-navigation","tag-opacity","tag-overlay","tag-position","tag-preview","tag-previewing","tag-programming","tag-rubber-banding","tag-style","tag-target","tag-text","tag-translation","tag-tutorial","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54030"}],"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=54030"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54030\/revisions"}],"predecessor-version":[{"id":54045,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54030\/revisions\/54045"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=54030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=54030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=54030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}