How to translate i18n value from tag in html?

Question

I want to Translate a custom button name using i18n. I tried like this

app/code/My_vendor/My_module/i18n/ar_SA.csv

"I am the gift Receiver","أنا المتلقي هدية"

The affect should take place in below html file

app/code/My_vendor/My_module/view/frontend/web/templates/actions.html

<button click="datafill">
   <span data-bind="i18n: 'I am the gift Receiver'"></span>
</button>

Note: I also tried translate but it also didn't work for me.

Question: How to translate i18n value from tag in html.

Answer 1

That looks like the correct way to use the i18n databind. But that doesn't always populate properly on the frontend unless static content has been deployed. It's relies on the translation json file create there and it doesn't always populate correctly in developer mode. Check the checkout html template files and such if you need to check the syntax.

Answer 2

You can try like this:

<button click="datafill">
   <span>__('I am the gift Receiver')</span>
</button>