{"id":69816,"date":"2025-09-18T03:01:00","date_gmt":"2025-09-17T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69816"},"modified":"2025-09-18T14:06:17","modified_gmt":"2025-09-18T04:06:17","slug":"text-background-clip-animation-emoji-overlay-svg-sharing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-animation-emoji-overlay-svg-sharing-tutorial\/","title":{"rendered":"Text Background Clip Animation Emoji Overlay SVG Sharing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text Background Clip Animation Emoji Overlay SVG Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji_animation_more_svg_share.gif\" title=\"Text Background Clip Animation Emoji Overlay SVG Sharing Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Text Background Clip Animation Emoji Overlay SVG Sharing Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Text Background Clip Animation Emoji Overlay SVG Tutorial' href='#tbcaeosvgt'>Text Background Clip Animation Emoji Overlay SVG Tutorial<\/a> you start getting web browser support for context (ie. right click) menu options such as &#8230;<\/p>\n<ul>\n<li>Copy image<\/li>\n<li>Copy image address<\/li>\n<li>Save image as<\/li>\n<\/ul>\n<p> &#8230; <font size=1>the latter effectively your &#8220;download option&#8221;<\/font> when we can reach the HTML scenario whereby the user&#8217;s right click is over (an element such as) &#8230;<\/p>\n<p><code><br \/>\n&lt;img type=\"image\/svg\" src=\"\/\/www.rjmprogramming.com.au\/tmp\/svg_e_a_o_17_09_2025_13_32_14.svg\"&gt;&lt;\/img&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which today&#8217;s work is all about trying to achieve in adding more practical &#8220;export aid tools&#8221; into the &#8220;sharing mix&#8221;.<\/p>\n<p>As with our last <a target=\"_blank\" title='Media Gallery project' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-winding-up-for-now-tutorial\/' rel=\"noopener\">Media Gallery project<\/a>, with <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php-----------------------GETME' title='signature_signature.php' rel=\"noopener\">our changed<\/a> PHP helper <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php-----------------------GETME' title='signature_signature.php' rel=\"noopener\">signature_signature.php<\/a><font color=olive>&#8216;s<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_POST['an_i_thingo'])) {<br \/>\n $ds=DIRECTORY_SEPARATOR;<br \/>\n <font color=olive>if (isset($_POST['svg_filename'])) {<br \/>\n    foreach (glob($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'tmp' . DIRECTORY_SEPARATOR . 'svg_e_a_o_' . '*.*') as $dfilename) {<br \/>\n     $filemtime = filemtime($dfilename);<br \/>\n     if (time() - $filemtime >= 172800) {  \/\/ 86400 seconds in a day<br \/>\n        unlink($dfilename);<br \/>\n     }<br \/>\n    }<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . $ds . 'tmp' . $ds . '' . basename(str_replace('+',' ',urldecode($_POST['svg_filename']))), str_replace('+',' ',urldecode($_POST['an_i_thingo'])));<br \/>\n    exit;<br \/>\n }<\/font><br \/>\n \/\/ rest of the usual if block<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; PHP code called into play via <font color=blue>some Ajax<\/font> Javascript calling &#8230;<\/p>\n<p><code><br \/>\n  var outfile='', wootoo=null;<br \/>\n  <font color=blue>var czhr=null, czform=null;<\/font><br \/>\n<br \/>\n  function ourprompt(svgoh) {<br \/>\n    var oursvgoh=svgoh;<br \/>\n    var tag=null;<br \/>\n    var recipient='';<br \/>\n    var dt=new Date();<br \/>\n    var dsuff=('' + dt.toLocaleDateString() + ' ' + dt.toLocaleTimeString()).replace(\/\\:\/g,'_').replace(\/\\ \/g,'_').replace(\/\\\/\/g,'_').replace(\/\\-\/g,'_');<br \/>\n    outfile='http:\/\/www.rjmprogramming.com.au\/tmp\/svg_e_a_o_' + dsuff + '.svg';<br \/>\n    var xc=prompt('Optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:\/\/\/Applications\/MAMP\/htdocs\/test.svg ) or on a macOS MAMP local web server environment ( or ht<font color=black>tp<\/font>:\/\/localhost:8888\/test.svg could also work here ).  Or leave as is and use OK answer to save to URL ' + outfile + ' and display and\/or share.  To just email enter email address or to SMS enter a mobile number.  An alternative filename suffix to ' + dsuff + ' is another OK answer option.  Any other OK answers do nothing more.', svgoh);<br \/>\n    if (xc == null) {<br \/>\n    outfile='';<br \/>\n    } else if (xc == svgoh) {<br \/>\n     outfile=outfile;<br \/>\n    } else if (xc.indexOf(' ') == -1 && xc.indexOf('@') != -1) {<br \/>\n      recipient=xc;<br \/>\n      tag = document.createElement('a');<br \/>\n      tag.id='aem';<br \/>\n      tag.target='_top';<br \/>\n      tag.href='mailto:' + recipient + '?subject=Emoji%20Animated%20Overlay%20SVG%20image&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#' + encodeURIComponent(svgoh.replace(' onclick=\"top.ourprompt(this.outerHTML);\"', ' title=\"' + outfile + '\"')));<br \/>\n      tag.style.display='none';<br \/>\n      document.body.appendChild(tag);<br \/>\n      tag.click();<br \/>\n    } else if (xc.trim() != '' && xc.indexOf(' ') == -1 && xc.replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n      recipient=xc;<br \/>\n      tag = document.createElement('a');<br \/>\n      tag.id='aem';<br \/>\n      tag.target='_top';<br \/>\n      tag.href='sms:' + recipient + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#' + encodeURIComponent(svgoh.replace(' onclick=\"top.ourprompt(this.outerHTML);\"', ' title=\"' + outfile + '\"')));<br \/>\n      tag.style.display='none';<br \/>\n      document.body.appendChild(tag);<br \/>\n      tag.click();<br \/>\n    } else if (xc.trim() != '' && xc.indexOf('&lt;') == -1 && xc.indexOf(' ') == -1) {<br \/>\n      outfile='http:\/\/www.rjmprogramming.com.au\/tmp\/svg_e_a_o_' + xc + '.svg';<br \/>\n    } else if (xc.trim() != '' && xc.indexOf('&lt;svg') == 0 && xc.indexOf('&lt;\/svg&gt;') != -1) {<br \/>\n      oursvgoh='' + xc.split('&lt;\/svg&gt;')[0] + '&lt;\/svg&gt;';<br \/>\n    } else {<br \/>\n      outfile='';<br \/>\n    }<br \/>\n    <br \/>\n    if (outfile != '') {<br \/>\n     <br \/>\n          <font color=blue>czhr = new XMLHttpRequest();<br \/>\n          czform = new FormData();<br \/>\n          czform.append('an_i_thingo', oursvgoh);<br \/>\n          czform.append('svg_filename', outfile);<br \/>\n          czhr.onreadystatechange = showStuff;<br \/>\n          czhr.open('post', '\/HTMLCSS\/signature_signature.php', true);<br \/>\n          czhr.send(czform);<\/font><br \/>\n      <br \/> <br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n<font color=blue>function showStuff() {<br \/>\n  if (czhr != null) {<br \/>\n  if (czhr.readyState == 4) {<br \/>\n    if (czhr.status == 200) {<br \/>\n          setTimeout(function(){<br \/>\n            wootoo=window.open('','_blank','top=50,left=50,width=800,height=800');<br \/>\n            wootoo.document.write('&lt;html&gt;&lt;body onload=\"document.title=document.body.title;\" title=\"' + outfile + '\"&gt;&lt;img type=\"image\/svg\" src=\"\/\/' + outfile.split('\/\/')[1] + '\"&gt;&lt;\/img&gt;&lt;scri' + 'pt type=text\/javascript&gt; setTimeout(function(){ document.title=document.body.title; }, 5000); &lt;\/scr' + 'ipt&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n          }, 1000);<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n}   <\/font><br \/>\n<\/code><\/p>\n<p> &#8230; and where we set up an arrangement so that &#8230;<\/p>\n<ul>\n<li>for a couple of days &#8230;<\/li>\n<li>we arrange for the creation of SVG files in a public URL place &#8230;<\/li>\n<li>should the user make use of <font color=blue>our new functionality<\/font> &#8230;<br \/>\n<blockquote><p>\n    var xc=prompt(&#8216;Optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:\/\/\/Applications\/MAMP\/htdocs\/test.svg ) or on a macOS MAMP local web server environment ( or http:\/\/localhost:8888\/test.svg could also work here ).<font color=blue>  Or leave as is and use OK answer to save to URL &#8216; + outfile + &#8216; and display and\/or share.  To just email enter email address or to SMS enter a mobile number.  An alternative filename suffix to &#8216; + dsuff + &#8216; is another OK answer option.  Any other OK answers do nothing more.<\/font>&#8216;, svgoh);\n<\/p><\/blockquote>\n<p> &#8230; off that amended Javascript prompt window added yesterday\n<\/ul>\n<p>And if the two days is up (possible for an email or SMS link <font size=1>(<span><a target=\"_blank\" class=\"audioytplay\" href=\"https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=157s\" rel=\"noopener\">again<\/a><\/span> depending on hashtag methodologies)<\/font> click after the initial action)?  Well, we construct some SVG within a webpage for that scenario, but, as we say, that is not as cute, as far as web browser native functionality smarts go <font size=1>(though you can still View Page Source and work from there, for masochists out there)<\/font>, as when an actual SVG image file sits there on the web server, regarding <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html----GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">the SVG sharably changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html----GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">fifth draft<\/a> version of a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" title=\"overlay_emoji.php\" rel=\"noopener\">&#8220;Text Background Clip&#8221; client 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-background-clip-animation-emoji-overlay-svg-sharing-tutorial\/' rel=\"noopener\">Text Background Clip Animation Emoji Overlay SVG Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tbcaeosvgt'>Previous relevant <a target=\"_blank\" title='Text Background Clip Animation Emoji Overlay SVG Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-animation-emoji-overlay-svg-tutorial\/' rel=\"noopener\">Text Background Clip Animation Emoji Overlay SVG Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text Background Clip Animation Emoji Overlay SVG Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji_animation_more_svg.gif\" title=\"Text Background Clip Animation Emoji Overlay SVG Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Text Background Clip Animation Emoji Overlay SVG Tutorial<\/p><\/div>\n<p>As far as &#8220;heading towards creating a tool&#8221; from yesterday&#8217;s <a title='Text Background Clip Animation Emoji Overlay Tutorial' href='#tbcaeot'>Text Background Clip Animation Emoji Overlay Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ol>\n<li>emoji<\/li>\n<li>overlay<\/li>\n<li>animation<\/li>\n<\/ol>\n<p> &#8230; work beginnings we&#8217;re harnessing SVG&#8217;s <a target=\"_blank\" title='SVG foreignObject' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Reference\/Element\/foreignObject' rel=\"noopener\">foreignObject<\/a> <sup>sub<\/sup>element to start <i>up<\/i> that <i>avenue<\/i> <font size=1>(as some relief from the <i>road<\/i>s heading <i>down<\/i> lately)<\/font>.<\/p>\n<p>SVG has it&#8217;s own animation abilities, but thinking we could simulate the keyframes and transitions CSS animations over the last couple of days sounded daunting.  As were HTML5 canvas usage ideas.  So we went down the foreignObject <i>avenue<\/i> and have been pleased we did, really.  Those keyframes and transitions animations worked but we think the background text clipping may need more research or will pan out not to be translatable to the &#8230;<\/p>\n<p><code><br \/>\nStandalone SVG image creator<br \/>\n<\/code><\/p>\n<p> &#8230; <font size=1>within our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts' rel=\"noopener\">&#8220;reveal&#8221;<\/a> <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> hosting<\/font> tool we hope to improve upon, from our start, today, in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html---GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">the SVG saveably changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html---GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">fourth draft<\/a> version of a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" title=\"overlay_emoji.php\" rel=\"noopener\">&#8220;Text Background Clip&#8221; client 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-background-clip-animation-emoji-overlay-svg-tutorial\/' rel=\"noopener\">Text Background Clip Animation Emoji Overlay SVG Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tbcaeot'>Previous relevant <a target=\"_blank\" title='Text Background Clip Animation Emoji Overlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-animation-emoji-overlay-tutorial\/' rel=\"noopener\">Text Background Clip Animation Emoji Overlay Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text Background Clip Animation Emoji Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji_animation_more.gif\" title=\"Text Background Clip Animation Emoji Overlay Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Text Background Clip Animation Emoji Overlay Tutorial<\/p><\/div>\n<p>It&#8217;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" rel=\"noopener\">&#8220;overlay<\/a> day&#8221; onto yesterday&#8217;s <a title='Text Background Clip Animation Tutorial' href='#tbcat'>Text Background Clip Animation Tutorial<\/a>, and we like &#8220;overlay days&#8221; much better than any &#8220;underlay days&#8221; it&#8217;s got to be said &#8230; <a target=\"_blank\" class=\"audioytplay\" href='https:\/\/www.youtube.com\/watch?v=5bmiDLH5htU' rel=\"noopener\">although?!<\/a><\/p>\n<p>So what constitutes a good <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" rel=\"noopener\">&#8220;overlay<\/a> day&#8221; to us?  It&#8217;s one that includes some\/all of (the CSS concepts) &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' rel=\"noopener\">position<\/a>: absolute;<\/li>\n<li>left: [position in X]px;  top: [position in Y]px;<\/li>\n<li><a target=\"_blank\" title='Opacity information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_image_transparency.asp' rel=\"noopener\">opacity<\/a>: [from 0 to 1];<\/li>\n<li><a target=\"_blank\" title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' rel=\"noopener\">z-index<\/a>: [the larger the more prominent];<\/li>\n<\/ul>\n<p> &#8230; though the last we did not need so far, and the use of the great Javascript method [element].<a target=\"_blank\" title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect' rel=\"noopener\">getBoundingClientRect<\/a>() <font color=blue>as exemplified by<\/font> &#8230;<\/p>\n<p><code><br \/>\n    <font color=blue>var rectis=document.getElementById('box').getBoundingClientRect();<\/font><br \/>\n    document.getElementById('bbox').style.position='absolute';<br \/>\n    document.getElementById('bbox').style.left='' + rectis.left + 'px';<br \/>\n    document.getElementById('bbox').style.top='' + rectis.top + 'px';<br \/>\n    document.getElementById('bbox').style.display='inline-block';<br \/>\n    <font color=purple>document.getElementById('box').className='box';<br \/>\n    document.getElementById('bbox').className='box';<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; where you will also see us better synchronizing the animation start by <font color=purple>dynamically allocating element <i>class<\/i> (via Javascript DOM means) as close to the same time as possible<\/font> in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html--GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">the &#8220;overlay&#8221; changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html--GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">third draft<\/a> version of a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" title=\"overlay_emoji.php\" rel=\"noopener\">&#8220;Text Background Clip&#8221; client 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\/new-text-background-clip-animation-tutorial\/' rel=\"noopener\">New Text Background Clip Animation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tbcat'>Previous relevant <a target=\"_blank\" title='Text Background Clip Animation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-animation-tutorial\/' rel=\"noopener\">Text Background Clip Animation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text Background Clip Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji_animation.jpg\" title=\"Text Background Clip Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Text Background Clip Animation Tutorial<\/p><\/div>\n<p>Today we&#8217;re returning to the work of <a title='Text Background Clip Primer Tutorial' href='#tbcpt'>Text Background Clip Primer Tutorial<\/a> and adding a layer of &#8230;<\/p>\n<blockquote><p>\nDo It Yourself animation\n<\/p><\/blockquote>\n<p> &#8230; possibilities for the user.  We grant you, the Text Background Clip aspects are, and remain, at least in our mind, the main talking point here, but it represents to us &#8220;a way in&#8221; <font size=1>(perhaps to a dead-end, but we are hoping not)<\/font> regarding the concepts of &#8230;<\/p>\n<ol>\n<li>emoji<\/li>\n<li>overlay<\/li>\n<li>animation<\/li>\n<\/ol>\n<p> &#8230; and this project had the first, and now we&#8217;re easing our way into the third today, with the reason we chose it as &#8220;a guinea pig&#8221; project being that textarea way the user has control.  We want the user to explore possibilities themselves, and making it easier for us to see what&#8217;s possible regarding combinations of the three concepts above, we&#8217;re hoping, regarding <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html-GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html-GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">second draft<\/a> version of a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\" title=\"overlay_emoji.php\" rel=\"noopener\">&#8220;Text Background Clip&#8221; client 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-background-clip-animation-tutorial\/' rel=\"noopener\">Text Background Clip Animation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tbcpt'>Previous relevant <a target=\"_blank\" title='Text Background Clip Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-primer-tutorial\/' rel=\"noopener\">Text Background Clip 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\/PHP\/overlay_emoji.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text Background Clip Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.jpg\" title=\"Text Background Clip Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Text Background Clip Primer Tutorial<\/p><\/div>\n<p>Again, today, we&#8217;re cloning and modifying a new <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php_GETME\" title=\"overlay_emoji.php\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> version of a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php?words=Hello\" title=\"overlay_emoji.php.php\" rel=\"noopener\">&#8220;Text Background Clip&#8221; server web application<\/a> &#8230;<\/p>\n<ul>\n<li>based on the PHP of <a title='Simple Emoji Border Card Primer Tutorial' href='#sebcpt'>Simple Emoji Border Card Primer Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>a lot of CSS help from <a target=\"_blank\" title=\"https:\/\/codepen.io\/shshaw\/pen\/ELBayz\" href='https:\/\/codepen.io\/shshaw\/pen\/ELBayz' rel=\"noopener\">Emoji + background-clip:text<\/a> and <a target=\"_blank\" title='Lorem Picsum' href='https:\/\/picsum.photos' rel=\"noopener\">Lorem Picsum<\/a>, thanks<\/li>\n<\/ul>\n<p>And, again, it&#8217;s that &#8220;interactive input duo&#8221; of &#8230;<\/p>\n<ul>\n<li>words<\/li>\n<li>CSS styling, especially <a target=\"_blank\" title='CSS property background-clip property' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_background-clip.asp' rel=\"noopener\">background-clip<\/a>:text;<\/li>\n<\/ul>\n<p> &#8230; forming that shareable dataset (helped out by diff and ed command line commands via PHP <a target=\"_blank\" title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php' rel=\"noopener\">exec<\/a> and <a target=\"_blank\" title='PHP shell_exec() method information' href='http:\/\/php.net\/manual\/en\/function.shell-exec.php' rel=\"noopener\">shell_exec<\/a>) whereby you can email or SMS your &#8220;creations&#8221; to other interested parties.<\/p>\n<p>And, again, there is a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html_GETME\" title=\"overlay_emoji.htm\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> version of a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.htm\" title=\"overlay_emoji.php.htm\" rel=\"noopener\">&#8220;Text Background Clip&#8221; client web application<\/a> choice of usage here, for you to try for yourself!<\/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-background-clip-primer-tutorial\/' rel=\"noopener\">Text Background Clip Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eapt'>Previous relevant <a target=\"_blank\" title='Emoji Animation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-animation-primer-tutorial\/' rel=\"noopener\">Emoji Animation 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\/PHP\/emoji_animation.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Animation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.jpg\" title=\"Emoji Animation Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Emoji Animation Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re cloning and modifying a new <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php_GETME\" title=\"emoji_animation.php\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> version of an <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php?words=Hi\" title=\"emoji_animation.php\" rel=\"noopener\">&#8220;Emoji Animation&#8221; server web application<\/a> (or <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.html_GETME\" title=\"emoji_animation.htm\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.htm\" title=\"emoji_animation.htm\" rel=\"noopener\">client web application<\/a>) &#8230;<\/p>\n<ul>\n<li>based on the PHP of <a title='Simple Emoji Border Card Primer Tutorial' href='#sebcpt'>Simple Emoji Border Card Primer Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>a lot of CSS help from <a target=\"_blank\" title=\"https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9\" href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9' rel=\"noopener\">How to Animate an Emoji with CSS<\/a>, thanks<\/li>\n<\/ul>\n<p>We generally corral commonalities today when we think about cloning, and its here in spades regarding &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/'>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<p><\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; but just substitute &#8220;animation&#8221; for &#8220;border of card&#8221; or just &#8220;card&#8221; above.  With help regarding the CSS above we&#8217;d like to thank <a target=\"_blank\" title=\"https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9\" href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9' rel=\"noopener\">How to Animate an Emoji with CSS<\/a>.<\/p>\n<p>We hope you try it out, creating your own webpages!<\/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\/emoji-animation-primer-tutorial\/' rel=\"noopener\">Emoji Animation Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sebcpt'>Previous relevant <a target=\"_blank\" title='Simple Emoji Border Card Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/' rel=\"noopener\">Simple Emoji Border Card 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\/PHP\/simple_card.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simple Emoji Border Card Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.jpg\" title=\"Simple Emoji Border Card Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simple Emoji Border Card Primer Tutorial<\/p><\/div>\n<p>We were really happy to stumble upon <a target=\"_blank\" href='https:\/\/stackoverflow.com' title='StackOverflow' rel=\"noopener\">StackOverflow<\/a>&#8216;s excellent <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/41199841\/use-emoji-as-css-border' title='Use Emoji as CSS Border' rel=\"noopener\">Use Emoji as CSS Border<\/a> webpage <font size=1>(of dreams and ideas)<\/font> the other day, and immediately want to &#8230;<\/p>\n<ul>\n<li>start <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php_GETME\" title=\"simple_card.php\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php\" title=\"Click picture\" rel=\"noopener\">Simple Emoji Border Card<\/a> creating today &#8230; ready for &#8230;<\/li>\n<li>whatever the future may hold, into the future, because we smell a <i>tool<\/i> coming on<\/li>\n<\/ul>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<p> &#8230; used by the user via some HTML textarea content they could edit to click a &#8220;Post&#8221; button creating their tailored (left hand table cell containing) HTML div element, that if double clicked (or just clicked within the surrounding table cell below the HTML &#8220;card&#8221; div) opens the user&#8217;s created card, alone, in a new window.<\/p>\n<hr>\n<p id='eacssbt'>Previous relevant <a target=\"_blank\" title='Emoji Animation CSS Block Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-animation-css-block-tutorial\/' rel=\"noopener\">Emoji Animation CSS Block Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Animation CSS Block Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation_css_block.jpg\" title=\"Emoji Animation CSS Block Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Emoji Animation CSS Block Tutorial<\/p><\/div>\n<p>Do you recall a few days back, with <a target=\"_blank\" title='Simple Emoji Border Card Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-sharing-tutorial\/' rel=\"noopener\">Simple Emoji Border Card Sharing Tutorial<\/a> how we avoided &#8220;too long&#8221; mailto: and\/or sms: &#8220;a&#8221; link href arrangements, before we harnessed the command line combination of &#8230;<\/p>\n<ul>\n<li>diff<\/li>\n<li>ed<\/li>\n<\/ul>\n<p> &#8230; the latter of which worked fine on this macOS system where we are writing this blog, but, sadly, not on our RJM Programming Linux web server?  Well, we could install &#8220;ed&#8221;, but decided, instead, to &#8220;act like <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=fi37OSY6kXo' rel=\"noopener\"><strike>mister<\/strike><\/a> ed&#8221; with a new PHP function, which, today, caters for &#8220;ed asks&#8221; that might involve more than one line of change, with some &#8220;comma usages&#8221; can be seen explained, here, at <a target=\"_blank\" title='ed' href='https:\/\/www.ibm.com\/docs\/en\/zos\/2.2.0?topic=descriptions-ed-use-ed-line-oriented-text-editor' rel=\"noopener\">ed &#8211; Use ed line oriented text editor &#8211; IBM Documentation<\/a>.  Here is the PHP function for your perusal &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nfunction viacolon($instuff) {<br \/>\n<br \/>\n\/\/21c<br \/>\n\/\/  background: url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' height='30' width='30'&gt;&lt;text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'&gt;&lt;\/text&gt;&lt;\/svg&gt;\");<br \/>\n\/\/.<br \/>\n\/\/13,14c<br \/>\n\/\/.box:after {<br \/>\n\/\/  content: \"Well I never\";<br \/>\n\/\/.<br \/>\n\/\/w<br \/>\n<br \/>\n  $sprevln=\"\";<br \/>\n  $ldm=\";\";<br \/>\n  $prevln='';<br \/>\n  $inlns=explode(\"\\n\", $instuff);<br \/>\n  $lns=file('\/tmp\/emoji_animation.diff');<br \/>\n  foreach ($lns as $line_num =&gt; $ln) {<br \/>\n    $lastinteresting=false;<br \/>\n    if (($ln == 'w' || $ln == \"w\\n\") && strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") !== false) {<br \/>\n       if (1 == 2) { $lastinteresting=true; }<br \/>\n      $fromi=explode(\",\", explode(\"d\", $prevln)[0])[0];<br \/>\n      $toi=explode(\",\", explode(\"d\", $prevln)[0])[1];<br \/>\n      for ($fromtoi=$fromi; $fromtoi&lt;=$toi; $fromtoi++) {<br \/>\n        $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromtoi]), \" \", $instuff);<br \/>\n      }<br \/>\n    }<br \/>\n    if (!$lastinteresting && $ln != '.' && $ln != 'w' && $ln != \".\\n\" && $ln != \"w\\n\") {<br \/>\n    if (strpos($ln, ':') !== false && (strpos($ln, ';') !== false || strpos($ln, '{') !== false)) {<br \/>\n      if (strpos($ln, 'background:') === false) {<br \/>\n        $bg=explode(':', $ln);<br \/>\n        if (strpos($instuff, $bg[0] . ':') !== false) {<br \/>\n          $ldm=\";\";<br \/>\n          if (strpos($bg[1], \";\") === false && strpos($bg[1], \"{\") !== false) { $ldm=\"{\"; }<br \/>\n          \/\/if (strpos($bg[0], \".box\") !== false) {  file_put_contents('ax.ax', $instuff . \"\\n\\n\\n\" . $bg[0] . ':' . explode($ldm, explode($bg[0] . ':', $instuff)[1])[0] . ':' . \"\\n\\n\\n\" . $bg[0] . ':' . explode($ldm, explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0] . \"\\n\\n\\n\" . str_replace($bg[0] . ':' . explode($ldm, explode($bg[0] . ':', $instuff)[1])[0],$bg[0] . ':' . explode($ldm, explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0],$instuff));    }<br \/>\n          $instuff=str_replace_once($bg[0] . ':' . explode($ldm, explode($bg[0] . ':', $instuff)[1])[0],$bg[0] . ':' . explode($ldm, explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0],$instuff);<br \/>\n        } else if (strpos($prevln, \"a\") !== false) {<br \/>\n          $fromi=explode(\",\", explode(\"a\", $prevln)[0])[0];<br \/>\n          $toi=$fromi;<br \/>\n          $prefx=explode($inlns[-1 + explode(\"a\", $prevln)[0]], $instuff)[0];<br \/>\n          $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]), str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]) . \" \" . $bg[0] . ':' . explode(';', explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0] . '; ', $instuff);<br \/>\n          $inlns[-1 + explode(\"a\", $prevln)[0]]=$inlns[-1 + explode(\"a\", $prevln)[0]] . \" \" . $bg[0] . ':' . explode(';', explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0] . '; ';<br \/>\n          if (('' . $toi) == '1') {<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            $sprevln=\"\";<br \/>\n          } else {<br \/>\n            $toi--;<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            $sprevln=\"\" . $fromi . \"a\";<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (strlen($ln) &lt;= 10 && str_replace(\"\\n\",\"\", str_replace(\"d\",\"\", str_replace(\"c\",\"\", str_replace(\"a\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln))))))))))))))) == \"\") {<br \/>\n      if (str_replace(\"\\n\",\"\", str_replace(\"c\",\"\", str_replace(\"a\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln)))))))))))))) != \"\") {<br \/>\n       $prevln=$ln;<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/if (strlen($ln) &lt;= 10 && str_replace(\"\\n\",\"\", str_replace(\"c\",\"\", str_replace(\"a\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln)))))))))))))) == \"\") {<br \/>\n    if (strlen($ln) &lt;= 10 && str_replace(\"\\n\",\"\", str_replace(\"d\",\"\", str_replace(\"c\",\"\", str_replace(\"A\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln))))))))))))))) == \"\") {<br \/>\n      $instuff=$instuff;<br \/>\n    } else if (strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"d\", $prevln)[0]]), \" \", $instuff);<br \/>\n    } else if (strpos($prevln, \"a\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $fromi=explode(\",\", explode(\"a\", $prevln)[0])[0];<br \/>\n      $lnbig=\"\";<br \/>\n      $lni=(-1 + explode(\"a\", $prevln)[0]);<br \/>\n      $toi=$fromi;<br \/>\n      $isok=true;<br \/>\n      while (('' . $toi) != '0' && $isok) {<br \/>\n      \/\/$prefx=explode($inlns[-1 + explode(\"a\", $prevln)[0]], $instuff)[0];<br \/>\n      if ($ln == '.' || $ln == 'w' || $ln == \".\\n\" || $ln == \"w\\n\") {<br \/>\n      $isok=false;<br \/>\n      $sprevln=$ln; \/\/\"\";<br \/>\n      } else if ($ln != '.' && $ln != 'w' && $ln != \".\\n\" && $ln != \"w\\n\") {<br \/>\n      \/\/file_put_contents('\/tmp\/emoji_animation.zzz', $ln);<br \/>\n      \/\/file_put_contents('\/tmp\/emoji_animation.yyy', $prevln);<br \/>\n      \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]), str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]) . \" \" . $ln, $instuff);<br \/>\n      \/\/if (!file_exists('\/tmp\/emoji_animation.www')) { file_put_contents('\/tmp\/emoji_animation.www', $instuff); }<br \/>\n      $lnbig.=' ' . str_replace(\"\\n\", \"\", $ln) . ' '; \/\/$inlns[-1 + explode(\"a\", $prevln)[0]]=$inlns[-1 + explode(\"a\", $prevln)[0]] . \" \" . $ln;<br \/>\n      }<br \/>\n      if (('' . $toi) == '1') {<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $ln), \" \", $instuff);<br \/>\n            $sprevln=$ln; \/\/\"\";<br \/>\n            $toi--;<br \/>\n            $ln=$lns[($fromi - $toi) + $line_num];<br \/>\n      } else {<br \/>\n            $toi--;<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $ln), \" \", $instuff);<br \/>\n            $sprevln=\"\" . $fromi . \"a\";<br \/>\n            $ln=$lns[($fromi - $toi) + $line_num];<br \/>\n      }<br \/>\n      }<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[$lni]), str_replace(\"\\n\", \"\", $inlns[$lni]) . \" \" . $lnbig, $instuff);<br \/>\n      \/\/$inlns[$lni]=$inlns[$lni] . \" \" . $lnbig;<br \/>\n      $sprevln=' ';<br \/>\n    } else if (strpos($prevln, \"c\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"c\", $prevln)[0]]), str_replace(\"\\n\", \"\", $ln), $instuff);<br \/>\n    } else if (strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") !== false) {<br \/>\n      $fromi=explode(\",\", explode(\"d\", $prevln)[0])[0];<br \/>\n      $toi=explode(\",\", explode(\"d\", $prevln)[0])[1];<br \/>\n      for ($fromtoi=$fromi; $fromtoi&lt;=$toi; $fromtoi++) {<br \/>\n        $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromtoi]), \" \", $instuff);<br \/>\n      }<br \/>\n      \/\/$instuff=str_replace(str_replace(\"\\n\", \"\", $inlns[-1 + $fromi]), \" \", $instuff);<br \/>\n      \/\/if ($fromi != $toi) {<br \/>\n      \/\/  $fromi++;<br \/>\n      \/\/  $sprevln=\"\" . $fromi . \",\" . $toi . \"d\";<br \/>\n      \/\/} else {<br \/>\n        $sprevln=$ln;<br \/>\n      \/\/}<br \/>\n    } else if (strpos($prevln, \"c\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") !== false) {<br \/>\n      $origln=$ln;<br \/>\n      $lnbig='';<br \/>\n      $isokay=true;<br \/>\n      $fromi=explode(\",\", explode(\"c\", $prevln)[0])[0];<br \/>\n      $toi=explode(\",\", explode(\"c\", $prevln)[0])[1];<br \/>\n      $one=1;<br \/>\n      $ln=$lns[$one + $line_num];<br \/>\n      while ($ln != '.' && $ln != 'w' && $ln != \".\\n\" && $ln != \"w\\n\") {<br \/>\n            $lnbig.=' ' . str_replace(\"\\n\", \"\", $ln) . ' ';<br \/>\n            $one++;<br \/>\n            $ln=$lns[$one + $line_num];<br \/>\n      }<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromi]), str_replace(\"\\n\", \"\", $origln) . $lnbig, $instuff);<br \/>\n      if ($fromi != $toi) {<br \/>\n        $fromi++;<br \/>\n        $sprevln=\"\" . $fromi . \",\" . $toi . \"c\";<br \/>\n      for ($fromtoi=$fromi; $fromtoi&lt;=$toi; $fromtoi++) {<br \/>\n        $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromtoi]), \" \", $instuff);<br \/>\n      }<br \/>\n      } else {<br \/>\n        $sprevln=$ln;<br \/>\n      }<br \/>\n    }<br \/>\n    if ($sprevln != \"\") {<br \/>\n      $prevln=$sprevln;<br \/>\n      $sprevln=\"\";<br \/>\n    } else {<br \/>\n      $prevln=$ln;<br \/>\n    }<br \/>\n    if (strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"d\", $prevln)[0]]), \" \", $instuff);<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  return $instuff;<br \/>\n}<br \/>\n<br \/>\nfunction str_replace_once($needle, $replace, $haystack) { \/\/ thanks to <a target=\"_blank\" title='https:\/\/stackoverflow.com\/questions\/1252693\/using-str-replace-so-that-it-only-acts-on-the-first-match' href='https:\/\/stackoverflow.com\/questions\/1252693\/using-str-replace-so-that-it-only-acts-on-the-first-match' rel=\"noopener\">https:\/\/stackoverflow.com\/questions\/1252693\/using-str-replace-so-that-it-only-acts-on-the-first-match<\/a><br \/>\n$newstring=$haystack;<br \/>\n$pos = strpos($haystack, $needle);<br \/>\nif ($pos !== false) {<br \/>\n    $newstring = substr_replace($haystack, $replace, $pos, strlen($needle));<br \/>\n}<br \/>\nreturn $newstring;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; improving on yesterday&#8217;s <a title='Emoji Animation Primer Tutorial' href='#eapt'>Emoji Animation Primer Tutorial<\/a>.<\/p>\n<p>That work not only helped out with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php-GETME\" title=\"emoji_animation.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php-GETME\" title=\"emoji_animation.php\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a>  <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php?words=Hi\" title=\"emoji_animation.php\" rel=\"noopener\">Emoji Animation server web application<\/a>, but also with (its &#8220;clone partner&#8221;) <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.html--GETME\" title=\"simple_card.htm\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.html--GETME\" title=\"simple_card.htm\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a>  <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.htm\" title=\"simple_card.htm\" rel=\"noopener\">Card with Emoji Border Design client 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\/emoji-animation-css-block-tutorial\/' rel=\"noopener\">Emoji Animation CSS Block Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eapt'>Previous relevant <a target=\"_blank\" title='Emoji Animation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-animation-primer-tutorial\/' rel=\"noopener\">Emoji Animation 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\/PHP\/emoji_animation.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Animation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.jpg\" title=\"Emoji Animation Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Emoji Animation Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re cloning and modifying a new <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php_GETME\" title=\"emoji_animation.php\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> version of an <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php?words=Hi\" title=\"emoji_animation.php\" rel=\"noopener\">&#8220;Emoji Animation&#8221; server web application<\/a> (or <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.html_GETME\" title=\"emoji_animation.htm\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.htm\" title=\"emoji_animation.htm\" rel=\"noopener\">client web application<\/a>) &#8230;<\/p>\n<ul>\n<li>based on the PHP of <a title='Simple Emoji Border Card Primer Tutorial' href='#sebcpt'>Simple Emoji Border Card Primer Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>a lot of CSS help from <a target=\"_blank\" title=\"https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9\" href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9' rel=\"noopener\">How to Animate an Emoji with CSS<\/a>, thanks<\/li>\n<\/ul>\n<p>We generally corral commonalities today when we think about cloning, and its here in spades regarding &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/'>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<p><\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; but just substitute &#8220;animation&#8221; for &#8220;border of card&#8221; or just &#8220;card&#8221; above.  With help regarding the CSS above we&#8217;d like to thank <a target=\"_blank\" title=\"https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9\" href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9' rel=\"noopener\">How to Animate an Emoji with CSS<\/a>.<\/p>\n<p>We hope you try it out, creating your own webpages!<\/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\/emoji-animation-primer-tutorial\/' rel=\"noopener\">Emoji Animation Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sebcpt'>Previous relevant <a target=\"_blank\" title='Simple Emoji Border Card Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/' rel=\"noopener\">Simple Emoji Border Card 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\/PHP\/simple_card.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simple Emoji Border Card Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.jpg\" title=\"Simple Emoji Border Card Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simple Emoji Border Card Primer Tutorial<\/p><\/div>\n<p>We were really happy to stumble upon <a target=\"_blank\" href='https:\/\/stackoverflow.com' title='StackOverflow' rel=\"noopener\">StackOverflow<\/a>&#8216;s excellent <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/41199841\/use-emoji-as-css-border' title='Use Emoji as CSS Border' rel=\"noopener\">Use Emoji as CSS Border<\/a> webpage <font size=1>(of dreams and ideas)<\/font> the other day, and immediately want to &#8230;<\/p>\n<ul>\n<li>start <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php_GETME\" title=\"simple_card.php\" rel=\"noopener\">&#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php\" title=\"Click picture\" rel=\"noopener\">Simple Emoji Border Card<\/a> creating today &#8230; ready for &#8230;<\/li>\n<li>whatever the future may hold, into the future, because we smell a <i>tool<\/i> coming on<\/li>\n<\/ul>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<p> &#8230; used by the user via some HTML textarea content they could edit to click a &#8220;Post&#8221; button creating their tailored (left hand table cell containing) HTML div element, that if double clicked (or just clicked within the surrounding table cell below the HTML &#8220;card&#8221; div) opens the user&#8217;s created card, alone, in a new window.<\/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='#d55541' onclick='var dv=document.getElementById(\"d55541\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/card\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55541' 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='#d55637' onclick='var dv=document.getElementById(\"d55637\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55637' 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='#d55648' onclick='var dv=document.getElementById(\"d55648\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/comma\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55648' 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='#d55656' onclick='var dv=document.getElementById(\"d55656\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-clip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55656' 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='#d69792' onclick='var dv=document.getElementById(\"d69792\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69792' 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='#d69800' onclick='var dv=document.getElementById(\"d69800\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69800' 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='#d69809' onclick='var dv=document.getElementById(\"d69809\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69809' 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='#d69816' onclick='var dv=document.getElementById(\"d69816\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69816' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Further to yesterday&#8217;s Text Background Clip Animation Emoji Overlay SVG Tutorial you start getting web browser support for context (ie. right click) menu options such as &#8230; Copy image Copy image address Save image as &#8230; the latter effectively your &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-animation-emoji-overlay-svg-sharing-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":[2,4,12,14,37],"tags":[69,84,3970,2486,3095,210,4322,2503,2509,3533,281,2276,2310,342,5282,354,360,380,385,405,5283,2208,557,576,652,675,876,894,932,1988,970,997,2141,1063,1122,1133,1137,3942,1159,1209,1212,2311,1226,1262,2378,1319,1583,2308,1622],"class_list":["post-69816","post","type-post","status-publish","format-standard","hentry","category-ajax","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-animation-2","tag-background-clip","tag-block","tag-card","tag-class","tag-classname","tag-clone","tag-cloning","tag-comma","tag-css","tag-delimitation","tag-details","tag-div","tag-do-it-yourself","tag-dom","tag-download","tag-email","tag-emoji","tag-exec","tag-forignobject","tag-getboundingclientrect","tag-hashtag","tag-html","tag-javascript","tag-keyframes","tag-opacity","tag-overlay","tag-php","tag-position","tag-post","tag-programming","tag-range","tag-reveal","tag-server","tag-share","tag-sharing","tag-shell_exec","tag-sms","tag-style","tag-styling","tag-summary","tag-svg","tag-textarea","tag-transition","tag-tutorial","tag-window","tag-wording","tag-words"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69816"}],"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=69816"}],"version-history":[{"count":19,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69816\/revisions"}],"predecessor-version":[{"id":69840,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69816\/revisions\/69840"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}