Is there a way to use i18n to generate a text that also includes html tags?

[antonisprovidakis]

Hello,

Is there a way to use i18n to generate a text that also includes html tags?

Example:

I guess we could inline html in the translations file

// en.yml
message: Send money to <span class="user js-user">%{user}</element> on %{day}.

// view.js
const message = i18n.t('message', {user: "Mark", day: "Monday"})

However I feel this is not a best practice because we "hide" useful stuff such as class names inside the translations file.

1. A human translator (i.e. from some translation service, e.g. Transifex) sees a lot of noise when the get to translate this key
2. The developer does not know what classes are applied on that span by just taking a look on the view file. He has to also open the translation file just to be sure, which is not productive at all.

What I'm thinking would be something like:

// en.yml
message: Send money to <user_el>%{user}</user_el> on %{day}.

// view.js
const message = i18n.t('message', {
  user: "Mark",
  day: "Monday",
  tags: {
    user_el: <span class="user js-user"/>
  }
})

So that the placeholder tag in the translation file would get replaced by the injected user_el markup.

[fnando]

Hey! I understand the angle, but I believe it's outside the scope of this library. That said, one of the things I do for everything that contains html is explicitly naming it like so. In your example, I'd use something like message_html.

Alternatively, you can write a helper function that receives all args plus the tags you mentioned, and assemble it yourself.