Emoji Background to Text External Javascript Tutorial
We like projects if and when they reach the stage where you can spend a day’s work on a web application just concentrating on external Javascript “thoughts”, as we prefer the event programming, anyday, to (that involving) the (CSS) styling and (HTML) design work. Today’s work adding to yesterday’s Emoji Background to Text Primer Tutorial was like that. This work primarily involved the relationship between …
- HTML div contenteditable=true element …
- … property behaviours (with their cross browser and platform nuances … and we highly recommend a read of this great link for more ideas here), where the use of the first two, as far as the detection of carriage return/line feed scenarios goes is infinitely more programmer friendly (but still has quirks) than “the last resort” innerHTML last fallback where HTML (within the div contenteditable=true innerHTML property) code snippets such as <div><br></div> are possible (not just with real carriage return/line feed scenarios, but with space key keyboard events … “go figure” … which are onkeypress and onkeydown for all this work)
… as well as external Javascript genericization to the point that an HTML file with the contents …
<script type='text/javascript' src='//www.rjmprogramming.com.au/HTMLCSS/emoji_background_text.js'></script>
… placed onto a local ( Apache/PHP/MySql ) web server like MAMP ( in its Document Root called emoji_background_text.htm and accessed at a web browser address bar via HTTP://localhost:8888/emoji_background_text.htm ) will work …
… and/or, on Firefox (web browser) at least, at the web browser address bar the bookmarklet URL below can work …
… and/or (still) your usual live run link approach we mostly adopt at this blog. We hope you see improvements in the HTML div contenteditable=true behaviours when you use the “enter” keyboard key to place a carriage return/line feed into the div element.
External Javascript code changes (which feature some random Emoji selection code snippets inspired by Emoji Random Slideshow Primer Tutorial, and, so often here at this blog, a few of the usual “overlay” usage “suspects” we like, like CSS position:absolute‘s left and top properties and good ol’ opacity make the whole Emojis as a “background” (rather than “foreground”) happen), then, with emoji_background_text.js code got us to a very generic setup, that shows that the concept of a web page can be so many things to so many things wanting to use it. No wonder the Internet has “taken off” as a “global information superhighway” for so many people around the world.
Thanks to this great poetry link for the inspiration behind today’s tutorial picture construction.
Did you know?
Central to all the Emoji work on this project is the String.fromCodePoint() Javascript function to dynamically add Emoji data into HTML elements via Javascript DOM methods. This current web project, thanks to the “heads up” of this great link, got us constructing what we like to think of as “compound Emojis” we talked about at Compound Emoji WordPress Usage Tutorial, where we need String.fromCodePoint() to be called with more than the one codepoint …
A code point is the atomic unit of information. Text is a sequence of code points. Each code point is a number which is given meaning by the Unicode standard.
… parameter we’d only ever used up to this web application project. This tees up with global array values where a period “.” delimiter separates codepoint values …
var cps=['11088','128301','127756','127968','127765','9728.65039', '9986', '128240', '129304', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1', '-1'];
… that each become parameters of the one call to the String.fromCodePoint() function to create a “compound Emoji”.
Previous relevant Emoji Background to Text Primer Tutorial is shown below.
Emoji Background to Text Primer Tutorial
We’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 Once Upon A Time Primer Tutorial 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.
We have a “getting there” starting effort live run for you today that started as …
- purely HTML and inline Javascript emoji_background_text.html‘s (superceded) live run until it tweaked with us that this is a perfect (generically suited) scenario to …
- pare down the HTML with script tag emoji_background_text.htm pointing at external Javascript emoji_background_text.js as the impetus to view this project as a (mainly) “external Javascript tool project”
As previously mentioned, these are “early days”, and am discovering the wonders of the workings, behind the scenes, that makes an HTML div contenteditable=”true” 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 the concept.
Previous relevant LibreOffice Once Upon A Time Primer Tutorial is shown below.
LibreOffice Once Upon A Time Primer Tutorial
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.
The other day we came across what we like to think of as the …
Once upon a time
… scenario, and try as we might fiddling with “top” justifications and font size adjustments we couldn’t get a good look in her “document processing” software to nicely (enough) line up the smaller font letters to the top of the bigger “O”.
Were you annoyed by my “document processing” 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 Microsoft Office or OpenOffice or LibreOffice. It just so happens today we work with LibreOffice, but, as we say, you’ll see the same things achievable in the other two “document processing” suites.
Are you surprised if we tell you that the achievement of a neat looking Once upon a time in LibreOffice is quite difficult, we think, anyway?
We think, though that the functionalities involved in achieving a solution revolve around …
- using tables … 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)
- adjusting font sizes
- using Format->Character Subscript (and you’ll also find Superscript sometimes useful) … unticking Auto to release positioning functionality essential to the positioning of the big “O”
- using Format->Paragraph … not useful here today … but generally useful regarding vertical justification
We direct you here to a slideshow of a warts and all look at the creation of a Once upon a time document snippet.
Please note, that, sadly, the Save As HTML option did not create a very useful HTML snippet here …
… but, you will find, we think, easier ways to do this “thinking HTML and CSS”, but that is for another time. Thanks, today, to this useful link, for the start of one of the Once upon a time stories. Hope this helps you out.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
