Symfony2: HTML inside translation message

Update 2

In such cases, I started to use like this:

confirmed: Congrats %start_link%%username%%end_link%, your account is now activated

Since separation of concerns is maintained, this way is strongly recommended.

Update

In YAML, I have used translations like this without any problem:

trans.key: click <a href="%url%">here</a> to continue

Although translations and design should be kept separated there are always some situations that you must use html tags inside translation files as it is also seen in huge projects like Facebook and Twitter.

In such situations, you can use XLIFF format which is being recommended by Symfony. Inside translation file:

<trans-unit id="1">
   <source>confirmed</source>
   <target>Congrats <![CDATA[<span class='bold'>%username%</span>]]> , your account is now activated.</target>
</trans-unit>

I've just found something out, you can use this in your YAML file:

    mind: >
        <i>Mind is a nice thing to have</i>

So this ">" sign in the first row achieves it. I think this would be the preferred way, better than handling the escapes etc in TWIG.

I've looked it up now and it is actually a YAML feature. Check here :)

Also, there's an earlier question with similar subject: How can I get YAML to ignore raw HTML in same file.


Twig's Raw Filter

I don't know if this was an option back in 2013 but when using translation, you can apply the raw twig filter having this translation string:

confirmed: Congrats <span class='bold'>%username%</span>, 
           your account is now activated.

And use it in twig like this:

 {{ 'confirmed'|trans|raw }}

This will not escape the html inside the string and will display the username as bold.

Update: I haven't seen the comment the first time, but Rvanlaak had proposed the raw filter solution in the first place.

Security issues

Note that the content of those translation strings must not be user provided, because it could open up your application to XSS attacks. Using the raw filter allows JavaScript to be executed if a malicious user is able to input custom data into the translation strings (Community based translations for example)

Separation of concerns

Using the raw filter does not comply with separation of concerns as the content and styling are bound together. As Ferhad mentioned, using his method, separation of concern will be maintained. But in my case, I preferred using a simple raw filter. I felt that for my case, Ferhad's method was a bit overkill for me, though it would be more recommended his way


My approach is although still ugly, but at least respects the separation of concerns. Escape filter is used to escape a variable, making the final result is pretty safe from XSS, because all other sources considered to be hard-coded.

  • translations.yml

    points: You have %num% points left.

  • template.html.twig

    {% set pointsFormatted = '<span class="points">' ~ num | escape ~ '</span>' %}
{{ 'pages.score.points' | trans({'%num%' : pointsFormatted}) | raw }}

Tags:

Symfony

Recent Posts