Make final decision between   \u00A0 or class="nowrap"

[groovecoder]

In #486 we never quite finalized whether to use  , \u00A0 or <span class="nowrap"> for strings with spaces that shouldn't be broken.

There seem to be l10n and a11y pros and cons to each method. Let's list them out and discuss them here and make the final decision.

[Pike]

Generally, exposing dom fragments to l10n is gonna be a source of errors. Often it's worth the risk, but in this case, I think just generally using unicode to work for us sounds good.

Would there be any counter-indications where nbsp breaks, but CSS nowrap works?

[flodolo]

I think the options are between UTF-8 non breaking space and the nowrap class, while the HTML shouldn't on the table?

[flodolo]

Personally I would go with one product name and unicode

# {"\u00A0"} is a non-breaking space, and it's used to prevent the product name
# from being displayed on two lines
-product-name = Firefox{"\u00A0"}Monitor

[stasm]

AFAICT, the fluentFormat helper inserts the translation content verbatim into the templates. Do Handlebars do anything to prevent broken markup? If not, the <span class="nowrap"></span> approach comes with the risk that a broken translation messes up the markup of the template. Using HTML entities is safer in this regard, but still suffers from being transparent to Fluent. For Fluent, any HTML markup in the translation is just regular text; there isn't any additional validation step for it.

OTOH, using the Unicode escape sequence ({"\u00A0"}, which is a feature of the Fluent syntax, means that we can detect errors in the translation very early in the lifecycle of the translation: Pontoon won't even save a translation with a syntax error in it.

[groovecoder]

Pulling this out of l10n launch milestone, unless someone thinks we need to ship with this?

[lesleyjanenorton]

Closing - I think we've reached a good working consensus on markup in strings.