How are we supposed to handle non-breaking spaces in the i18n API?

Add-ons Development
#1

I am developing an add-on in Firefox 83 and I am wondering how we should use non-breaking spaces in the i18n API.

First of all, two requirements:

  • As the docs always recommend, I use no HTML, but .textContent for inserting the text.
  • I want to make it translatable, so I use the browser.i18n API.
  • Also, the literal _ _ is probably not good, because it is not readable and translators could overlook that this is a “special” space. So I want to show it somehow.

I have this text:

:star_struck: Awesome Emoji Picker

What I’ve tried:

  •  – obviously does not work, because I need an HTML-less version
  • \xa0 and \u00a0 – these JavaScript codepoints usually work, but if I place them in the messages.json and then the JSON was broken and I thought I had to escape this. After all, writing \A in a translation also just returns A.
  • \\xa0 and \\u00a0 surprisingly, however, kept the backslash when doing a browser.i18n.getMessage, which broke it again.

And yes I could of course workaround by using a replacement character (and doing a replace afterwards), but I wonder why this does not work…

#2

Okay, strange, now the second version works:

"message": "🤩\u00a0Awesome Emoji Picker",

Maybe me trying to use brackets there to separate the character from the surrounding was wrong, hmm…