{"id":44949,"date":"2019-05-14T03:01:01","date_gmt":"2019-05-13T17:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44949"},"modified":"2019-05-13T19:03:16","modified_gmt":"2019-05-13T09:03:16","slug":"emoji-border-image-slice-repeat-outset-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-image-slice-repeat-outset-tutorial\/","title":{"rendered":"Emoji Border Image Slice Repeat Outset Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Emoji Border Image Slice Repeat Outset Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bibi.gif\" title=\"Emoji Border Image Slice Repeat Outset Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Border Image Slice Repeat Outset Tutorial<\/p><\/div>\n<p>CSS border images are &#8220;another woooooooorrrrlllldd&#8221; out there in &#8220;I.T. land&#8221; &#8230; <a target=_blank title='?' href='https:\/\/www.pinterest.com.au\/pin\/833517843513489130\/'>you rang<\/a> &#8230; and adding onto the previous <a title='Emoji Border or Background Image Mobile Canvas Tutorial' href='#ebbimct'>Emoji Border or Background Image Mobile Canvas Tutorial<\/a> web application we allow the user, as far as border images go, specify &#8230;<\/p>\n<ul>\n<li>border-image-slice<\/li>\n<li>border-image-repeat<\/li>\n<li>border-image-outset<\/li>\n<\/ul>\n<p> &#8230; via, respectively, emoji definition or image URL definition appended by ? or &#038; delimited (arguments) involving &#8230;<\/p>\n<ul>\n<li>slice=number|%|fill|initial|inherit<\/li>\n<li>repeat=stretch|repeat|round|initial|inherit<\/li>\n<li>outset=length|number|initial|inherit<\/li>\n<\/ul>\n<p> &#8230; that you can get more information about at <a target=_blank title='Border Image additional parameters' href='https:\/\/www.w3schools.com\/jsref\/prop_style_borderimage.asp'>this great link<\/a>, thanks.<\/p>\n<p>As such, you may want to take a gecko at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/right_bottom.html----GETME\" title=\"right_bottom.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html----GETME\" title=\"right_bottom.html\">right_bottom.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>This could be a topic you just need to throw yourself into, to find out more, though we can show you a little with today&#8217;s <a target=_blank title='Tutorial picture' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bibi.gif\">animated GIF<\/a> presentation.<\/p>\n<hr>\n<p id='ebbimct'>Previous relevant <a target=_blank title='Emoji Border or Background Image Mobile Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-mobile-canvas-tutorial\/'>Emoji Border or Background Image Mobile 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\/right_bottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Emoji Border or Background Image Mobile Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/right_bottom_email_mobile_canvas.jpg\" title=\"Emoji Border or Background Image Mobile Canvas Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Border or Background Image Mobile Canvas Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Border or Background Image Canvas Tutorial' href='#ebbict'>Emoji Border or Background Image Canvas Tutorial<\/a>&#8216;s HTML5 canvas functionality was best showing those attributes we listed &#8230;<\/p>\n<blockquote>\n<ul>\n<li>the HTML5 canvas element right click or two finger gesture functionality includes Copy options &#8230;<\/li>\n<li>the canvas can collect both images and text and be able to summarize that into &#8230;<\/li>\n<li>a single image can be derived from the canvas element, encapsulating its contents &#8230; so that &#8230;<\/li>\n<li>the canvas element can export that graphical content into a data URI that involves no absolute URLs &#8230; and so ties in nicely with &#8230;<\/li>\n<li>email attachments can go hand in hand with the canvas element via a serverside function such as PHP&#8217;s mail function to enhance sharing functionalities<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; for non-mobile platforms, alas.  What was stopping the &#8220;Copy&#8221; options, in particular, on mobile platforms?  Basically the difference in this web application&#8217;s workings are that the canvas [canvas].<a target=_blank title='HTML canvas element drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage<\/a> first image object parameter in our case is an absolute URL, the use of which will, on mobile platforms, cause a &#8230;<\/p>\n<p><code><br \/>\nSecurityError: The operation is insecure.<br \/>\n<\/code><\/p>\n<p> &#8230; error when using the [canvas].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a> method with an absolute URL first parameter, unless either of the two approaches below is adopted &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Another useful link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/cors\/'>CORS<\/a><\/li>\n<li>turn absolute URL into a <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a><\/li>\n<\/ul>\n<p> &#8230; the latter approach of which we implement using some new (child iframe called) PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.php_GETME\" title=\"right_bottom.php\">right_bottom.php<\/a> that features the use of <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> method for the broad brush description&#8217;s <em>contents<\/em> below &#8230;<\/p>\n<p><code><br \/>\n\"turn absolute URL into a data URI\" occurs with an HTML img element \"src\" attribute value where in pseudo PHP, for a *.png image ...<br \/>\n[data URI] = 'data:image\/png;base64,' . <a target=_blank title='PHP base64_encode information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php'>base64_encode<\/a>(file_get_<em>contents<\/em>([absolute URL]));<br \/>\n<\/code><\/p>\n<p>This mobile platform progress on today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html---GETME\" title=\"right_bottom.html\">right_bottom.html<\/a> had <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/right_bottom.html---GETME\" title=\"right_bottom.html\">these changes<\/a> we hope, again, are of use to you as you follow this web application&#8217;s progress.<\/p>\n<hr>\n<p id='ebbict'>Previous relevant <a target=_blank title='Emoji Border or Background Image Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-canvas-tutorial\/'>Emoji Border or Background Image 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\/right_bottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Emoji Border or Background Image Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/right_bottom_email_canvas.jpg\" title=\"Emoji Border or Background Image Canvas Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Border or Background Image Canvas Tutorial<\/p><\/div>\n<p>We want to keep moving on HTML5 canvas integration adding onto yesterday&#8217;s <a title='Emoji Border or Background Image Sharing Tutorial' href='#ebbist'>Emoji Border or Background Image Sharing Tutorial<\/a> beginnings to the Sharing functionality of our Emoji Creations web application.<\/p>\n<p>What&#8217;s the big deal with the HTML5 <a target=_blank title='HTML5 canvas element information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/html\/html5_canvas.asp'>canvas<\/a> element?  For a few things &#8230;<\/p>\n<ul>\n<li>the HTML5 canvas element right click or two finger gesture functionality includes Copy options &#8230;<\/li>\n<li>the canvas can collect both images and text and be able to summarize that into &#8230;<\/li>\n<li>a single image can be derived from the canvas element, encapsulating its contents &#8230; so that &#8230;<\/li>\n<li>the canvas element can export that graphical content into a data URI that involves no absolute URLs &#8230; and so ties in nicely with &#8230;<\/li>\n<li>email attachments can go hand in hand with the canvas element via a serverside function such as PHP&#8217;s mail function to enhance sharing functionalities<\/li>\n<\/ul>\n<p>The Emoji CSS helping images here can populate HTML img elements and the object of that image can form the basis for parameter one of the canvas drawImage method to draw that image into the contents of the canvas element.  We show all this in a window.open new window as a first idea we&#8217;ll develop further into the future.<\/p>\n<p>Progress on today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html--GETME\" title=\"right_bottom.html\">right_bottom.html<\/a> had <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/right_bottom.html--GETME\" title=\"right_bottom.html\">these changes<\/a> we hope are of use to you as you follow this web application&#8217;s progress.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-canvas-tutorial\/'>Emoji Border or Background Image Canvas Tutorial<\/a>.<\/p>\n<hr>\n<p id='ebbist'>Previous relevant <a target=_blank title='Emoji Border or Background Image Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-sharing-tutorial\/'>Emoji Border or Background Image 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\/right_bottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Emoji Border or Background Image Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/right_bottom_email.jpg\" title=\"Emoji Border or Background Image Sharing Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Border or Background Image Sharing Tutorial<\/p><\/div>\n<p>We&#8217;re getting in early with &#8220;sharing&#8221; thoughts to augment the usefulness of yesterday&#8217;s <a title='Emoji Border or Background Image Primer Tutorial' href='#ebbipt'>Emoji Border or Background Image Primer Tutorial<\/a>, but think some aspects here will develop further as we turn this web application into more of a &#8220;product&#8221; in future days.<\/p>\n<p>We started the day with thoughts of integrating the HTML5 canvas element into the workings, because it will be integral to future functionality improvements, but found its &#8220;sharing&#8221; capabilities regarding &#8230;<\/p>\n<ul>\n<li>border image &#8230; and\/or &#8230;<\/li>\n<li>background image<\/li>\n<\/ul>\n<p> &#8230; to be harder than we thought, though we have not given up here.  Instead, though, as far as &#8220;sharing&#8221; improvements go, we allow the user to send emails via the client mail application via an HTML &#8220;a&#8221; &#8220;mailto:&#8221; link that we click to set the email functionality off.<\/p>\n<p>Our &#8220;a&#8221; &#8220;mailto:&#8221; link&#8217;s href attribute is populated at two places, those being &#8230;<\/p>\n<ul>\n<li>a remembered href &#8220;prefix&#8221; at the document.body onload event &#8230; starting with the HTML &#8230;<br \/>\n<code><br \/>\n&lt;a href='mailto:?subject=Emoji%20Creation&body=' style='display:none;' id='aemail'&gt;Email&lt;\/a&gt;<br \/>\n<\/code><br \/>\n &#8230; the document.body onload event Javascript logic &#8230;<br \/>\n<code><br \/>\n  var wasa='';<br \/>\n  document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?canvas=');<br \/>\n  wasa=document.getElementById('aemail').href;<br \/>\n<\/code><br \/>\n &#8230; then &#8230;<\/li>\n<li>a calculated &#8220;suffix&#8221; kicked off by the user clicking a new &#8220;Email&#8221; link in amongst the header fields of the web application<\/li>\n<\/ul>\n<p> &#8230; and it is this second &#8220;suffix&#8221; calculation that crystallizes for us, in code, the curiosity that never fails to get our curiosity of this scenario involving the nesting of <a target=_blank title='Javascript encodeURIComponent method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeURIComponent.asp'>encodeURIComponent<\/a> within another encodeURIComponent, as in the Javascript statement &#8230;<\/p>\n<p><code><br \/>\n  document.getElementById('aemail').href=wasa + encodeURIComponent(encodeURIComponent(cis));<br \/>\n  document.getElementById('aemail').click();<br \/>\n<\/code><\/p>\n<p>So that, with an email body section content of &#8230;<\/p>\n<p><code><br \/>\n<a style='word-wrap:break-word;' target=_blank title='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E' href='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E'>https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; triggered by the &#8220;a&#8221; &#8220;mailto:&#8221; link href &#8230;<\/p>\n<p><code><br \/>\n<a style='word-wrap:break-word;' target=_blank title='mailto:?subject=Emoji%20Creation&#038;body=https%3A%2F%2Fwww.rjmprogramming.com.au%2Fright%5Fbottom.html%3Fcanvas%3D%253Ccanvas%2520%2520id%253D%2522mycanvas%2522%25C2%25A0style%253D%2522top%253A0px%253Bleft%253A0px%253Bposition%253Aabsolute%253Bz-index%253A7%253B%2520width%253A673.3333129882812px%253B%2520height%253A280.6666564941406px%253Bdisplay%253A%2520block%253B%2520border%253A%252080px%2520solid%2520red%253B%2520border-image-source%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F1f3a1.png)%253B%2520background-image%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F26f1.png)%253B%2522%253E%253C%252Fcanvas%253E' href='mailto:?subject=Emoji%20Creation&#038;body=https%3A%2F%2Fwww.rjmprogramming.com.au%2Fright%5Fbottom.html%3Fcanvas%3D%253Ccanvas%2520%2520id%253D%2522mycanvas%2522%25C2%25A0style%253D%2522top%253A0px%253Bleft%253A0px%253Bposition%253Aabsolute%253Bz-index%253A7%253B%2520width%253A673.3333129882812px%253B%2520height%253A280.6666564941406px%253Bdisplay%253A%2520block%253B%2520border%253A%252080px%2520solid%2520red%253B%2520border-image-source%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F1f3a1.png)%253B%2520background-image%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F26f1.png)%253B%2522%253E%253C%252Fcanvas%253E'>mailto:?subject=Emoji%20Creation&body=https%3A%2F%2Fwww.rjmprogramming.com.au%2Fright%5Fbottom.html%3Fcanvas%3D%253Ccanvas%2520%2520id%253D%2522mycanvas%2522%25C2%25A0style%253D%2522top%253A0px%253Bleft%253A0px%253Bposition%253Aabsolute%253Bz-index%253A7%253B%2520width%253A673.3333129882812px%253B%2520height%253A280.6666564941406px%253Bdisplay%253A%2520block%253B%2520border%253A%252080px%2520solid%2520red%253B%2520border-image-source%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F1f3a1.png)%253B%2520background-image%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F26f1.png)%253B%2522%253E%253C%252Fcanvas%253E<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; any stray blank characters will cause a broken link, whereas these spaces sometimes survive a pasting into a web browser address bar with proper navigational integrity.  So what goes on with the URL above is &#8230;<\/p>\n<ol>\n<li>the &#8220;mailto:&#8221; brings up the email client application with the To: field left blank &#8230;<\/li>\n<li>the &#8220;?subject=Emoji%20Creation&#8221; fills in a default value of &#8220;Emoji Creation&#8221; (via decodeURIComponent) into the Subject field &#8230;<\/li>\n<li>what follows the &#8220;&#038;body=&#8221; is filled in as the default value in the Body section of the email (via decodeURIComponent) to <a style='word-wrap:break-word;' target=_blank title='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E' href='https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E'>https:\/\/www.rjmprogramming.com.au\/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E<\/a> at the receiving end of the email &#8220;sharing&#8221;<\/li>\n<\/ol>\n<p> &#8230; hence the need for &#8220;encodeURIComponent(encodeURIComponent(cis))&#8221;.<\/p>\n<p>Our HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html-GETME\" title=\"right_bottom.html\">right_bottom.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/right_bottom.html-GETME\" title=\"right_bottom.html\">this way<\/a> today to add in email sharing.<\/p>\n<hr>\n<p id='ebbipt'>Previous relevant <a target=_blank title='Emoji Border or Background Image Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-or-background-image-primer-tutorial\/'>Emoji Border or Background Image 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\/right_bottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Emoji Border or Background Image Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.jpg\" title=\"Emoji Border or Background Image Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Border or Background Image Primer Tutorial<\/p><\/div>\n<p>Have you ever seen an Emoji you&#8217;d really like to use as either a webpage &#8230;<\/p>\n<ul>\n<li>border image &#8230; and\/or &#8230;<\/li>\n<li>background image<\/li>\n<\/ul>\n<p>?  Well, we&#8217;re here to tell you, thanks to the brilliance of <a target=_blank title='Emoji CSS' href='https:\/\/afeld.github.io\/emoji-css\/'>Emoji CSS<\/a> you may already be familiar with us mentioning at <a target=_blank title='Emoji CSS blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Emoji%20CSS'>these blog postings<\/a> &#8230; yes &#8230; this can be done.<\/p>\n<p>Our proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/right_bottom.html_GETME\" title=\"right_bottom.html\">right_bottom.html<\/a> HTML and Javascript and CSS most interesting Javascript is &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n<br \/>\n var bmode='border';<br \/>\n<br \/>\n function analyze(tvi) {<br \/>\n   if (tvi.textContent != '') {<br \/>\n     if (tvi.textContent.length &lt;= 2) {<br \/>\n     if (bmode == 'border') {<br \/>\n     document.getElementById('myb').style.borderImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.textContent.<a target=_blank title='Javascript codePointAt information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/codePointAt'>codePointAt<\/a>(0).toString(16) + '.png\")';<br \/>\n     } else {<br \/>\n     document.getElementById('myb').style.backgroundImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.textContent.codePointAt(0).toString(16) + '.png\")';<br \/>\n     }<br \/>\n     } else {<br \/>\n     if (bmode == 'border') {<br \/>\n     document.getElementById('myb').style.borderImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.innerHTML.toLowerCase().replace(\/\\&\/g,'').replace(\/\\#\/g,'') + '.png\")';<br \/>\n     } else {<br \/>\n     document.getElementById('myb').style.backgroundImage='url(\"\/\/twemoji.maxcdn.com\/2\/72x72\/' + tvi.innerHTML.toLowerCase().replace(\/\\&\/g,'').replace(\/\\#\/g,'') + '.png\")';<br \/>\n     }<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; called from the <i>onblur<\/i> event of an HTML div contenteditable=true field there for the user to enter an Emoji of interest ideally via &#8230;<\/p>\n<ul>\n<li>HTML Entity (Hex) value (less the &amp; and # please) &#8230; but should also work for &#8230;<\/li>\n<li>Emoji Placement menu selections that on a MacBook Pro you&#8217;d access via Control-Command-Space<\/li>\n<\/ul>\n<p> &#8230; the toggling between &#8220;border&#8221; and &#8220;background&#8221; available via our oft-used &#8220;-&#8221; sign link in the headers.<\/p>\n<p>Useful, we hope, 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='#d40239' onclick='var dv=document.getElementById(\"d40239\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40239' 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='#d40267' onclick='var dv=document.getElementById(\"d40267\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40267' 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='#d40286' onclick='var dv=document.getElementById(\"d40286\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40286' 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='#d40303' onclick='var dv=document.getElementById(\"d40303\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40303' 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='#d44949' onclick='var dv=document.getElementById(\"d44949\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slice\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44949' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS border images are &#8220;another woooooooorrrrlllldd&#8221; out there in &#8220;I.T. land&#8221; &#8230; you rang &#8230; and adding onto the previous Emoji Border or Background Image Mobile Canvas Tutorial web application we allow the user, as far as border images go, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-border-image-slice-repeat-outset-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,37],"tags":[126,2953,161,2299,281,282,385,576,590,2954,997,2955,2664,1319],"class_list":["post-44949","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-backjground-image","tag-border","tag-border-image","tag-css","tag-css3","tag-emoji","tag-html","tag-image","tag-outset","tag-programming","tag-repeat","tag-slice","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44949"}],"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=44949"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44949\/revisions"}],"predecessor-version":[{"id":44953,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44949\/revisions\/44953"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}