Emoji Background to Text Primer Tutorial

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 …

O^{nce 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 O^{nce 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 O^{nce 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 O^{nce 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.