How to use Unicode characters in labels and text nodes

The Defoldmine
#1

I’m writing this here as a reminder for myself, and perhaps also as help for others:

Today I got a question from our translators how to use a zero-width space character in Defold. A zero-width space character isn’t visible but it is respected by the line-break option in Defold labels and GUI text nodes.

You can usually paste your unicode characters as is into a string and set that on a label or text node, but in the case of a zero-width space character that isn’t very convenient since it can’t be seen. What you can do instead is to use the UTF-8 encoded representation of the zero-width space character. A zero-width space is Unicode \u200B which when encoded to UTF-8 becomes:

\226\128\139

You can try this yourself using an online UTF-8 encoder/decoder. Copy the Unicode symbol and paste it and you’ll get the UTF-8 encoded equivalent (note that you must use decimal, not hexadecimal numbers). This does of course work for any Unicode symbol:

‡ encodes to \226\128\161
™encodes to \226\132\162
and so on

Remember that you also need to make sure that the character exists in the font for it to display properly and that you have either added the character you wish to use in the Extra Characters field of the font or checked the All Chars checkbox!

12 Likes
#2

Which code should go in the Extra Charactersfield for a non breaking space?

From the IAP docs:

The ‘~’ characters are placeholders where no matching character could be found in the font file. The “price_string” field returned in the product list when using iap.list() is formatted with a non breaking space ( \u00a0 ) between the value and the currency denominator. If you render this string in the GUI, you need to add the character to the font’s extra_characters field. On Mac OS X you can type non breaking spaces by pressing Option + SPACE.

The link above produces this for non breaking space:

\xC2\xA0

Shuld this be used, or \u00a0 mentione above?

Update: \xC2\xA0 doesn’t work. I am getting the price_string from Apple, and produces a ~ symbol for the space. Regular spaces work fine, just not this special and magical space:

Bitmap

Worth noting is that Apple isn’t terribly consistent in formatting the price:

IMG_D7CA0E7B864A-1z
IMG_D7CA0E7B864A-1z.jpg1125×2436 333 KB

#3

Is the non-breaking space glyph in the font you are using?

#4

I was wondering that, but not sure how to test it?

#5

Open your font in https://fontforge.org/en-US/ and check the symbol. View -> Goto if it’s an X it means most likely there is no glyph set. You could copy and paste the normal space from that font into its cell and rebuild the font and that would probably work. Usually ~ indicates failed glyph lookup.

1 Like