Description

Hi!

Recently, I had to deal with translations containing HTML tags, for example:

hello_name: Hello <strong>{name}</strong>

It works well for very simple HTML and local projects, but when your translations are stored to an external translation platform like Lokalise or Loco, and you use more complexe HTML tags (ex: <span class="underline underline-offset-3 decoration-8 decoration-indigo-500">), then it becomes a mess:

hello_name: Hello <span class="underline underline-offset-3 decoration-8 decoration-indigo-500">{name}</span>

You don't want to put your HTML in translated strings, because translators are not necessary developers, and it will complicate the maintenance/release process a lot.

Example

Given the explanations above, we can do something like that to interpolate the HTML at the very end through |replace():

{{ 'hello_name'|trans({ name: 'Fabien' })|replace({
    '<strong>': '<span class="underline underline-offset-3 decoration-8 decoration-indigo-500">',
    '</strong>': '</span>',
})|raw }}

It gives us more comfort, but I think it could be even better, half a step up from what React-i18n offers with their component system. I would like to be able to use the following code as an equivalent:

{{ 'hello_name'|trans({ 
    name: 'Fabien',
    '<strong>': '<span class="underline underline-offset-3 decoration-8 decoration-indigo-500" />',
})|raw }}

Not that you can also pass tags like <0>, <1>, etc...

If it starts with < then we can assume the translation parameter value is an HTML component.

WDYT? Thanks!