Update the i18n documentation #740
Conversation
doc/i18n.md
Outdated
| ```js | ||
| // do NOT use this! it is difficult to translate "enabled" and "not enabled" | ||
| // differently in the target language! | ||
| const msgNot = enabled ? "" : "not"; |
There was a problem hiding this comment.
in this example also not should be translated
| ```js | ||
| // do NOT use this! it is difficult to translate the parts correctly | ||
| // so they build a nice text after merging | ||
| return <div>{_("User ")}<b>{user}</b>{_(" will be created")}</div> |
There was a problem hiding this comment.
I agree this is wrong, but...
| // TRANSLATORS: %s will be replaced by the user name | ||
| const [msg1, msg2] = _("User %s will be created").split("%s"); | ||
| ... | ||
| return <div>{msg1}<b>{user}</b>{msg2}</div> |
There was a problem hiding this comment.
... this is not much of an improvement to me. I think this is better:
const bold_user = <b>{user}</b>;
return <div>{ sprintf(_("User %s will be created"), bold_user)}</div>or am I missing a catch related to differences between JSX and strings, <b>foo</b> and "<b>foo</b>"?
There was a problem hiding this comment.
That does not work, that bold_user constant is not a string, it is an object. This would be rendered as:
User [object Object] will be created
To avoid code injection React by default escapes all inserted texts so you cannot use HTML tags in translations:
{sprintf(_("User <b>%s</b> will be created"), "USER")}
is rendered as User <b>USER</b> will be created HTML so the user will see:
User <b>USER</b> will be created
There is a way to inject unescaped text but it is insecure and not recommended: https://legacy.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
There was a problem hiding this comment.
Ah so what I was missing is: in React you cannot make HTML from strings, only from React objects
| const [msgStart, msgLink, msgEnd] = _("An error occurred. \ | ||
| Check the [details] for more information.").split(/[[\]]/); | ||
| ... | ||
| return <p>{msgStart}<a>{msgLink}</a>{msgEnd}</p>; |
There was a problem hiding this comment.
OK here it makes more sense, especially if <a> gets some attributes that we don't want the translator to touch
Just adding more content to the i18n documentation.
Note: switch to the rich diff to see the formatted text, that's better readable.