{"id":54641,"date":"2022-01-18T03:01:02","date_gmt":"2022-01-17T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54641"},"modified":"2022-01-18T08:19:12","modified_gmt":"2022-01-17T22:19:12","slug":"emoji-borders-and-backgrounds-web-browser-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-web-browser-tutorial\/","title":{"rendered":"Emoji Borders and Backgrounds Web Browser Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Web Browser Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg_inconsistent.jpg\" title=\"Emoji Borders and Backgrounds Web Browser Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Web Browser Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Borders and Backgrounds Shape Sharing Tutorial' href='#ebbsst'>Emoji Borders and Backgrounds Shape Sharing Tutorial<\/a> had us sharing via email or SMS our &#8220;Emoji Borders and Backgrounds&#8221; creations via inhouse organized arrangements.  But many people are used to just right-clicking (for Windows) and two finger gesturing (for macOS and Mac OS X) on &#8230;<\/p>\n<ul>\n<li>SVG<\/li>\n<li>IMG<\/li>\n<li>CANVAS<\/li>\n<\/ul>\n<p> &#8230; graphical elements, which can be made to &#8220;look&#8221; the same, and sort of &#8220;suck it and see&#8221; as far as menu options presented, helping them out sharing graphical information.  In many cases, users don&#8217;t care what form of element the image comes contained in.   But, if you involve &#8220;background-image&#8221; CSS along the way to achieve a (consistent) &#8220;look&#8221;, as we had done before today, (some of) the output of those menu options could be lacking (because they look for &#8220;foreground data&#8221;), and so we <font color=blue>do away with<\/font> the need for a &#8220;background-image&#8221; &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n<br \/>\n<font color=blue>function ctoilater() {<br \/>\n    img.src=canvas.toDataURL('data\/png');<br \/>\n}<\/font><br \/>\n<br \/> <br \/>\nif (<font color=purple>(<\/font>iurl != ''<font color=purple> && document.URL.indexOf('noimage') == -1)<\/font> && emoji != '') {<br \/>\n  <font color=blue>\/\/<\/font>imgs[0].style.background='URL(\"' + iurl + '\")';<br \/>\n  <font color=blue>\/\/<\/font>canvases[0].style.background='URL(\"' + iurl + '\")';<br \/>\n  <font color=blue>if (emoji != '') {<br \/>\n    imgs[0].style.backgroundPosition='20px 20px';<br \/>\n  }<\/font><br \/>\n  imgs[0].style.backgroundRepeat='no-repeat';<br \/>\n  canvases[0].style.backgroundRepeat='no-repeat';<br \/>\n<br \/> <br \/>\n  <font color=blue>var newimg=document.createElement('img');<br \/>\n  newimg.onload = function() {<br \/>\n    \/\/ draw the image onto the canvas<br \/>\n    if (document.URL.indexOf('emoji=') != -1) {<br \/>\n    canvas.getContext('2d').drawImage(newimg, 20, 20);<br \/>\n    } else {<br \/>\n    canvas.getContext('2d').drawImage(newimg, 0, 0);<br \/>\n    }<br \/>\n    setTimeout(ctoilater, 3000);<br \/>\n  }<br \/>\n  newimg.src = iurl;<\/font><br \/>\n<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; look on the IMG and CANVAS element usage (as above) and use the great way a &#8230;<\/p>\n<ul>\n<li>CANVAS can contain merged image data &#8230; and a &#8230;<\/li>\n<li>CANVAS can convert back to an image data URI<\/li>\n<\/ul>\n<p> &#8230; to mean IMG and CANVAS can end up united in a &#8220;real image data&#8221; look and content, via SVG that can be made up of &#8230;<\/p>\n<ul>\n<li>emoji TEXT<\/li>\n<li>user TEXT<\/li>\n<li>user IMAGE (like IMG)<\/li>\n<li>user shapes CIRCLE and\/or ELLIPSE and\/or RECT and\/or LINE and\/or POLYLINE and\/or POLYGON &#8230; and inhouse NOIMAGE<\/li>\n<\/ul>\n<p> &#8230; (SVG) &#8220;streams&#8221; of graphical data.<\/p>\n<p>We also <font color=purple>needed to cater<\/font> for that inhouse &#8220;NOIMAGE&#8221; shape lack of IMAGE data in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php----GETME\">our changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php----GETME\">canvas_svg.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php\">SVG -&gt; IMG -&gt; CANVAS live run<\/a> web application.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>An example of how having web browser (right-clicking (for Windows) and two finger gesturing (for macOS and Mac OS X)) menu options be useful, consider an image menu option such as &#8220;Copy image&#8221; be used by the user.  The user can compose their own (email client<font size=1> (or get to email client via all uppercase web application &#8220;to&#8221; email &#8220;address&#8221; definition)<\/font>) email then, and just Edit -&gt; Paste the results, as an image, into the email body, ahead of sending off that email.<\/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-borders-and-backgrounds-web-browser-tutorial\/'>Emoji Borders and Backgrounds Web Browser Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbsst'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Shape Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-shape-sharing-tutorial\/'>Emoji Borders and Backgrounds Shape 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\/PHP\/canvas_svg.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Shape Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg_email.jpg\" title=\"Emoji Borders and Backgrounds Shape Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Shape Sharing Tutorial<\/p><\/div>\n<p>The code &#8220;shape shifting&#8221; of recent times morphs into &#8220;shape sharing&#8221; together in amongst the parent users of our PHP tool &#8220;Emoji Borders and Backgrounds&#8221; web application featuring in yesterday&#8217;s <a title='Emoji Borders and Backgrounds Shape Numerics Tutorial' href='#ebbsnt'>Emoji Borders and Backgrounds Shape Numerics Tutorial<\/a>.<\/p>\n<p>We found the &#8220;SVG+XML&#8221; mimetype data not accepted by Gmail for an Inline HTML Email, so we have coded for the Downloadable HTML Attachment &#8220;way to go&#8221;.<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n function emailit() {<br \/>\n  var fbit='';<br \/>\n  var tois=prompt('Please enter an email address to email to (all uppercase uses email client rather than PHP mail and all numerical sends an SMS).','');<br \/>\n  if (tois == null) { tois=''; }<br \/>\n  if (tois.trim() != '') {<br \/>\n  if (tois.indexOf('@') != -1) {<br \/>\n  if (tois.toUpperCase() == tois) {<br \/>\n  document.getElementById('divemail').innerHTML='&lt;a id=aemail style=display:none; href=mailto:' + tois + '?subject=My%20Emoji%20Border%20and%20Background%20Creation&body=' + encodeURIComponent(document.URL) + '&gt;Email&lt;\/a&gt;';<br \/>\n  \/\/fbit=('' + document.getElementById('aemail').href).split('?')[1];<br \/>\n  \/\/document.getElementById('aemail').href='mailto:' + tois + '?' + fbit;<br \/>\n  document.getElementById('aemail').click();<br \/>\n  } else {<br \/>\n  var zhr = new XMLHttpRequest();<br \/>\n  var zform=new FormData();<br \/>\n  if (1 == 2) { zform.append('inline', ''); }<br \/>\n  zform.append('to', tois);<br \/>\n  zform.append('subj', 'My Emoji Borders and Background Creation ... at [date] ...');<br \/>\n  \/\/alert(encodeURIComponent('&lt;html&gt;&lt;body&gt;&lt;img src=\\\"&lt;?php echo $bemb; ?&gt;\\\"&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;'));<br \/>\n  zform.append('tdhuhta', encodeURIComponent('&lt;html&gt;' + '&lt;?php echo $headstyle; ?&gt;' + '&lt;body&gt;&lt;img src=\"&lt;?php echo $bemb; ?&gt;\"&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;'));<br \/>\n  zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n  zhr.send(zform);<br \/>\n  alert('Email sent to ' + tois);<br \/>\n  }<br \/>\n  } else if (tois.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  document.getElementById('divsms').innerHTML='&lt;a id=asms style=display:none; href=sms:' + tois + '&body=' + encodeURIComponent(document.URL) + '&gt;SMS&lt;\/a&gt;';<br \/>\n  \/\/document.getElementById('asms').href='sms:' + tois + '&body=' + encodeURIComponent(document.URL);<br \/>\n  document.getElementById('asms').click();<br \/>\n  }<br \/>\n  }<br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>The inhouse slideshow PHP clones&#8217; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inhouse_slideshow.js---GETME\">changed associated external Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inhouse_slideshow.js---GETME\">inhouse_slideshow.js<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php\" title=\"Click picture\">live run<\/a> is available.<\/p>\n<p>The Image Map Grid <a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php---------GETME'>changed PHP<\/a> <a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php---------GETME'>imagegridmap.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php\" title=\"Click picture\">live run<\/a> is available.<\/p>\n<p>And the &#8220;shape sharing&#8221; goes on in our <font size=1>(third parent (to our PHP tool) &#8220;cab off the rank&#8221;)<\/font> SVG -&gt; IMG -&gt; CANVAS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php---GETME\">changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php---GETME\">canvas_svg.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php\">live run<\/a> is available, being helped out by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php---------GETME\">PHP tool code changes<\/a> for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php---------GETME\">inline_svg.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\" title=\"Click picture\">live run<\/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-borders-and-backgrounds-shape-sharing-tutorial\/'>Emoji Borders and Backgrounds Shape Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbsnt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Shape Numerics Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-shape-numerics-tutorial\/'>Emoji Borders and Backgrounds Shape Numerics Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Shape Numerics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_shape_position.jpg\" title=\"Emoji Borders and Backgrounds Shape Numerics Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Shape Numerics Tutorial<\/p><\/div>\n<p>If you are familiar with the geometry of shapes, it is full of numbers, with the implications as to how the shape is represented and displayed, that those numbers can affect.  And so, onto yesterday&#8217;s <a title='Emoji Borders and Backgrounds Shapes Tutorial' href='#ebbst'>Emoji Borders and Backgrounds Shapes Tutorial<\/a>&#8216;s start with &#8230;<\/p>\n<ul>\n<li>SVG <a target=_blank title='SVG circle element information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_circle.asp'>circle<\/a> element<\/li>\n<li>SVG <a target=_blank title='SVG rect element information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_rect.asp'>rect<\/a> element &#8230; shapes yesterday, we add &#8230;<\/li>\n<li>SVG <a target=_blank title='SVG ellipse element information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_ellipse.asp'>ellipse<\/a> element functionality today &#8230; and for all these, as well as the &#8230;<\/li>\n<li>SVG <a target=_blank title='SVG text element information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_text.asp'>text<\/a> element we start allowing &#8220;shape numerics&#8221; as being a user definable th<strike>a<\/strike>ing<\/li>\n<\/ul>\n<p>These &#8220;shape numerics&#8221; can help the user control (that SVG element&#8217;s) &#8230;<\/p>\n<ul>\n<li>position<\/li>\n<li>size<\/li>\n<li>opacity<\/li>\n<li>font size &#8230; (for text elements) on top of that non-numeric control yesterday&#8217;s work gave us, being (that SVG element&#8217;s fill) &#8230;<\/li>\n<li>colour<\/li>\n<\/ul>\n<p>This is all handled, still, within that &#8220;image&#8221; argument definition, and we allow a decimal (ie. &#8220;.&#8221;) delimiter be the way a user separates their integer values (where an opacity value becomes &#8220;0.&#8221; + [integerValue]).<\/p>\n<p>As an example take a look at the example &#8230;<\/p>\n<table>\n<tr>\n<th>URL<\/th>\n<\/tr>\n<tr>\n<td><a style='font-size:10px;' target=_blank title='New window' href='\/\/www.rjmprogramming.com.au\/inline_svg.php?uctext=hello%0Az267.254&#038;mltext=bonjour&#038;image=PHP\/one.jpg%23ellipsepurple267.254.156.89.6,noimage'>https:\/\/www.rjmprogramming.com.au\/inline_svg.php?uctext=hello%0Az267.254&#038;mltext=bonjour&#038;image=PHP\/one.jpg%23ellipsepurple267.254.156.89.6,noimage<\/a>\n<\/td>\n<\/tr>\n<tr>\n<th>Iframe<\/th>\n<\/tr>\n<tr>\n<td><iframe style='width:100%;height:500px;' src='\/\/www.rjmprogramming.com.au\/inline_svg.php?uctext=hello%0Az267.254&#038;mltext=bonjour&#038;image=PHP\/one.jpg%23ellipsepurple267.254.156.89.6,noimage'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p>The <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php--------GETME\">PHP code changes<\/a> for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php--------GETME\">inline_svg.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\" title=\"Click picture\">live run<\/a> principally involved two new PHP functions &#8230;<\/p>\n<table>\n<tr>\n<th>Collect information at a suitable juncture &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code style='font-size:8px;'><br \/>\n$crcolour=\"pink\";<br \/>\n$gcx=-1;<br \/>\n$gcy=-1;<br \/>\n$gwidth=-1;<br \/>\n$gheight=-1;<br \/>\n$gopacity=-1.0;<br \/>\n$gfontsize=-1;<br \/>\n$gradius=-1;<br \/>\n$gradiusone=-1;<br \/>\n$gradiustwo=-1;<br \/>\n$gshape='';<br \/>\n<br \/>\nfunction collectstuff($inthingis, $proshape) {<br \/>\nglobal $crcolour, $gcx, $gcy, $gwidth, $gheight, $gopacity, $gfontsize, $gradius, $gradiusone, $gradiustwo, $gshape;<br \/>\n$gshape=strtolower($proshape);<br \/>\nif ($gshape == 'text') {<br \/>\n$crcolour=\"black\";<br \/>\n$gcx=-1;<br \/>\n$gcy=-1;<br \/>\n$gwidth=-1;<br \/>\n$gheight=-1;<br \/>\n$gopacity=-1.0;<br \/>\n$gfontsize=-1;<br \/>\n$gradius=-1;<br \/>\n$gradiusone=-1;<br \/>\n$gradiustwo=-1;<br \/>\n}<br \/>\nif ($inthingis == '') { return '';  }<br \/>\n$decthings=explode('.', strtolower($inthingis));<br \/>\nif ($gshape == 'text') {<br \/>\n  $crcolour='black';<br \/>\nif (sizeof($decthings) &gt;= 3 && strpos(strtolower($inthingis), 'px') !== false) {<br \/>\n  for ($ii=0; $ii&lt;sizeof($decthings); $ii++) {<br \/>\n    if (sizeof(explode('p', $decthings[$ii])) &gt; 1) {<br \/>\n      $gfontsize=explode('p', $decthings[$ii])[0];<br \/>\n      $inthingis=str_replace('' . $decthings[$ii] . '.','',  str_replace('.' . $decthings[$ii] . '','',  str_replace('.' . $decthings[$ii] . '.','.',  strtolower($inthingis)  )));<br \/>\n      $decthings=explode('.', strtolower($inthingis));<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\nif (sizeof($decthings) &lt; 2 || substr($inthingis,-1,1) &lt; '0' || substr($inthingis,-1,1) &gt; '9') {<br \/>\n  return $inthingis;<br \/>\n}<br \/>\n  $crcol='';<br \/>\n  while (substr($inthingis,-1,1) == '.' || (substr($inthingis,-1,1) &gt;= '0' && substr($inthingis,-1,1) &lt;= '9')) {<br \/>\n    $crcol=substr($inthingis,-1,1) . $crcol;<br \/>\n    $inthingis=substr($inthingis,0,(-1 + strlen($inthingis)));<br \/>\n  }<br \/>\n  \/\/file_put_contents('x.x', $crcol . ' ... ' . substr($inthingis,-1,1));<br \/>\n  $decthings=explode('.', strtolower($crcol));<br \/>\n  if (sizeof($decthings) &gt;= 2) {<br \/>\n    $gcx=$decthings[0];<br \/>\n    $gcy=$decthings[1];<br \/>\n    if (sizeof($decthings) &gt; 2) {<br \/>\n     $gopacity='0.' . $decthings[2];<br \/>\n     if (sizeof($decthings) &gt; 3) {<br \/>\n      $gfontsize=$decthings[3];<br \/>\n     }<br \/>\n    }<br \/>\n  } else {<br \/>\n  return $inthingis . $crcol;<br \/>\n  }<br \/>\n  return $inthingis;<br \/>\n} else {<br \/>\n  $crcolour='pink';<br \/>\nif (strpos(strtolower($inthingis), 'px') !== false) {<br \/>\n  for ($ii=0; $ii&lt;sizeof($decthings); $ii++) {<br \/>\n    if (sizeof(explode('p', $decthings[$ii])) &gt; 1) {<br \/>\n      $gfontsize=explode('p', $decthings[$ii])[0];<br \/>\n      $inthingis=str_replace('' . $decthings[$ii] . '.','',  str_replace('.' . $decthings[$ii] . '','',  str_replace('.' . $decthings[$ii] . '.','.',  strtolower($inthingis)  )));<br \/>\n      $decthings=explode('.', strtolower($inthingis));<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n}<br \/>\nif (substr($inthingis,0,1) &lt; '0' || substr($inthingis,0,1) &gt; '9') {<br \/>\n  $crcolour=explode('0',explode('1',explode('2',explode('3',explode('4',explode('5',explode('6',explode('7',explode('8',explode('9',$inthingis)[0])[0])[0])[0])[0])[0])[0])[0])[0])[0];<br \/>\n  $inthingis=strtolower(str_replace($crcolour, '', $inthingis));<br \/>\n  $decthings=explode('.', strtolower($inthingis));<br \/>\n} else if (substr($inthingis,-1,1) &lt; '0' || substr($inthingis,-1,1) &gt; '9') {<br \/>\n  $crcolour='';<br \/>\n  while (substr($inthingis,-1,1) &lt; '0' || substr($inthingis,-1,1) &gt; '9') {<br \/>\n    $crcolour=substr($inthingis,-1,1) . $crcolour;<br \/>\n    $inthingis=substr($inthingis,0,(-1 + strlen($inthingis)));<br \/>\n  }<br \/>\n  $inthingis=strtolower(str_replace($crcolour, '', $inthingis));<br \/>\n  $decthings=explode('.', strtolower($inthingis));<br \/>\n}<br \/>\nif ($gshape == 'text') {<br \/>\n  if (sizeof($decthings) &gt;= 2) {<br \/>\n    $gcx=$decthings[0];<br \/>\n    $gcy=$decthings[1];<br \/>\n    if (sizeof($decthings) &gt; 2) {<br \/>\n     $gopacity='0.' . $decthings[2];<br \/>\n     if (sizeof($decthings) &gt; 3) {<br \/>\n      $gfontsize=$decthings[3];<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n} else if ($gshape == 'circle') {<br \/>\n  if (sizeof($decthings) &gt;= 2) {<br \/>\n    $gcx=$decthings[0];<br \/>\n    $gcy=$decthings[1];<br \/>\n    if (sizeof($decthings) &gt; 2) {<br \/>\n     $gradius=$decthings[2];<br \/>\n     if (sizeof($decthings) &gt; 3) {<br \/>\n      $gopacity='0.' . $decthings[3];<br \/>\n     }<br \/>\n    }<br \/>\n  } else if (sizeof($decthings) == 1 && $decthings[0] != '') {<br \/>\n    $gradius=$decthings[0];<br \/>\n  }<br \/>\n} else if ($gshape == 'ellipse') {<br \/>\n  if (sizeof($decthings) &gt;= 4) {<br \/>\n    $gcx=$decthings[0];<br \/>\n    $gcy=$decthings[1];<br \/>\n    $gradiusone=$decthings[2];<br \/>\n    $gradiustwo=$decthings[3];<br \/>\n    if (sizeof($decthings) &gt; 4) {<br \/>\n     $gopacity='0.' . $decthings[4];<br \/>\n    }<br \/>\n  } else if (sizeof($decthings) == 3) {<br \/>\n    $gradiusone=$decthings[0];<br \/>\n    $gradiustwo=$decthings[1];<br \/>\n    $gopacity='0.' . $decthings[2];<br \/>\n  } else if (sizeof($decthings) == 2) {<br \/>\n    $gradiusone=$decthings[0];<br \/>\n    $gradiustwo=$decthings[1];<br \/>\n  } else if (sizeof($decthings) == 1 && $decthings[0] != '') {<br \/>\n    $gradius=$decthings[0];<br \/>\n  }<br \/>\n} else if ($gshape == 'rect') {<br \/>\n  if (sizeof($decthings) &gt;= 4) {<br \/>\n    $gcx=$decthings[0];<br \/>\n    $gcy=$decthings[1];<br \/>\n    $gwidth=$decthings[2];<br \/>\n    $gheight=$decthings[3];<br \/>\n    if (sizeof($decthings) &gt; 4) {<br \/>\n     $gopacity='0.' . $decthings[4];<br \/>\n    }<br \/>\n  } else if (sizeof($decthings) == 3) {<br \/>\n    $gwidth=$decthings[0];<br \/>\n    $gheight=$decthings[1];<br \/>\n    $gopacity='0.' . $decthings[2];<br \/>\n  } else if (sizeof($decthings) == 2) {<br \/>\n    $gwidth=$decthings[0];<br \/>\n    $gheight=$decthings[1];<br \/>\n  } else if (sizeof($decthings) == 1 && $decthings[0] != '') {<br \/>\n    $gopacity='0.' . $decthings[0];<br \/>\n  }<br \/>\n}<br \/>\nreturn $crcolour;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<tr>\n<th>Reshape a default SVG element definition depending on the information collected<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code style='font-size:8px;'><br \/>\nfunction retandclear($inthing) {<br \/>\nglobal $crcolour, $gcx, $gcy, $gwidth, $gheight, $gopacity, $gfontsize, $gradius, $gradiusone, $gradiustwo, $gshape;<br \/>\n$outthing=$inthing;<br \/>\n<br \/>\nif (strpos($inthing, '&lt;text ') !== false) {<br \/>\n  $gshape='text';<br \/>\n} else if (strpos($inthing, '&lt;circle ') !== false) {<br \/>\n  $gshape='circle';<br \/>\n} else if (strpos($inthing, '&lt;ellipse ') !== false) {<br \/>\n  $gshape='ellipse';<br \/>\n} else if (strpos($inthing, '&lt;rect ') !== false) {<br \/>\n  $gshape='rect';<br \/>\n}<br \/>\n<br \/>\nif (strtolower($gshape) == 'ellipse' && $gradiusone &gt;= 0 && strpos($inthing, ' rx=\"') !== false) {<br \/>\n  $outthing=str_replace(' rx=\"' . explode('\"', explode(' rx=\"', $outthing)[1])[0], ' rx=\"' . $gradiusone, $outthing);<br \/>\n}<br \/>\n<br \/>\nif (strtolower($gshape) == 'ellipse' && $gradiustwo &gt;= 0 && strpos($inthing, ' ry=\"') !== false) {<br \/>\n  $outthing=str_replace(' ry=\"' . explode('\"', explode(' ry=\"', $outthing)[1])[0], ' ry=\"' . $gradiustwo, $outthing);<br \/>\n}<br \/>\n<br \/>\nif ($gcx &gt;= 0 && strpos(str_replace(' cx=\"',' x=\"',$inthing), ' x=\"') !== false) {<br \/>\n  $outthing=str_replace('x=\"' . explode('\"', explode('x=\"', $outthing)[1])[0], 'x=\"' . $gcx, $outthing);<br \/>\n}<br \/>\n<br \/>\nif ($gcy &gt;= 0 && strpos(str_replace(' cy=\"',' y=\"',$inthing), ' y=\"') !== false) {<br \/>\n  $outthing=str_replace('y=\"' . explode('\"', explode('y=\"', $outthing)[1])[0], 'y=\"' . $gcy, $outthing);<br \/>\n}<br \/>\n<br \/>\nif ($gwidth &gt;= 0 && strpos($inthing, ' width=\"') !== false) {<br \/>\n  $outthing=str_replace('width=\"' . explode('\"', explode('width=\"', $outthing)[1])[0], 'width=\"' . $gwidth, $outthing);<br \/>\n}<br \/>\n<br \/>\nif ($gheight &gt;= 0 && strpos($inthing, ' height=\"') !== false) {<br \/>\n  $outthing=str_replace('height=\"' . explode('\"', explode('height=\"', $outthing)[1])[0], 'height=\"' . $gwidth, $outthing);<br \/>\n}<br \/>\n<br \/>\nif (strtolower($gshape) == 'circle' && $gradius &gt;= 0 && strpos($inthing, ' r=\"') !== false) {<br \/>\n  $outthing=str_replace(' r=\"' . explode('\"', explode(' r=\"', $outthing)[1])[0], ' r=\"' . $gradius, $outthing);<br \/>\n}<br \/>\n<br \/>\nif (strtolower($gshape) == 'text' && $gfontsize &gt;= 0 && strpos($inthing, ' font-size=\"') !== false) {<br \/>\n  $outthing=str_replace(' font-size=\"' . explode('\"', explode(' font-size=\"', $outthing)[1])[0], ' font-size=\"' . $gfontsize . 'px', $outthing);<br \/>\n} else if (strtolower($gshape) == 'text' && $gfontsize &gt;= 0 && strpos($inthing, ' font-size=\"') === false) {<br \/>\n  $outthing=str_replace('&lt;text ', '&lt;text font-size=\"' . $gfontsize . 'px\" ', $outthing);<br \/>\n}<br \/>\n<br \/>\nif ($gopacity &gt;= 0 && strpos($inthing, ' fill-opacity=\"') !== false) {<br \/>\n  $outthing=str_replace(' fill-opacity=\"' . explode('\"', explode(' fill-opacity=\"', $outthing)[1])[0], ' fill-opacity=\"' . $gopacity, $outthing);<br \/>\n}<br \/>\n<br \/>\nif ($crcolour != '' && strpos($inthing, ' fill=\"') !== false && strpos($inthing, ' fill=\"' . $crcolour) === false) {<br \/>\n  $outthing=str_replace(' fill=\"' . explode('\"', explode(' fill=\"', $outthing)[1])[0], ' fill=\"' . $crcolour, $outthing);<br \/>\n}<br \/>\n<br \/>\nif ($gshape != 'text') {<br \/>\n$crcolour=\"pink\";<br \/>\n$gcx=-1;<br \/>\n$gcy=-1;<br \/>\n$gwidth=-1;<br \/>\n$gheight=-1;<br \/>\n$gopacity=-1.0;<br \/>\n$gfontsize=-1;<br \/>\n$gradius=-1;<br \/>\n$gradiusone=-1;<br \/>\n$gradiustwo=-1;<br \/>\n$gshape='';<br \/>\n}<br \/>\nreturn $outthing;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<\/table>\n<p>Integration tasks await!<\/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-borders-and-backgrounds-shape-numerics-tutorial\/'>Emoji Borders and Backgrounds Shape Numerics Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbst'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Shapes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-shapes-tutorial\/'>Emoji Borders and Backgrounds Shapes Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Shapes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_twotexts.jpg\" title=\"Emoji Borders and Backgrounds Shapes Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Shapes Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Emoji Borders and Backgrounds Text Justification Tutorial' href='#ebbtjt'>Emoji Borders and Backgrounds Text Justification Tutorial<\/a> we add some consideration of SVG shape creations into the mix of the Emoji Borders and Backgrounds work, starting just with the PHP tool, at this stage, and just considering &#8230;<\/p>\n<ul>\n<li>SVG <a target=_blank title='SVG circle element information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_circle.asp'>circle<\/a> element<\/li>\n<li>SVG <a target=_blank title='SVG rect element information from W3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_rect.asp'>rect<\/a> element<\/li>\n<\/ul>\n<p> &#8230; to start off with, and feeding off yesterday&#8217;s &#8230;<\/p>\n<blockquote cite='\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-text-justification-tutorial\/'>\n<ul>\n<li>width=[designatedPxWidth] and height=[designatedPxHeight] &#8230; and\/or &#8230;<\/li>\n<li>image=[someImageUrl] (width and height)<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; breakdown as to how a user can define a box of interest, as a great &#8220;line in the sand&#8221; for us to work around with this new &#8220;Shapes functionality&#8221;.  It&#8217;s an interfacing job, for tomorrow, getting parents to work with this &#8220;image&#8221; argument based way a user can define these shapes, including a &#8220;noimage&#8221; option that uses an image&#8217;s width and height (to help out with the shape definition) but does not display that image.<\/p>\n<p>Along the way we also <font size=1>mildly<\/font> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php-------GETME\">rearrange PHP code<\/a> for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php-------GETME\">inline_svg.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\" title=\"Click picture\">live run<\/a> so as to allow for more than one user text to be added via justification prefixing methodologies.<\/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-borders-and-backgrounds-shapes-tutorial\/'>Emoji Borders and Backgrounds Shapes Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbtjt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Text Justification Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-text-justification-tutorial\/'>Emoji Borders and Backgrounds Text Justification 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\/canvas_svg.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Text Justification Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_justify.jpg\" title=\"Emoji Borders and Backgrounds Text Justification Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Text Justification Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Borders and Backgrounds CSS Styling Tutorial' href='#ebbcssst'>Emoji Borders and Backgrounds CSS Styling Tutorial<\/a>&#8216;s work involving &#8230;<\/p>\n<ul>\n<li>SVG CSS styling &#8230; could be classified as an &#8220;aesthetics&#8221; matter, as could today&#8217;s &#8230;<\/li>\n<li>SVG text justification<\/li>\n<\/ul>\n<p> &#8230; work, though there is no CSS involved with today&#8217;s solutions that we have decided on.  But we did get <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/5546346\/how-to-place-and-center-text-in-an-svg-rectangle'>great help from &#8220;How to place and center text in an SVG rectangle &#8211; Stack Overflow&#8221;<\/a>, thanks, getting us to use a lot more &#8230;<\/p>\n<p><code><br \/>\ntext-anchor=\"end\"<br \/>\n<\/code><\/p>\n<p> &#8230; SVG text element attributing to neaten our emojis up and for the <i>2nd character &#8220;r&#8221;<\/i> text justifications below &#8230;<\/p>\n<ul>\n<li>ultext=[SomeText] &#8230; top left justification<\/li>\n<li>uctext=[SomeText] &#8230; top center justification<\/li>\n<li>urtext=[SomeText] &#8230; top right justification<\/li>\n<li>mltext=[SomeText] &#8230; middle left justification<\/li>\n<li>mctext=[SomeText] &#8230; middle center justification (our inhouse default &#8230; ie. text=[SomeText] is the same)<\/li>\n<li>mrtext=[SomeText] &#8230; middle right justification<\/li>\n<li>bltext=[SomeText] &#8230; bottom left justification<\/li>\n<li>bctext=[SomeText] &#8230; bottom center justification<\/li>\n<li>brtext=[SomeText] &#8230; bottom right justification<\/li>\n<\/ul>\n<p> &#8230; relative to one or both (modes of user defining a box) of &#8230;<\/p>\n<ul>\n<li>width=[designatedPxWidth] and height=[designatedPxHeight] &#8230; and\/or &#8230;<\/li>\n<li>image=[someImageUrl] (width and height)<\/li>\n<\/ul>\n<p> Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php------GETME\">changed PHP tool<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php------GETME\">inline_svg.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\" title=\"Click picture\">live run<\/a> <font color=blue>needed tweaks<\/font> in the code parsing arguments &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n<font color=blue>$gminus30=-1;<br \/>\n$gtop30=-1;<br \/>\n$eight=8;<br \/>\n$twentyfive=25;<br \/>\n$threedotone=3.1;<br \/>\n$textjust=\"\";<br \/>\n$wtwo=2.0;<br \/>\n$htwo=2.0;<br \/>\n$tn='text';<\/font><br \/>\n<br \/>\nforeach ($_GET as $name=&gt;$val) {<br \/>\n  if (strpos(strtolower('' . $name . '~'), 'css~') !== false) {<br \/>\n    if ($svgmiddle == '') {<br \/>\n      $svgmiddle=\"<br \/>\n            &lt;style type=\\\"text\/css\\\" &gt;<br \/>\n                &lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_GET[$name]))) . ';') . \" }<br \/>\n                ]]&gt;<br \/>\n            &lt;\/style&gt;<br \/>\n<br \/>\n      \";<br \/>\n    } else {<br \/>\n      $svgmiddle=str_replace(\"&lt;![CDATA[\", \"&lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_GET[$name]))) . ';') . \" } \", $svgmiddle);<br \/>\n    }<br \/>\n  } <font color=blue>else if (strpos(strtolower('' . $name . '~'), 'text~') !== false) {<br \/>\n    $tn=$name;<br \/>\n    if (strpos(strtolower('~' . $name . '~'), '~text~') !== false) {<br \/>\n      $textjust=\"\";<br \/>\n    } else if (strtolower(substr($name,0,1)) == 't' || strtolower(substr($name,0,1)) == 'u') {<br \/>\n      $htwo=$h;<br \/>\n      $eight=0;<br \/>\n      $twentyfive=30;<br \/>\n    } else if (strtolower(substr($name,0,1)) == 'b' || strtolower(substr($name,0,1)) == 'l') {<br \/>\n      $htwo=1;<br \/>\n      $gtop30=0;<br \/>\n    }<br \/>\n    if (strpos(strtolower('' . $name . '~'), 'rtext~') !== false) {<br \/>\n      $textjust=' text-anchor=\"end\" ';<br \/>\n      $gminus30=(-20 + $w);<br \/>\n    }<br \/>\n    if (strpos(strtolower('' . $name . '~'), 'ltext~') !== false) {<br \/>\n      $wtwo=$w;<br \/>\n      $gminus30=20;<br \/>\n      $threedotone=0;<br \/>\n    }<br \/>\n<br \/>\n  }<\/font><br \/>\n}<br \/>\n<br \/>\nforeach ($_POST as $name=&gt;$val) {<br \/>\n  if (strpos(strtolower('' . $name . '~'), 'css~') !== false) {<br \/>\n    if ($svgmiddle == '') {<br \/>\n      $svgmiddle=\"<br \/>\n            &lt;style type=\\\"text\/css\\\" &gt;<br \/>\n                &lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_POST[$name]))) . ';') . \" }<br \/>\n                ]]&gt;<br \/>\n            &lt;\/style&gt;<br \/>\n<br \/>\n      \";<br \/>\n    } else {<br \/>\n      $svgmiddle=str_replace(\"&lt;![CDATA[\", \"&lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_POST[$name]))) . ';') . \" }<br \/>\n                    \", $svgmiddle);<br \/>\n    }<br \/>\n  } <font color=blue>else if (strpos(strtolower('' . $name . '~'), 'text~') !== false) {<br \/>\n    $tn=$name;<br \/>\n    if (strpos(strtolower('~' . $name . '~'), '~text~') !== false) {<br \/>\n      $textjust=\"\";<br \/>\n    } else if (strtolower(substr($name,0,1)) == 't' || strtolower(substr($name,0,1)) == 'u') {<br \/>\n      $htwo=$h;<br \/>\n      $eight=0;<br \/>\n      $twentyfive=30;<br \/>\n    } else if (strtolower(substr($name,0,1)) == 'b' || strtolower(substr($name,0,1)) == 'l') {<br \/>\n      $htwo=1;<br \/>\n      $gtop30=0;<br \/>\n    }<br \/>\n    if (strpos(strtolower('' . $name . '~'), 'rtext~') !== false) {<br \/>\n      $textjust=' text-anchor=\"end\" ';<br \/>\n      $gminus30=(-20 + $w);<br \/>\n    }<br \/>\n    if (strpos(strtolower('' . $name . '~'), 'ltext~') !== false) {<br \/>\n      $wtwo=$w;<br \/>\n      $gminus30=20;<br \/>\n      $threedotone=0;<br \/>\n    }<br \/>\n<br \/>\n  }<\/font><br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in order to &#8220;flesh out&#8221; our SVG text element creations.  D\u00e9j\u00e0 vu (all over again) for attentive readers below.<\/p>\n<p>The inhouse slideshow PHP clones&#8217; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inhouse_slideshow.js--GETME\">changed associated external Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inhouse_slideshow.js--GETME\">inhouse_slideshow.js<\/a> <font color=blue>now prompts<\/font> &#8230;<\/p>\n<blockquote><p>\nPlease enter comma separated HTML decimal entity(s) for your Emoji Border to slideshow. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control+space for iOS, top left + for Android keyboard).    Optionally append &#038;[text|image]css=[CSSstyle] to change styling.  <font color=blue>Optionally justify some text via &#038;[ul|uc|ur|ml|[mc]|mr|bl|bc|br]text=[someText%0AsecondLine] to change styling.<\/font>  Eg. &#127958;&amp;css=opacity:0.9;&amp;textcss=font-size:20px;<font color=blue>&#038;ultext=Hello%0AThere<\/font>\n<\/p><\/blockquote>\n<p>The Image Map Grid <a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php--------GETME'>changed PHP<\/a> <a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php--------GETME'>imagegridmap.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php\" title=\"Click picture\">live run<\/a> <font color=blue>now prompts<\/font> &#8230;<\/p>\n<blockquote><p>\nPlease enter comma separated HTML decimal entity(s) for your Emoji Border to slideshow. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control+space for iOS, top left + for Android keyboard).   Optionally append &amp;[text|image]css=[CSSstyle] to change styling.    <font color=blue>Optionally justify some text via &#038;[ul|uc|ur|ml|[mc]|mr|bl|bc|br]text=[someText%0AsecondLine] to change styling.<\/font>   Eg. &#127958;&amp;iurl=four.jpg&amp;css=opacity:0.9;font-size:20px;&amp;textcss=text-shadow: -2px 2px 3px #ff2d95;<font color=blue>&#038;ultext=Hello%0AThere <\/font>\n<\/p><\/blockquote>\n<p>Day before yesterday&#8217;s <font size=1>(third parent (to our PHP tool) &#8220;cab off the rank&#8221;)<\/font> SVG -&gt; IMG -&gt; CANVAS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php--GETME\">changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php--GETME\">canvas_svg.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php\">live run<\/a> <font color=blue>now prompts<\/font> &#8230;<\/p>\n<blockquote><p>\nPlease enter comma separated HTML decimal entity(s) for your Emoji Border to graphics. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control+space for iOS, top left + for Android keyboard).  Optionally append &amp;iurl=[newImageURL] to change base image.  Optionally append &amp;[text|image]css=[CSSstyle] to change styling.   <font color=blue>Optionally justify some text via &#038;[ul|uc|ur|ml|[mc]|mr|bl|bc|br]text=[someText%0AsecondLine] to change styling.<\/font>    Eg. &#127958;&amp;iurl=four.jpg&amp;css=opacity:0.9;font-size:20px;&amp;textcss=text-shadow: -2px 2px 3px #ff2d95;<font color=blue>&#038;ultext=Hello%0AThere <\/font>\n<\/p><\/blockquote>\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-borders-and-backgrounds-text-justification-tutorial\/'>Emoji Borders and Backgrounds Text Justification Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbcssst'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds CSS Styling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-css-styling-tutorial\/'>Emoji Borders and Backgrounds CSS Styling 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\/canvas_svg.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds CSS Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg_style.jpg\" title=\"Emoji Borders and Backgrounds CSS Styling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds CSS Styling Tutorial<\/p><\/div>\n<p>It was <a href='#ebbitphpsvgt'>some time ago now<\/a> that we said &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-php-svg-tutorial\/'><p>\n\u2026 via a new \u201ctext\u201d argument arranged for the PHP and in readiness for some more aesthetic improvements in the display side of things with our emoji borders and backgrounds\n<\/p><\/blockquote>\n<p>Well, what gives?  Eh, wot&#8217;s up &#8216;guv?  Yes, indeed &#8230; all we can say is &#8230;<\/p>\n<blockquote><p>\n<font size=1>We got sidetracted.<\/font>\n<\/p><\/blockquote>\n<p> &#8230; and applying spell checker to get around an expression that amuses us &#8230;<\/p>\n<blockquote><p>\n<font size=2>We got sidetracked.<\/font>\n<\/p><\/blockquote>\n<p>So, &#8220;being &#8216;guv&#8221; <font size=1>&#8230; eh, wot &#8230;<\/font> today we&#8217;re having a posting catch up with all the parents and PHP tool child allowing for some CSS styling to be a possibility with the web applications around the theme of &#8220;Emoji Borders and Backgrounds&#8221;, onto yesterday&#8217;s <a title='Emoji Borders and Backgrounds in Canvas Tutorial' href='#ebbct'>Emoji Borders and Backgrounds in Canvas Tutorial<\/a>.<\/p>\n<p>And so <strike>wot<\/strike>what&#8217;s the go with styling in SVG &#8220;land&#8221;?  Is SVG classy?  It&#8217;s not that much different to HTML and CSS, in that &#8220;style&#8221; elements are allowed, and SVG allows you to define a &#8220;class&#8221; attribute for SVG elements, so that&#8217;s kind of class<font size=1>y<\/font> &#8230; eh, wot, &#8216;guv?!   Thanks to <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Attribute\/class' title='class - SVG: Scalable Vector Graphics | MDN'>this great link<\/a> for the heads up on this.<\/p>\n<p>We decided to allow for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php------GETME\">inline_svg.php<\/a> PHP tool&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\">PHP tool live run<\/a> to understand all arguments coming in whose name ends in CSS &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$svgmiddle='';<br \/>\n<br \/>\nforeach ($_GET as $name=&gt;$val) {<br \/>\n  if (strpos(strtolower('' . $name . '~'), 'css~') !== false) {<br \/>\n    if ($svgmiddle == '') {<br \/>\n      $svgmiddle=\"<br \/>\n            &lt;style type=\\\"text\/css\\\" &gt;<br \/>\n                &lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_GET[$name]))) . ';') . \" }<br \/>\n                ]]&gt;<br \/>\n            &lt;\/style&gt;<br \/>\n<br \/>\n      \";<br \/>\n    } else {<br \/>\n      $svgmiddle=str_replace(\"&lt;![CDATA[\", \"&lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_GET[$name]))) . ';') . \" } \", $svgmiddle);<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nforeach ($_POST as $name=&gt;$val) {<br \/>\n  if (strpos(strtolower('' . $name . '~'), 'css~') !== false) {<br \/>\n    if ($svgmiddle == '') {<br \/>\n      $svgmiddle=\"<br \/>\n            &lt;style type=\\\"text\/css\\\" &gt;<br \/>\n                &lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_POST[$name]))) . ';') . \" }<br \/>\n                ]]&gt;<br \/>\n            &lt;\/style&gt;<br \/>\n<br \/>\n      \";<br \/>\n    } else {<br \/>\n      $svgmiddle=str_replace(\"&lt;![CDATA[\", \"&lt;![CDATA[<br \/>\n                    .\" . strtolower($name) . \" { \" . str_replace(';;',';',trim(str_replace('+',' ', urldecode($_POST[$name]))) . ';') . \" }<br \/>\n                    \", $svgmiddle);<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; to add the means by which the SVG&#8217;s optional &#8220;style&#8221; elements be populated, leaving it up to the various parents to inform the users of the possibilities here.<\/p>\n<p>The inhouse slideshow PHP clones&#8217; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inhouse_slideshow.js-GETME\">changed associated external Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inhouse_slideshow.js-GETME\">inhouse_slideshow.js<\/a> <font color=blue>now prompts<\/font> &#8230;<\/p>\n<blockquote><p>\nPlease enter comma separated HTML decimal entity(s) for your Emoji Border to slideshow. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control+space for iOS, top left + for Android keyboard).    <font color=blue>Optionally append &#038;[text|image]css=[CSSstyle] to change styling.  Eg. &#127958;&amp;css=opacity:0.9;&amp;textcss=font-size:20px;<\/font>\n<\/p><\/blockquote>\n<p>The Image Map Grid <a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php-------GETME'>changed PHP<\/a> <a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php-------GETME'>imagegridmap.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php\" title=\"Click picture\">live run<\/a> <font color=blue>now prompts<\/font> &#8230;<\/p>\n<blockquote><p>\nPlease enter comma separated HTML decimal entity(s) for your Emoji Border to slideshow. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control+space for iOS, top left + for Android keyboard). <font color=blue>   Optionally append &amp;[text|image]css=[CSSstyle] to change styling.   Eg. &#127958;&amp;iurl=four.jpg&amp;css=opacity:0.9;font-size:20px;&amp;textcss=text-shadow: -2px 2px 3px #ff2d95; <\/font>\n<\/p><\/blockquote>\n<p>Yesterday&#8217;s <font size=1>(third parent (to our PHP tool) &#8220;cab off the rank&#8221;)<\/font> SVG -&gt; IMG -&gt; CANVAS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php-GETME\">changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php-GETME\">canvas_svg.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php\">live run<\/a> <font color=blue>now prompts<\/font> &#8230;<\/p>\n<blockquote><p>\nPlease enter comma separated HTML decimal entity(s) for your Emoji Border to graphics. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control+space for iOS, top left + for Android keyboard).  Optionally append &amp;iurl=[newImageURL] to change base image.  <font color=blue>Optionally append &amp;[text|image]css=[CSSstyle] to change styling.  Eg. &#127958;&amp;iurl=four.jpg&amp;css=opacity:0.9;font-size:20px;&amp;textcss=text-shadow: -2px 2px 3px #ff2d95; <\/font>\n<\/p><\/blockquote>\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-borders-and-backgrounds-css-styling-tutorial\/'>New Emoji Borders and Backgrounds CSS Styling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbct'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds in Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-in-canvas-tutorial\/'>Emoji Borders and Backgrounds in Canvas 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\/canvas_svg.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds in Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.jpg\" title=\"Emoji Borders and Backgrounds in Canvas Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds in Canvas Tutorial<\/p><\/div>\n<p>Extending yesterday&#8217;s <a title='Emoji Borders and Backgrounds in Image Map Grid Tutorial' href='#ebbimgt'>Emoji Borders and Backgrounds in Image Map Grid Tutorial<\/a>&#8216;s &#8220;Emoji Border and Background&#8221; horizons, today, we take an interest in three associated HTML &#8220;graphic&#8221; elements &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a><\/li>\n<li><a target=_blank title='HTML img tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_img.asp'>IMG<\/a><\/li>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>CANVAS<\/a><\/li>\n<\/ul>\n<p>Can we start with SVG+XML data and get to populate CANVAS data via IMG data via data URIs?   Well, not everything works, but enough works to have a lot of what you&#8217;d want to do &#8220;in this neck of the woods&#8221; be possible.<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nvar svg = document.querySelector('svg');<br \/>\nvar img = document.querySelector('img');<br \/>\nvar canvas = document.querySelector('canvas');<br \/>\n<br \/>\n\/\/ get svg data<br \/>\nvar xml = new XMLSerializer().serializeToString(svg);<br \/>\n\/\/alert(xml);<br \/>\n<br \/>\n\/\/ make it base64<br \/>\nvar svg64 = ''; \/\/btoa(xml);<br \/>\nvar b64Start = ''; \/\/'data:image\/svg+xml;base64,';<br \/>\n<br \/>\n&lt;?php<br \/>\n $mb=maybedef('data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3\/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg\/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD\/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3\/DaG2\/x4GNPgBhEZG\/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN\/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8\/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1\/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ\/+\/CfZ+XUiZ0jTmFv5mAvf\/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu\/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB\/Y4PBqGBtdYvb3SFzLcfqToZc\/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI\/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89\/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC\/Z2R6Rj0ra0w2W1\/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p\/Dp\/\/JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH\/ACJBPYTJ4X8tAAAAAElFTkSuQmCC');<br \/>\n $bemb=\"\";<br \/>\n if (strpos($mb, \"&lt;\/svg&gt;\") !== false) {<br \/>\n $mb='&lt;svg' . explode('&lt;svg', explode('&lt;\/svg&gt;', $mb)[0])[1] . '&lt;\/svg&gt;';<br \/>\n $bemb='data:image\/svg+xml;base64,' . base64_encode($mb);<br \/>\n }<br \/>\n<br \/>\n if ($bemb == \"\") {<br \/>\n echo \"\\n svg64 = btoa(xml); \\n\";<br \/>\n echo \"\\n b64Start = 'data:image\/svg+xml;base64,'; \\n\";<br \/>\n }<br \/>\n?&gt;<br \/>\n<br \/>\n\/\/ prepend a \"header\"<br \/>\nvar image64 = &lt;?php echo maybedef('b64Start + svg64'); ?&gt;;<br \/>\n<br \/>\n\/\/ set it as the source of the img element<br \/>\nimg.onload = function() {<br \/>\n    \/\/ draw the image onto the canvas<br \/>\n    canvas.getContext('2d').drawImage(img, 0, 0);<br \/>\n}<br \/>\n<br \/>\n&lt;?php<br \/>\n if ($bemb != \"\") {<br \/>\n echo \"\\n img.src = '\" . $bemb . \"'; \\n\";<br \/>\n } else {<br \/>\n echo \"\\n img.src = image64; \\n\";<br \/>\n }<br \/>\n?&gt;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>We&#8217;d like to thank <a target=_blank href='https:\/\/stackoverflow.com\/questions\/3768565\/drawing-an-svg-file-on-a-html5-canvas' title='html - Drawing an SVG file on a HTML5 canvas - Stack Overflow'>html &#8211; Drawing an SVG file on a HTML5 canvas &#8211; Stack Overflow<\/a> for the idea that we expand on with our &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php_GETME\">canvas_svg.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/canvas_svg.php\" title=\"Click picture\">live run<\/a> web application (calling <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php-----GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php-----GETME\">inline_svg.php<\/a> PHP tool&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\">PHP tool live run<\/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-borders-and-backgrounds-in-canvas-tutorial\/'>Emoji Borders and Backgrounds in Canvas Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbimgt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds in Image Map Grid Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-in-image-map-grid-tutorial\/'>Emoji Borders and Backgrounds in Image Map Grid 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\/imagegridmap.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds in Image Map Grid Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/imagemapgrid_more.jpg\" title=\"Emoji Borders and Backgrounds in Image Map Grid Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds in Image Map Grid Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Emoji Borders and Backgrounds in Inhouse Slideshow Deployment Tutorial' href='#ebbisdt'>Emoji Borders and Backgrounds in Inhouse Slideshow Deployment Tutorial<\/a> were you around when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-map-grid-styling-email-share-tutorial\/' title='Image Map Grid Styling Email Share Tutorial'>Image Map Grid Styling Email Share Tutorial<\/a>?<\/p>\n<p>Well, it&#8217;s our &#8220;second cab off the rank&#8221; regarding a parent idea to oversee our current PHP tool idea for Emoji Borders and Backgrounds.<\/p>\n<p>Anything new?  Well, yes, quite a big concept too.  With our PHP tool, today, we are allowing it, for a PHP parent (<a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php------GETME'>today&#8217;s changed<\/a> <a target=_blank title='imagegridmap.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php------GETME'>imagegridmap.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/imagegridmap.php\" title=\"Click picture\">live run<\/a>), <font color=blue>to fill in a<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    var tableih='&lt;table id=oneandonly style=\\\"' + tw + th + 'background:\" . $opprefix . \"URL(<font color=blue>\" . backg(\"<\/font>' + indu + '<font color=blue>\") . \"<\/font>);background-repeat:no-repeat;background-size:' + tcover + ';' + tcss + '\\\"&gt;&lt;tbody id=oneandonlytbody  style=\\\"width:100%;' + 'height:100%;\\\"&gt;&lt;\/tbody&gt;&lt;\/table&gt;';<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; background image (to a table element) data URI with mimetype image\/svg+xml and base64 encoding via &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n function backg($indef) {<br \/>\n   global $prebimg, $bimg, $udirname, $poemoji;<br \/>\n   $udirnameprebimg=$udirname . $prebimg;<br \/>\n   if (isset($_GET['iurl'])) {<br \/>\n     $udirnameprebimg=str_replace('+',' ',urldecode($_GET['iurl']));<br \/>\n   } else if (isset($_POST['iurl'])) {<br \/>\n     $udirnameprebimg=str_replace('+',' ',urldecode($_POST['iurl']));<br \/>\n   }<br \/>\n   if (isset($_GET['emoji'])) {<br \/>\n     $poemoji='&lt;input type=hidden id=emoji name=emoji value=\"' . str_replace('+','',urldecode($_GET['emoji'])) . '\"&gt;&lt;\/input&gt;';<br \/>\n     list($wdt, $hgt) = getimagesize($udirnameprebimg);<br \/>\n     if ($wdt &gt; 0 && $hgt &gt; 0) {<br \/>\n     \/\/echo $udirname . \"1:\" . $hgt;<br \/>\n     return file_get_contents($udirname . \"..\/inline_svg.php?asbackground=y&imaXge=\" . urlencode($udirnameprebimg) . \"&width=\" . (-20 + $wdt) . \"&height=\" . (-20 + $hgt) . \"&insvg=\" . str_replace('+','',urldecode($_GET['emoji']))) . '),URL(' . $indef;<br \/>\n     } else {<br \/>\n     \/\/echo \"2:\" . $hgt;<br \/>\n     return file_get_contents($udirname . \"..\/inline_svg.php?asbackground=y&image=\" . urlencode($udirnameprebimg) . \"&insvg=\" . str_replace('+','',urldecode($_GET['emoji']))) . '),URL(' . $indef;<br \/>\n     }<br \/>\n   } else if (isset($_POST['emoji'])) {<br \/>\n     $poemoji='&lt;input type=hidden id=emoji name=emoji value=\"' . str_replace('+','',urldecode($_POST['emoji'])) . '\"&gt;&lt;\/input&gt;';<br \/>\n     list($wdt, $hgt) = getimagesize($udirnameprebimg);<br \/>\n     if ($wdt &gt; 0 && $hgt &gt; 0) {<br \/>\n     return file_get_contents($udirname . \"..\/inline_svg.php?asbackground=y&imaXge=\" . urlencode($udirnameprebimg) . \"&width=\" . (-20 + $wdt) . \"&height=\" . (-20 + $hgt) . \"&insvg=\" . str_replace('+','',urldecode($_POST['emoji']))) . '),URL(' . $indef;<br \/>\n     } else {<br \/>\n     return file_get_contents($udirname . \"..\/inline_svg.php?asbackground=y&image=\" . urlencode($udirnameprebimg) . \"&insvg=\" . str_replace('+','',urldecode($_POST['emoji']))) . '),URL(' . $indef;<br \/>\n     }<br \/>\n   } else {<br \/>\n     return $indef;<br \/>\n   }<br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>Interesting idea, don&#8217;t you think?<\/p>\n<p>It meant a division of two &#8220;threads&#8221; of modus operandi (possible by &#8220;overriding&#8221; the PHP echo function <font color=purple>into an inhouse &#8220;ourecho&#8221; (wrapper style of) function<\/font>), now, for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php----GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php----GETME\">inline_svg.php<\/a> PHP tool&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\">PHP tool live run<\/a> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$asbkg=false;<br \/>\n$whati='image';<br \/>\n<br \/>\nif (isset($_GET['asbackground']) || isset($_POST['asbackground'])) {<br \/>\n $asbkg=true;<br \/>\n $whati='youllneverfindthis';<br \/>\n} else {<br \/>\n header('Content-type: image\/svg+xml');<br \/>\n}<br \/>\n<br \/>\n\/\/ In here are <strike>echo<\/strike>\"ourecho\" codeline calls to construct the SVG+XML<br \/>\n<br \/>\n<font color=purple>function ourecho($inh) {<br \/>\n  global $asbkg;<br \/>\n  if ($asbkg) {<br \/>\n    echo \"data:image\/svg+xml;base64,\" . base64_encode('&lt;svg' . explode('&lt;svg', explode('&lt;\/svg&gt;', $inh)[0])[1] . '&lt;\/svg&gt;');<br \/>\n  } else {<br \/>\n    echo $inh;<br \/>\n  }<br \/>\n}<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>And don&#8217;t you just love &#8220;the <strike>two step<\/strike>two thread jive&#8221;!<\/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-borders-and-backgrounds-in-image-map-grid-tutorial\/'>Emoji Borders and Backgrounds in Image Map Grid Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbisdt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds in Inhouse Slideshow Deployment Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-in-inhouse-slideshow-deployment-tutorial\/'>Emoji Borders and Backgrounds in Inhouse Slideshow Deployment Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/inhouse_slideshow_deployment_revisited.gif\" title=\"Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds in Inhouse Slideshow Deployment Tutorial<\/p><\/div>\n<p>The deployment aspects to yesterday&#8217;s <a title='Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial' href='#ebbist'>Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial<\/a> &#8220;Inhouse Slideshow&#8221; PHP functionality are in our sights today <font size=4>&#8230; happy holidays<\/font>!<\/p>\n<p>&#8220;Inhouse Slideshow&#8221; functionality can not avoid the serverside PHP (ie. <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/CHash\/XML\/index.php--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/CHash\/XML\/index.php--GETME\">index.php<\/a> PHP clone &#8220;original&#8221; <font size=1>and clone<\/font>) in all its aspects, and so we still need &#8230;<\/p>\n<ul>\n<li>the kind of clunky &#8220;many PHP clones&#8221; approach we talked about at <a target=_blank title='Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-slideshow-design-exif-korn-shell-deployment-tutorial\/'>Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial<\/a> for PHP serverside deployment (via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/CHash\/XML\/job.ksh------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/job.ksh------GETME\">job.ksh<\/a> Korn Shell script parent creator of and &#8220;asker&#8221; of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/therealchange.ksh------GETME\">therealchange.ksh<\/a> file copying Korn Shell deployer command line script) aspects to &#8220;Inhouse Slideshows&#8221; (and as you can see with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/inhouse_slideshow_deployment_revisited.gif\">today&#8217;s tutorial animated GIF picture<\/a>), but, as we introduced with this round of such &#8230; but as of yesterday &#8230;<\/li>\n<li>for your more ephemeral &#8220;clientside only&#8221; tweaks we&#8217;ve started, today, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inhouse_slideshow.js_GETME\">inhouse_slideshow.js<\/a> to use Javascript junction &#8220;overrides&#8221; (of PHP Javascript ones above) are possible as a &#8220;single external Javascript code file&#8221; maintenance ongoing possibility for &#8220;Inhouse Slideshow&#8221; functionality &#8230;<br \/>\n<code><br \/>\n\/\/ inhouse_slideshow.js<br \/>\n\/\/ RJM Programming<br \/>\n\/\/ January, 2022<br \/>\n\/\/ Help out with ephemeral aspects to Inhouse Slideshow PHPs<br \/>\n<br \/>\n function changeto(tvis) {<br \/>\n   if (tvis.toLowerCase().indexOf('exif') == 0) {<br \/>\n    if (document.URL.indexOf('?') == -1) {<br \/>\n     location.href=posturl(document.URL.split('#')[0] + '?exif=y');<br \/>\n    } else {<br \/>\n     location.href=posturl(document.URL.split('#')[0].replace(\/pdf\\=\/g, 'pdTf=') + '&exif=y');<br \/>\n    }<br \/>\n   } else if (tvis.toLowerCase().indexOf('pdf') == 0) {<br \/>\n    if (document.URL.indexOf('?') == -1) {<br \/>\n     location.href=posturl(document.URL.split('#')[0] + '?pdf=y');<br \/>\n    } else {<br \/>\n     location.href=posturl(document.URL.split('#')[0].replace(\/exif\\=\/g, 'exTif=') + '&pdf=y');<br \/>\n    }<br \/>\n   } else if (tvis.toLowerCase().indexOf('emoji') == 0) {<br \/>\n    \/\/var borderis=prompt('Please enter comma separated HTML decimal entity(s) for your Emoji Border to slideshow.  Can use an Emoji Menu entry.', '');<br \/>\n    <font color=blue>borderblurb='Please enter comma separated HTML decimal entity(s) for your Emoji Border to slideshow. Can use an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard). ';<\/font><br \/>\n    var borderis=prompt(borderblurb, '');<br \/>\n    var emojiy='';<br \/>\n    if (borderis == null) { borderis=''; } else { borderis=postbb(borderis); }<br \/>\n    if (borderis != '') { emojiy='emoji=' + encodeURIComponent(borderis); }<br \/>\n    if (emojiy != '') {<br \/>\n    if (document.URL.indexOf('?') == -1) {<br \/>\n     location.href=posturl(document.URL.split('#')[0] + '?' + emojiy);<br \/>\n    } else {<br \/>\n     location.href=posturl(document.URL.split('#')[0].replace(\/emoji\\=\/g, 'emojTi=') + '&' + emojiy);<br \/>\n    }<br \/>\n    }<br \/>\n   } else {<br \/>\n    if (document.URL.indexOf('exif=') != -1 || document.URL.indexOf('pdf=') != -1) {<br \/>\n     location.href=posturl(document.URL.split('#')[0].replace(\/exif\\=\/g, 'exTif=').replace(\/pdf\\=\/g, 'pdTf='));<br \/>\n    } else {<br \/>\n     location.href=posturl(document.URL.split('#')[0] + '&eHuhxif=y');<br \/>\n    }<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function postbb(inp) {<br \/>\n   if (inp != '' && inp.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,'').replace(\/\\&\/g,'').replace(\/\\#\/g,'').replace(\/\\;\/g,'').replace(\/\\,\/g,'') != '') {<br \/>\n     return inp;<br \/>\n   } else if (inp != '' && inp.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,'').replace(\/\\,\/g,'') == '') {<br \/>\n     if (eval('' + inp.split(',').length) >= 4) {<br \/>\n       eval('inp=String.fromCodePoint(' + inp + ')');<br \/>\n     }<br \/>\n     return inp;<br \/>\n   } else if (inp != '' && inp.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,'').replace(\/\\&\/g,'').replace(\/\\#\/g,'').replace(\/\\;\/g,'') == '') {<br \/>\n     var outp=inp.replace(\/\\&\\#\/g,',').replace(\/\\;\/g,',');<br \/>\n     outp=outp.trim(',');<br \/>\n     outp=outp.replace(\/\\,\\,\\,\\,\/g,',');<br \/>\n     outp=outp.replace(\/\\,\\,\\,\/g,',');<br \/>\n     outp=outp.replace(\/\\,\\,\/g,',');<br \/>\n     outp=outp.trim(',');<br \/>\n     outp=('~' + outp + '~').replace('~,','').replace(',~','').replace(\/\\~\/g,'');<br \/>\n     if (eval('' + outp.split(',').length) >= 4) {<br \/>\n       eval('outp=String.fromCodePoint(' + outp + ')');<br \/>\n     }<br \/>\n     return outp;<br \/>\n   }<br \/>\n   \/\/alert(String.fromHtmlEntities(inp));<br \/>\n   \/\/alert(inp.toHtmlEntities());<br \/>\n   return inp;<br \/>\n }<br \/>\n<br \/> <br \/>\n function posturl(inpu) {<br \/>\n   return inpu;<br \/>\n }<br \/>\n<\/code><br \/>\n &#8230; including <font color=blue>that one change to Javascript prompt popup window wording<\/font> as an example of an ephemeral &#8220;clientside only&#8221; tweak &#8230; becomes a possibility (which is optional &#8230; ie. the PHP won&#8217;t fail if such an external Javascript does not exist, as those of you actively trying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php\">our guinea pig Inhouse Slideshow<\/a> yesterday might attest to?!)<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/inhouse_slideshow_external_js.jpg' style='width:100%;'><\/img>\n<\/ul>\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-borders-and-backgrounds-in-inhouse-slideshow-deployment-tutorial\/'>Emoji Borders and Backgrounds in Inhouse Slideshow Deployment Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbist'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-in-inhouse-slideshow-tutorial\/'>Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/slideshow_emoji_new.jpg\" title=\"Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial<\/p><\/div>\n<p>Continuing on from yesterday&#8217;s <a title='Emoji Borders and Backgrounds via Emoji Menu Tutorial' href='#ebbemt'>Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/a> and harkening back to <a title='Emoji Borders and Backgrounds Image Text Parent Tutorial' href='#ebbitpt'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-parent-tutorial\/'><p>\n\u2026 the functionalities that would be \u201ccool\u201d at the HTML\/Javascript\/CSS parent side, and then work out how to implement similar functionality, as possible, in SVG, and if possible, we should be able to pass arguments over to the \u201cPHP tool\u201d to eventually code it to be standalone to help other \u201cparenting arrangements\u201d.\n<\/p><\/blockquote>\n<p> &#8230; today&#8217;s &#8220;theme&#8221; concerns the first of those <i>other \u201cparenting arrangements\u201d<\/i> mentioned above, our PHP for Inhouse Slideshow presentation display options &#8230;<\/p>\n<p><select id=\"selmode\" size=4><option value=\"Slideshow\">Slideshow<\/option><option value=\"Exif Slideshow\">Exif Slideshow<\/option><option value=\"PDF Slideshow\">PDF Slideshow<\/option><option value=\"Emoji Border Slideshow\">Emoji Border Slideshow<\/option><\/select> <\/p>\n<p> &#8230; the new &#8220;Emoji Border Slideshow&#8221; display option above calling into play our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php---GETME\">inline_svg.php<\/a> PHP tool&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php\">live run<\/a> <font size=1>(&#8220;Are we there yet, as a tool, I mean &#8230; Mum &#8230; Dad &#8230; anyone?&#8221;)<\/font> web application.<\/p>\n<p>And in so doing, to use an Emoji Menu methodology of selecting your emoji border decoration is &#8220;right up your street, Inhouse Slideshow supervisor&#8221;.<\/p>\n<p>You will find, examining <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php--GETME\">PHP code<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Ansible\/index.php\">representative &#8220;first cab off the rank&#8221; and &#8220;guinea pig&#8221; live run<\/a> that we introduce a non-existant external Javascript call &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript' src='\/inhouse_slideshow.js' defer&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; into the mix.  Why?  Well, perhaps, first off, you should read some history of this &#8220;Inhouse Slideshow&#8221; project over time at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-slideshow-temporary-unzip-tutorial\/'>Inhouse Slideshow Temporary Unzip Tutorial<\/a> and then see that this &#8220;external Javascript lark&#8221; could be better for a way to &#8220;future proof&#8221; the venture, with some improvements being changeable through one (into your chosen Document Root folder, wherever that may be <font size=1>(that is what the leading &#8220;\/&#8221; infers)<\/font>) external Javascript codefile rather than a myriad number of identical PHP codefiles.<\/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-borders-and-backgrounds-in-inhouse-slideshow-tutorial\/'>Emoji Borders and Backgrounds in Inhouse Slideshow Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbemt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds via Emoji Menu Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-via-emoji-menu-tutorial\/'>Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a id=aem target=_blank onmouseover=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\" onclick=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\"  href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds via Emoji Menu Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_control_command_space.jpg\" title=\"Emoji Borders and Backgrounds via Emoji Menu Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/p><\/div>\n<p>On this macOS MacBook Air we&#8217;re used to &#8230;<\/p>\n<p><code><br \/>\ncontrol-command-space<br \/>\n<\/code><\/p>\n<p> &#8230; bringing up an Emoji Menu from which an emoji can be selected and placed wherever the cursor had been placed before that menu display.  That could be &#8230;<\/p>\n<ul>\n<li>on an address bar where the cursor is placed<\/li>\n<li>in a Javascript prompt window that is focussed<\/li>\n<\/ul>\n<p> &#8230; both scenarios (amongst many others, no doubt) of which we will be interested with our current Emoji Borders and Background web application project.  Today&#8217;s work develops our PHP tool ahead of its supervisory web application, and so we are interested in the first scenario above, as far as testing it goes with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php---GETME\">our changed underlying<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php---GETME\">inline_svg.php<\/a> PHP tool <a target=_blank onmouseover=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\" onclick=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=' + encodeURIComponent(String.fromCodePoint(127462,127465)) + '&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\"  href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_more.jpg&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines\">live run<\/a> web application.<\/p>\n<p>The argument &#8220;text&#8221; is already catered for from yesterday but the nature of the data this $_GET[&#8216;text&#8217;] might contain had not catered for &#8230;<\/p>\n<ul>\n<li>unicode data (via Emoji Menus) &#8230; but rather <font color=blue>had catered for<\/font> &#8230;<\/li>\n<li>Javascript call of String.fromCodePoint(<font color=blue>[comma separated list of HTML Decimal Entity(s)]<\/font>);<\/li>\n<\/ul>\n<p> &#8230; only, as of yesterday&#8217;s <a title='Emoji Borders and Backgrounds Image Text PHP SVG Tutorial' href='#ebbitphpsvgt'>Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/a>.  As you would probably concur, yesterday&#8217;s setup was quite user unfriendly, as so many of us now are used to those Emoji Menus being used to fill in your emoji data requirements.<\/p>\n<p>The main gist of the PHP code changes goes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$innards='';<br \/>\n$preinnards='';<br \/>\n<br \/>\nfunction ingp($m) { \/\/ thanks to <a target=_blank title='https:\/\/pretagteam.com\/question\/how-do-i-convert-unicode-special-characters-to-html-entities' href='https:\/\/pretagteam.com\/question\/how-do-i-convert-unicode-special-characters-to-html-entities'>https:\/\/pretagteam.com\/question\/how-do-i-convert-unicode-special-characters-to-html-entities<\/a><br \/>\n global $innards, $preinnards;<br \/>\n if ($innards != '') {<br \/>\n$entity = preg_replace_callback('\/[\\x{80}-\\x{10FFFF}]\/u', function ($m) {<br \/>\n    $char = current($m);<br \/>\n    $utf = iconv('UTF-8', 'UCS-4', $char);<br \/>\n    return sprintf(\"&#x%s;\", ltrim(strtoupper(bin2hex($utf)), \"0\"));<br \/>\n}, $innards);<br \/>\n$preinnards=htmlentities($entity);<br \/>\n$innards='';<br \/>\n }<br \/>\n}<br \/>\n<br \/>\n\/\/ And then later <font color=blue>we change<\/font> ...<br \/>\nif (isset($_GET['insvg'])) {<br \/>\n  $innards=str_replace('+',<font color=blue>''<\/font>,urldecode($_GET['insvg']));<br \/>\n  <font color=blue>if (trim(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','',$innards)))))))))))) != '') {<br \/>\n  ingp($innards);<br \/>\n  }<br \/>\n  if ($preinnards == '') {<\/font><br \/>\n  $preinnards='&amp;#' . str_replace(',',';&amp;#',$innards) . ';';<br \/>\n  <font color=blue>}<\/font><br \/>\n\/\/ rest of if block code uses $preinnards as SVG text innerHTML ... but UTF-16 Surrogate pair scenarios can fail<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/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-borders-and-backgrounds-via-emoji-menu-tutorial\/'>Emoji Borders and Backgrounds via Emoji Menu Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbitphpsvgt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Image Text PHP SVG Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-php-svg-tutorial\/'>Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank onmouseover=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\" onclick=\"if (this.href.indexOf('&#038;') == -1) { this.href+='&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines';  }\"  href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Image Text PHP SVG Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_more.jpg\" title=\"Emoji Borders and Backgrounds Image Text PHP SVG Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/p><\/div>\n<p>To add to yesterday&#8217;s <a title='Emoji Borders and Backgrounds Image Text Parent Tutorial' href='#ebbitpt'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a> today it is &#8220;PHP tool&#8221; work catching up <font color=blue>so as to say<\/font> &#8230;<\/p>\n<ul>\n<li>emoji border &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>emoji background &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>centralized text (in foreground) &#8230; now with wording control via HTML span contenteditable=true elements &#8230; <strike style=color:blue;>not yet <\/strike>argumented to PHP tool <font color=blue><br \/>\n&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['text'])) {<br \/>\n     $txt=str_replace(\"\\n\",\"&lt;br&gt;\", str_replace('&amp;nbsp;',' ',str_replace('+', ' ', urldecode($_GET['text']))));<br \/>\n     $minus30=($w \/ 2.0) - strlen(explode('&lt;br&gt;', $txt)[0]) * 3.1;<br \/>\n     $top30=($h \/ 2.0) + 25 - (sizeof(explode('&lt;br&gt;', $txt)) * 8);<br \/>\n     $lines=explode('&lt;br&gt;', $txt);<br \/>\n     for ($il=0; $il&lt;sizeof($lines); $il++) {<br \/>\n       $textcontent.='&lt;text x=\"' . $minus30 . '\" y=\"' . $top30 . '\"&gt;' . $lines[$il] . '&lt;\/text&gt;';<br \/>\n       $top30+=15;<br \/>\n     }<br \/>\n} else if (isset($_POST['text'])) {<br \/>\n     $txt=str_replace(\"\\n\",\"&lt;br&gt;\", str_replace('&amp;nbsp;',' ',str_replace('+', ' ', urldecode($_POST['text']))));<br \/>\n     $minus30=($w \/ 2.0) - strlen(explode('&lt;br&gt;', $txt)[0]) * 3.1;<br \/>\n     $top30=($h \/ 2.0) + 25 - (sizeof(explode('&lt;br&gt;', $txt)) * 8);<br \/>\n     $lines=explode('&lt;br&gt;', $txt);<br \/>\n     for ($il=0; $il&lt;sizeof($lines); $il++) {<br \/>\n       $textcontent.='&lt;text x=\"' . $minus30 . '\" y=\"' . $top30 . '\"&gt;' . $lines[$il] . '&lt;\/text&gt;';<br \/>\n       $top30+=15;<br \/>\n     }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n<\/font><\/li>\n<li>centralized image (in foreground) &#8230; including some width and height control &#8230; argumented to PHP tool<\/li>\n<\/ul>\n<p> &#8230; via a new &#8220;text&#8221; argument arranged for the PHP and in readiness for some more aesthetic improvements in the display side of things with our emoji borders and backgrounds <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php--GETME\">changed underlying<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php--GETME\">inline_svg.php<\/a> PHP tool <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_more.jpg&#038;insvg=128330&#038;widZth=260&#038;heigXht=260&#038;text=One%0ATwo%0AThree%0ALines\">live run<\/a> web application (<a href='#ebb'>or in iframe<\/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-borders-and-backgrounds-image-text-parent-tutorial\/'>New Emoji Borders and Backgrounds Image Text PHP SVG Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbitpt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Image Text Parent Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-image-text-parent-tutorial\/'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Image Text Parent Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background_more.jpg\" title=\"Emoji Borders and Backgrounds Image Text Parent Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Image Text Parent Tutorial<\/p><\/div>\n<p>Today&#8217;s work continues on from yesterday&#8217;s <a title='Emoji Borders and Backgrounds for Image Tutorial' href='#ebbit'>Emoji Borders and Backgrounds for Image Tutorial<\/a> combining both &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php-GETME\">inline_svg.php<\/a> underlying PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\">live run<\/a> (<a href='#ebb'>or in iframe<\/a>) &#8230; modelled under &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html--GETME\" title=\"emoji_border_background.html\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html--GETME\">emoji_border_background.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\">HTML Parent<\/a><\/li>\n<\/ul>\n<p> &#8230; partnership during testing.  Our final aim is to make the &#8220;underlying PHP&#8221; a proper standalone tool, but &#8220;that&#8217;s a ways off&#8221;, as they say.  Why this extra level of complication?  It&#8217;s easier to &#8230;<\/p>\n<ul>\n<li>see<\/li>\n<li>test<\/li>\n<li>debug (via web browser web inspectors)<\/li>\n<\/ul>\n<p> &#8230; the functionalities that would be &#8220;cool&#8221; at the HTML\/Javascript\/CSS parent side, and then work out how to implement similar functionality, as possible, in SVG, and if possible, we should be able to pass arguments over to the &#8220;PHP tool&#8221; to eventually code it to be standalone to help other &#8220;parenting arrangements&#8221;.<\/p>\n<p>And so, today, we &#8220;get functional&#8221; the combination of parental control through to PHP SVG child display &#8230;<\/p>\n<blockquote><p>\nOptionally enter an image URL ( as needs be, suffix by &#038;width=[preferredWidth]&#038;height=[preferredHeight] and\/or &#038;background=y ) and\/or # prefixed comma separated list of emoji HTML decimal Entity(s) ( eg. #127462,127465 ) ?  Cancel if it is wording you want to change to the left there.\n<\/p><\/blockquote>\n<ul>\n<li>emoji border &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>emoji background &#8230; now with content control via comma separated list of emoji HTML decimal Entity(s) &#8230; argumented to PHP tool<\/li>\n<li>centralized text (in foreground) &#8230; now with wording control via HTML span contenteditable=true elements &#8230; not yet argumented to PHP tool<\/li>\n<li>centralized image (in foreground) &#8230; including some width and height control &#8230; argumented to PHP tool<\/li>\n<\/ul>\n<p><code><br \/>\n function ask(sois) {<br \/>\n   var huhi=prompt('Optionally enter an image URL ( as needs be, suffix by &width=[preferredWidth]&height=[preferredHeight] and\/or &background=y ) and\/or # prefixed comma separated list of emoji HTML decimal Entity(s) ( eg. #127462,127465 ) ?  Cancel if it is wording you want to change to the left there.','');<br \/>\n   if (huhi == null) { huhi=''; }<br \/>\n   if (huhi.trim() != '') {<br \/>\n     if (document.URL.indexOf('rjmprogramming.com.au') == -1 && sois.title.indexOf('rjmprogramming.com.au') != -1) {<br \/>\n       sois.title=document.URL.substring(0,8) + document.URL.substring(8).split('\/')[0] + sois.title.split('rjmprogramming.com.au')[1];<br \/>\n     }<br \/>\n     if (huhi.indexOf('#') != -1) {<br \/>\n       var huhis=huhi.split('#')[1];<br \/>\n       for (var ihuhis=0; ihuhis&lt;huhis.length; ihuhis++) {<br \/>\n         if (eval('' + ihuhis) &lt; eval('' + huhis.length)) {<br \/>\n           if (huhis.substring(ihuhis).substring(0,1).replace('0','').replace('1','').replace('2','').replace('3','').replace('4','').replace('5','').replace('6','').replace('7','').replace('8','').replace('9','').replace(',','') != '') {<br \/>\n            huhi=huhi.replace('#' + huhis.split(huhis.substring(ihuhis).substring(0,1))[0], '');<br \/>\n            huhis=huhis.split(huhis.substring(ihuhis).substring(0,1))[0];<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       if (huhis == '') {<br \/>\n         if (sois.title.indexOf('?insvg=') != -1) {<br \/>\n           sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'');<br \/>\n         } else if (sois.title.indexOf('&insvg=') != -1) {<br \/>\n           sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'');<br \/>\n         }<br \/>\n       } else if (sois.title.indexOf('?insvg=') != -1) {<br \/>\n         sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'?insvg=' + encodeURIComponent(huhis));<br \/>\n       } else if (sois.title.indexOf('&insvg=') != -1) {<br \/>\n         sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'&insvg=' + encodeURIComponent(huhis));<br \/>\n       } else if (sois.title.indexOf('?') != -1) {<br \/>\n         sois.title=sois.title.replace('?','?insvg=' + encodeURIComponent(huhis) + '&');<br \/>\n       } else {<br \/>\n         sois.title=sois.title.split('#')[0] + '?insvg=' + encodeURIComponent(huhis);<br \/>\n       }<br \/>\n     }<br \/>\n     if (huhi.split('&')[0].split('#')[0].trim() != '') {<br \/>\n       if (sois.title.indexOf('?image=') != -1) {<br \/>\n         sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');<br \/>\n       } else if (sois.title.indexOf('&image=') != -1) {<br \/>\n         sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');<br \/>\n       }<br \/>\n       sois.title+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');<br \/>\n     } else if (sois.title.indexOf('?image=') != -1) {<br \/>\n       sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');<br \/>\n     } else if (sois.title.indexOf('&image=') != -1) {<br \/>\n       sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');<br \/>\n     }<br \/>\n     document.getElementById(sois.id.replace('span','if')).src=sois.title; \/\/+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function snapshot(sio) {<br \/>\n   lastih=sio.innerHTML;<br \/>\n   lastio=-1;<br \/>\n   for (var iuh=0; iuh&lt;cds.length; iuh++) {<br \/>\n     if (lastih == cds[iuh]) {  lastio=iuh; } else if (sio.innerHTML.indexOf(' of ') != -1) { if (lastih.split(' of ')[0] == cds[iuh].split(' of ')[0]) {  lastio=iuh;    }    }<br \/>\n   }<br \/>\n }<br \/>\n<br \/> <br \/>\n function newwords(sio) {<br \/>\n   if (lastih != sio.innerHTML && lastio &gt;= 0) {<br \/>\n     cds[lastio]=sio.innerHTML.replace(\/\\&nbsp\\;\/g,' ').replace(\/\\&lt;br\\&gt;\/g,String.fromCharCode(10));<br \/>\n     var documentURL=document.URL.split('#')[0].split('?arr' + lastio + '=')[0].split('&arr' + lastio + '=')[0];<br \/>\n     location.href=(documentURL + '&arr' + lastio + '=' + encodeURIComponent(cds[lastio])).replace('.html&','.html?').replace('.htm&','.htm?');       \/\/ fancystuff();<br \/>\n   }<br \/>\n }<br \/>\n<\/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\/emoji-borders-and-backgrounds-image-text-parent-tutorial\/'>Emoji Borders and Backgrounds Image Text Parent Tutorial<\/a>.<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='ebbit'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds for Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-for-image-tutorial\/'>Emoji Borders and Backgrounds for Image Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Emoji Borders and Backgrounds for Image Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds for Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg_image.jpg\" title=\"Emoji Borders and Backgrounds Context Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>Yesterday's <a title='Emoji Borders and Backgrounds Context Tutorial' href='#ebbct'>Emoji Borders and Backgrounds Context Tutorial<\/a> involved Emoji Borders and Backgrounds around some Text, and hosted the SVG producing PHP with an HTML\/Javascript\/CSS parent webpage, but today we're diving back into <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/inline_svg.php-GETME\" title=\"inline_svg.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php-GETME\">inline_svg.php<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg\">live run<\/a> to allow for the bordered or backgrounded content be an image, staying within the SVG itself that the PHP code produces.<\/p>\n\n\n\n\n\n<p>When image content becomes involved it might be best for you to see for yourself, below, how this new functionality might be used ...<\/p>\n\n\n\n\n\n<table style='width:100%;'>\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&width=260&height=260' title='Tutorial Picture bordered by Doves of Peace (width=260=height) ... http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&width=260&height=260'>Tutorial Picture bordered by Doves of Peace (width=260=height)<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&width=260&height=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&widZth=260&heigZht=260' title='Tutorial Picture bordered by Doves of Peace ... http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&widZth=260&heigZht=260'>Tutorial Picture bordered by Doves of Peace<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insvg=128330&widZth=260&heigZht=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&inZsvg=128330&widZth=260&heigZht=260' title='Tutorial Picture ... \"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&inZsvg=128330&widZth=260&heigZht=260'>Tutorial Picture<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&inZsvg=128330&widZth=260&heigZht=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insZvg=128330&width=260&height=260' title='Tutorial Picture (width=260=height) ... http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insZvg=128330&width=260&height=260'>Tutorial Picture (width=260=height)<\/a><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:280px;'><iframe style='width:100%;height:280px;' src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?image=inline_svg_image.jpg&insZvg=128330&width=260&height=260\"><\/iframe><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html-GETME\" title=\"emoji_border_background.html\">Yesterday's changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html-GETME\">emoji_border_background.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\">HTML Parent<\/a> now Allows for an Image in SVG<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='width:100%;height:880px;'><iframe style='width:100%;height:880px;' src=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\" title=\"emoji_border_background.html\"><\/iframe><\/td>\n\n<\/tr>\n\n\n<\/table>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-for-image-tutorial\/'>Emoji Borders and Backgrounds for Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbct'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Context Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-context-tutorial\/'>Emoji Borders and Backgrounds Context Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Context Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.jpg\" title=\"Emoji Borders and Backgrounds Context Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Context Tutorial<\/p><\/div>\n<p>It&#8217;s all fine and good creating the Emoji Borders and Backgrounds of yesterday&#8217;s <a title='Emoji Borders and Backgrounds Primer Tutorial' href='#ebbpt'>Emoji Borders and Backgrounds Primer Tutorial<\/a>, but it&#8217;s the context of their use that we are starting to take an interest in with today&#8217;s &#8230;<\/p>\n<ol>\n<li>take yesterday&#8217;s <a href='#emtable'>table<\/a> as a starting bit to our &#8230;<\/li>\n<li>&#8220;making use of&#8221; &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html_GETME\" title=\"emoji_border_background.html\">emoji_border_background.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html\">live run<\/a> link for you to contextualize and make use of those table&#8217;s iframe contents from yesterday &#8230;<br \/>\n<iframe id=ebb style='width:100%;height:800px;' src='http:\/\/www.rjmprogramming.com.au\/emoji_border_background.html'><\/iframe>\n<\/li>\n<\/ol>\n<p> &#8230; as we figure out, perhaps, some better &#8220;tool like generics&#8221; here.  We&#8217;ll see <font size=1>(we hope)<\/font>!<\/p>\n<p>But, so far, how would we assess the approach, here?  Well, what we had to do today reminded us a lot of what we do here, often, at this blog, when we talk about <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/\/tag\/overlay\">&#8220;overlay&#8221;<\/a> webpage design approaches.  CSS <i>position:absolute<\/i> and <i>opacity<\/i> and Javascript [element].<i>getBoundingClientRect()<\/i> all made guest appearances!<\/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-borders-and-backgrounds-context-tutorial\/'>Emoji Borders and Backgrounds Context Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebbpt'>Previous relevant <a target=_blank title='Emoji Borders and Backgrounds Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-primer-tutorial\/'>Emoji Borders and Backgrounds 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\/inline_svg.php?insvg=127931\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Borders and Backgrounds Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.jpg\" title=\"Emoji Borders and Backgrounds Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Borders and Backgrounds Primer Tutorial<\/p><\/div>\n<p>Time for a new project into the new year.   It&#8217;s an &#8220;old chestnut&#8221; project, for us.   Being able to handle &#8230;<\/p>\n<ul>\n<li>borders made up of emoji images (in the form of &#8220;image\/svg+xml&#8221; mimetype data)<\/li>\n<li>backgrounds made up of emoji images (in the form of &#8220;image\/svg+xml&#8221; mimetype data)<\/li>\n<\/ul>\n<p> &#8230; via &#8220;proof of concept&#8221; (at least for our &#8220;Primer&#8221; tutorial start) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php_GETME\">inline_svg.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=127931\" title=\"Click picture\">single violin emoji<\/a> or &#8230;<\/p>\n<table id=emtable>\n<tr>\n<th>Description<\/th>\n<th>Iframe<\/th>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'><span id=spanone title=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128330&#038;width=260\">Line of Doves of Peace Emojis<\/span><\/td>\n<td><iframe id=ifone  src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128330&#038;width=260\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'><span id=spantwo title=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128646&#038;width=260&#038;height=120\">Border of Train Emojis<\/span><\/td>\n<td><iframe id=iftwo  src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=128646&#038;width=260&#038;height=120\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'><span id=spanthree title=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=127462,127465&#038;width=260&#038;height=120&#038;background=\">Background Flag of Andorra Emojis<\/span><\/td>\n<td><iframe  id=ifthree src=\"http:\/\/www.rjmprogramming.com.au\/inline_svg.php?insvg=127462,127465&#038;width=260&#038;height=120&#038;background=\"><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p>Cute, huh?!<\/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='#d54474' onclick='var dv=document.getElementById(\"d54474\"); 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='d54474' 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='#d54500' onclick='var dv=document.getElementById(\"d54500\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/context\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54500' 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='#d54503' onclick='var dv=document.getElementById(\"d54503\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54503' 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='#d54526' onclick='var dv=document.getElementById(\"d54526\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54526' 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='#d54533' onclick='var dv=document.getElementById(\"d54533\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/argument\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54533' 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='#d544548' onclick='var dv=document.getElementById(\"d54548\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/menu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54548' 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='#d54558' onclick='var dv=document.getElementById(\"d54558\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slideshow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54558' 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='#d54567' onclick='var dv=document.getElementById(\"d54567\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/deployment\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54567' 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='#d54576' onclick='var dv=document.getElementById(\"d54576\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54576' 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='#d54590' onclick='var dv=document.getElementById(\"d54590\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54590' 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='#d54598' onclick='var dv=document.getElementById(\"d54598\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54598' 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='#d54609' onclick='var dv=document.getElementById(\"d54609\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/justification\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54609' 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='#d54613' onclick='var dv=document.getElementById(\"d54613\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/circle\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54613' 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='#d54620' onclick='var dv=document.getElementById(\"d54620\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geometry\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54620' 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='#d54632' onclick='var dv=document.getElementById(\"d54632\"); 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='d54632' 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='#d54641' onclick='var dv=document.getElementById(\"d54641\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54641' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Emoji Borders and Backgrounds Shape Sharing Tutorial had us sharing via email or SMS our &#8220;Emoji Borders and Backgrounds&#8221; creations via inhouse organized arrangements. But many people are used to just right-clicking (for Windows) and two finger gesturing (for &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-web-browser-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":[2419,69,3891,1885,126,127,1653,2661,161,184,208,2105,281,1654,297,2182,1768,327,341,367,380,381,385,2749,2730,484,2208,541,2298,576,587,590,3890,599,3101,652,1643,738,739,745,752,770,2281,2732,1523,1520,876,894,1836,932,1988,997,1986,3893,2132,1586,1133,1137,1151,1159,1209,1212,1226,3889,1238,1254,1644,3892,1319,1404,2099,1480],"class_list":["post-54641","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-aesthetics","tag-ajax","tag-anchor","tag-argument","tag-background","tag-background-image","tag-base64","tag-base64_encode","tag-border","tag-canvas","tag-circle","tag-context","tag-css","tag-data-uri","tag-data-url","tag-deploy","tag-deployment","tag-did-you-know","tag-display","tag-dropdown","tag-email","tag-email-client","tag-emoji","tag-encode","tag-formdata","tag-geometry","tag-getboundingclientrect","tag-graphics","tag-grid","tag-html","tag-iframe","tag-image","tag-image-grid","tag-img","tag-inhouse","tag-javascript","tag-justification","tag-mail","tag-mailto","tag-map","tag-mathematics","tag-menu","tag-merge","tag-mimetype","tag-numbers","tag-numerical","tag-opacity","tag-overlay","tag-override","tag-php","tag-position","tag-programming","tag-proof-of-concept","tag-rect","tag-rectangle","tag-shape","tag-share","tag-sharing","tag-slideshow","tag-sms","tag-style","tag-styling","tag-svg","tag-svgxml","tag-table","tag-text","tag-text-justification","tag-text-anchor","tag-tutorial","tag-web-browser","tag-web-inspector","tag-xml"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54641"}],"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=54641"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54641\/revisions"}],"predecessor-version":[{"id":54657,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54641\/revisions\/54657"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=54641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=54641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=54641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}