Can I add HTML to my localization strings?

Updated:

Guidance on how to use HTML within localization strings in Tecton.

At the moment, intl-messageformat somewhat supports parsing HTML, but it's limited in its functionality and ease of use. We are discussing internally how we can best support it in the future.

In the meantime, what you can do is use the ignoreTag option, which will parse the HTML tags as part of the string.

Using the q2-loc component

The q2-loc web component supports the ignoreTag boolean prop, which automatically handles rendering HTML content:

<!-- Given the following localization string -->
<!-- myHtmlString: "<strong>Bold text</strong> and <em>italic text</em>" -->

<q2-loc value="myHtmlString" ignore-tag="true"></q2-loc>
<!-- Renders: <strong>Bold text</strong> and <em>italic text</em> -->

Warning: Only use ignoreTag with trusted localization strings that you control, as it renders HTML directly and may expose XSS vulnerabilities if used with user-generated content.

Associated Pages