Find a proper solution for translated strings with different styles in between

[briansztamfater]

Context

We have some components that include texts with a text in the middle with different styling, and to achieve the desired design we are concatenating components with multiple chunks of i18n english translated strings to conform the complete string. #15627 (comment)

A visual example:

Problem

This approach won't work once we start to translate strings, because not all languages combine words in the same way / order. Also we know for sure that RTL (right-to-left) languages are read backwards compared to LTR (of course :)) so we need to take them also into consideration.

Output

We need to find the best approach to implement these kind of components, in a way that can be easily translatable without sticking to english language.

cc @smohamedjavid @ilmotta @erikseppanen

[ibrkhalil]

We can put context information on the translation JSON key for each word to refer to sentence it's used in, this will give the translators enough context to add the correct translation.
Like for example:

{ "search>search-for-contact":"Search" }

Or we can even put the whole sentence.

If we use this approach, It should be added with documentation.

[ilmotta]

For future reference, i18n-js allows customization of the interpolate function (see https://github.com/fnando/i18n/blob/main/src/helpers/interpolate.ts#L19). The solution can very well be related to this, and we'd then implement a custom interpolator that understands Reagent elements.

This is even mentioned in the README:

You may want to override the default interpolate function with your own, if for instance you want these dynamic values to be React elements:

-- https://github.com/fnando/i18n#translating-messages