{"id":41092,"date":"2018-10-07T03:01:11","date_gmt":"2018-10-06T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=41092"},"modified":"2018-10-06T21:54:24","modified_gmt":"2018-10-06T11:54:24","slug":"emoji-background-to-text-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-background-to-text-primer-tutorial\/","title":{"rendered":"Emoji Background to Text Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Background to Text Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.jpg\" title=\"Emoji Background to Text Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Emoji Background to Text Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve always been interested in those effects like with those storybooks from (a lot of) our youths that had a special first letter of the story that was decorated.  We played around with this a bit when we presented <a title='LibreOffice Once Upon A Time Primer Tutorial' href='#loouatpt'>LibreOffice Once Upon A Time Primer Tutorial<\/a> some time back.  Well, today, we think, for starters, in these early days of the concept, to decorate all the letters of a webpage with Emoji backgrounds.<\/p>\n<p>We have a &#8220;getting there&#8221; starting effort <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.htm\" title=\"Click picture\">live run<\/a> for you today that started as &#8230;<\/p>\n<ul>\n<li>purely HTML and inline Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.html_GETME\" title=\"emoji_background_text.html\">emoji_background_text.html<\/a>&#8216;s (superceded) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.html\" title=\"Click picture\">live run<\/a> until it tweaked with us that this is a perfect (generically suited) scenario to &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.html-GETME\" title=\"emoji_background_text.htm\">pare down<\/a> the HTML with script tag <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.html-GETME\" title=\"emoji_background_text.htm\">emoji_background_text.htm<\/a> pointing at external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.js_GETME\" title=\"emoji_background_text.js\">emoji_background_text.js<\/a> as the impetus to view this project as a (mainly) &#8220;external Javascript tool project&#8221;<\/li>\n<\/ul>\n<p>As previously mentioned, these are &#8220;early days&#8221;, and am discovering the wonders of the workings, behind the scenes, that makes an HTML <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221; element be that clever interactive piece of web application functionality that it is.  But there is more to learn regarding carriage return\/line feed scenarios.  In the meantime, try out <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_background_text.htm\" title=\"Click picture\">the concept<\/a>.<\/p>\n<hr>\n<p id='loouatpt'>Previous relevant <a target=_blank title='LibreOffice Once Upon A Time Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/libreoffice-once-upon-a-time-primer-tutorial\/'>LibreOffice Once Upon A Time 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\/Mac\/LibreOffice\/OnceUponATime\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"LibreOffice Once Upon A Time Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/OnceUponATime\/OnceUponATime-230of.jpg\" title=\"LibreOffice Once Upon A Time Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">LibreOffice Once Upon A Time Primer Tutorial<\/p><\/div>\n<p>One of my students is getting very good at Word Processing.  Lately, her skills have been improving by being given the task of mimicking the look of pieces of hard copy documents with various levels of complexity.<\/p>\n<p>The other day we came across what we like to think of as the &#8230;<\/p>\n<p><b><i><span>O<sup>nce upon a time<\/sup><\/span><\/i><\/b><\/p>\n<p> &#8230; scenario, and try as we might fiddling with &#8220;top&#8221; justifications and font size adjustments we couldn&#8217;t get a good look in her &#8220;document processing&#8221; software to nicely (enough) line up the smaller font letters to the top of the bigger &#8220;O&#8221;.<\/p>\n<p>Were you annoyed by my &#8220;document processing&#8221; genericity?  Hope not, because, in our experience, for the vast majority of scenarios that matter for day to day usage, there is adequate functionality to achieve what you want in any of <a target=_blank title='Microsoft Office' href='http:\/\/www.microsoftstore.com\/BuyOffice\u200e'>Microsoft Office<\/a> or <a target=_blank title='LibreOffice' href='http:\/\/www.openoffice.org\/\u200e'>OpenOffice<\/a> or <a target=_blank title='LibreOffice' href='http:\/\/www.libreoffice.org\/\u200e'>LibreOffice<\/a>.  It just so happens today we work with LibreOffice, but, as we say, you&#8217;ll see the same things achievable in the other two &#8220;document processing&#8221; suites.<\/p>\n<p>Are you surprised if we tell you that the achievement of a neat looking <b><i><span>O<sup>nce upon a time<\/sup><\/span><\/i><\/b> in LibreOffice is quite difficult, we think, anyway?<\/p>\n<p>We think, though that the functionalities involved in achieving a solution revolve around &#8230;<\/p>\n<ul>\n<li>using tables &#8230; creation of, merging cells of, adjusting row heights of, adjusting column widths of, the use of hard break text with cells, adjusting properties (eg. turning on\/off borders)<\/li>\n<li>adjusting font sizes<\/li>\n<li>using Format-&gt;Character Subscript (and you&#8217;ll also find Superscript sometimes useful) &#8230; unticking Auto to release positioning functionality essential to the positioning of the big &#8220;O&#8221;<\/li>\n<li>using Format-&gt;Paragraph &#8230; not useful here today &#8230; but generally useful regarding vertical justification<\/li>\n<\/ul>\n<p>We direct you here to a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/OnceUponATime\/\">slideshow<\/a> of a warts and all look at the creation of a <b><i><span>O<sup>nce upon a time<\/sup><\/span><\/i><\/b> document snippet.<\/p>\n<p>Please note, that, sadly, the Save As HTML option did not create a very useful HTML snippet here &#8230; <\/p>\n<p><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"LibreOffice Once Upon A Time Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/LibreOffice\/OnceUponATime\/OnceUponATime-231of.jpg\" title=\"LibreOffice Once Upon A Time Primer Tutorial\"  \/><\/p>\n<p> &#8230; but, you will find, we think, easier ways to do this &#8220;thinking HTML and CSS&#8221;, but that is for another time.   Thanks, today, to this <a target=_blank title='Useful link' href='http:\/\/eyeshot.net\/15tupelo1.html'>useful link<\/a>, for the start of one of the <b><i><span>O<sup>nce upon a time<\/sup><\/span><\/i><\/b> stories.  Hope this helps you out.<\/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='#d20610' onclick='var dv=document.getElementById(\"d20610\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/document-processing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20610' 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='#d41092' onclick='var dv=document.getElementById(\"d41092\"); 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='d41092' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve always been interested in those effects like with those storybooks from (a lot of) our youths that had a special first letter of the story that was decorated. We played around with this a bit when we presented LibreOffice &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-background-to-text-primer-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":[126,2442,342,385,409,2537,576,652,997,1254,2005,1319],"class_list":["post-41092","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-contenteditable","tag-div","tag-emoji","tag-external-javascript","tag-generic","tag-html","tag-javascript","tag-programming","tag-text","tag-tool","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41092"}],"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=41092"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41092\/revisions"}],"predecessor-version":[{"id":41100,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41092\/revisions\/41100"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=41092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=41092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=41092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}