How to style text within Locize?

Want to add bold, italics, underlines, or links to your translations? Styling text in Locize depends on the technology and i18n format you use to render your content.

General Tips

• Keep translations clean: Avoid mixing too much HTML or styling in your translation keys. Use placeholders or tags only where needed.
• Document your conventions: Make sure your translators know how to handle tags or placeholders.

React (react-i18next)

With react-i18next, you can safely use simple HTML elements and even React components inside your translations. See the official docs for more details.

<Trans i18nKey="welcomeUser">
  Hello <strong>{{name}}</strong>. <Link to="/inbox">See my profile</Link>
</Trans>
// JSON: "welcomeUser": "Hello <strong>{{name}}</strong>. <1>See my profile</1>"

<Trans i18nKey="multiline">
  Some newlines <br /> would be <br /> fine
</Trans>
// JSON: "multiline": "Some newlines <br /> would be <br /> fine"

Locizify

With locizify, you can use merged elements to include HTML inside your translations (with some limitations):

<p merge>
  all inside will be used as one segment, even if having other
  <a>elements inside</a>
</p>
// key = all inside will be used as one segment, even if having other <a>elements inside</a>

Plain HTML/JavaScript

If you’re using plain HTML or vanilla JavaScript, insert the translation as innerHTML (be careful with user-generated content to avoid XSS vulnerabilities):

element.innerHTML = t('keyWithHtml');

Summary

How you style text in Locize depends on your frontend framework and rendering method. Always check the documentation for your i18n library and keep your translation keys as simple and maintainable as possible.