Comment on page

How to style text within locize?

You may be trying to do some basic stylization: bold, italics, underline, etc... Ideally, you also want to add links within a string as well (i.e. a html tag)?

Styling translations depends less on the string - but on the technology (and i18n format) used to render content.

For react-i18next for example, you can use simple HTML elements like <br /> and others:
<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"
For locizify, you might use different content on merged elements (there might be limitations):
<p merge>
  all inside will be used as on segment, even if having other
  <a>elements inside</a>
</p>
​
// key = all inside will be used as on segment, even if having other
<a>elements inside</a>
For plain HTML, you will have to append the translation to the html element as innerContent.
So, really depends on where the string gets rendered and with what technology.

Last modified 7d ago