Enhanced Emoji Rendering

While Xojo’s Graphics class supported rendering emojis on Windows and Linux, their appearance was less appealing.

Now in Xojo 2024r2, we’ve enhanced emojis with vivid colors!

You’ll notice that other parts of the Xojo framework that utilize the Graphics class, such as the ListBox, have also benefited from this update.

Understanding Emojis at a Deeper Level

Understanding how emojis are encoded is crucial for grasping how Xojo’s String type works and how we interpret them. Any text or emoji displayed on the screen can be considered a Unicode sequence or a series of Unicode sequences. At a deeper level, a single Unicode sequence can be constructed from multiple Unicode code points (i.e., bytes of data). For clarity, we’ll describe one character (whether simple text or an emoji) as being composed of Unicode sequence(s).

To demonstrate, let’s try to understand the woman

This particular woman is not very complex, it is made up of one single Unicode sequence (with corresponding code points). Our String type can easily handle this one Unicode sequence and reports correctly that the Length of the String is 1 (even though the entire emoji is made up of 4 bytes of code points).

Now let’s take a look at a more complicated woman

The only difference visually is that this woman has fiery red hair. This subtle change in appearance means that to construct this emoji requires not 1, not 2, but 3 distinct Unicode sequences (with a grand total of 11 bytes of code points).

Note that the reported length of the String is 3 Unicode sequences, even though we visually see only one character. This distinction is very important in understanding how String functions work. Xojo’s String functions inherently deal with Unicode sequences, not individual characters. When you do need to work with complex emojis like these, you will want to utilize our String.Characters API which effectively manages this complexity.

An Optimized String.Characters

Given the prevalence of emojis in everyday text and messages, properly handling them within Xojo’s String type is crucial. While we initially introduced this feature as String.Characters, it functioned as an iterator until Xojo 2024r2. Now, String.Characters returns a String array, which can still be iterated, ensuring existing code continues to work as before. Additionally, this update offers the added advantage of significantly improved speed, especially on Windows and Linux. Along with this update, we introduced String.CharacterCount, which is useful when you need to know the number of characters in a string without storing them all in an array.

To further understand emojis and their corresponding Unicode sequences, check out this Full Emoji List.

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Emojis are available on every operating system and platform that Xojo supports from desktop to mobile to web. Because they are built-in to the OS as characters, they are client-side which means that web applications don’t have to load them from the server as they are already available to the browser from the user’s OS. As characters, they are scalable to any font size. There are also a lot of them. According to Emojipedia (yes, that’s a thing), there are over 3,600 emojis as of September 2021.

Emojis can be especially useful for listboxes in web applications because unlike the DesktopListBox, the WebListBox does not have a PaintCellBackground event that can be used to draw graphics into a cell. Instead, if you can find an emoji that represents what you’d otherwise draw into a cell, you can simply assign it without having to deal with graphics at all. For example, there are a series of emojis that are just boxes in different colors that could be used to indicate the state of something: . The famous web game Wordle uses these when you share your results. With over 3600 available, you can likely find an emoji to represent nearly anything you might need from the common smiling face to the less common umbrella on the ground , banjo or moai from Easter Island.

Again, emojis can be used in any type of application, desktop, mobile or web. Here’s an example of them in a web popup menu:

And here they are in a web list box:

The key thing is to realize that they are individual characters which means they can appear alone or mixed in with other characters. If you need them to be larger, increase the font size. Here’s the lion for example at 60 point size:

Because they are characters, you can copy and paste emojis anywhere you’d use a character, including in your code:

ListBox1.AddRow("Fox 🦊")
ListBox1.AddRow("Lion 🦁")
ListBox1.AddRow("Chipmunk 🐿")

Just remember that emojis are characters, not graphics, so you should treat them as such. Notice in the code above, they are inside the quotes. You could even use them to name a variable:

Var 🌋🥥💰 As String = "Yes, you can do this!"

I’m not sure that’s useful, but it clearly demonstrates how an emoji is a characters like any other.

On Emojipedia you can search for emojis by keyword and copy them to the clipboard. Again because they are simply characters, you can then paste them into a Xojo constant, make them the default value of a property or even paste them into the Code Editor to assign them in code.

Keep emojis in mind the next time you need an image in an application.