Knockout i18n - render translation that contain html tag

[Icefrog]

Hi,

while using translation with i18n is pretty clear, translations that contains html tags are displayed as text and will look like this :

"this is an <strong>example</strong> text with html tags"

Except in checkout these translation that contains html tags are rendered as expected. 

Is there a way to turn off the html escape when using i18n with knockout ?

Does someone have another process to be able to render these translation ?

Regards,

[madhuresan_ramanan]

Hi @Icefrog,

Here I share the tutorial link of translation in magento. so kindly read it and follow the steps. Hope it will be useful for you.

Refer the link below:
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/translations/translate_theory.html

If my information is useful, give kudos & accept as solution

Best regards

Madhuresan
Bootsgrid

[Icefrog]

Hi,

thanks for your answer but that's not relevant in my case.

Scope : checkout

With the knockout i18n function, translation which contains html tag are printed as strings.

Let's consider this translation :

"Hey i'm in checkout","Hey je suis dans le<strong>checkout</strong>"

If i use the php function __(), it will display the text my translation like this : "Hey je suis dans le checkout"

But if i'm in checkout using ko i18n it will render like this : "Hey je suis dans le<strong>checkout</strong>"

It seems that ko i18n escape html tag to outputs them as part of the translation string.

How can we do to allow ko i18n to output html tags ?
Using ko, you can call a component function where you use js translate function like

$.mage.__("text to translate"); and it will render the html tag as expected !

Maybe there is a way to create a function available from all checkout templates ?

[caleb_anderson1]

vendor/magento/module-ui/view/base/web/js/lib/knockout/bindings/i18n.js

on line 75 is the setText() and it sets the string to the dom element via the .text()

setText = function (el, text) {
            $(el).text(text);
}

and it should be the .html() instead

setText = function (el, text) {
            $(el).html(text);
}

This fix will need to be patched in before it works. 

Hope this helps and if there is any other options or reason this is not a good solution I'd love to hear more ideas.