4

Im trying to translate my app using the i18n official implementation of angular 2: https://angular.io/guide/i18n and im trying to translate some message with HTML inside (font awesome icons lets say).

For example this:

<p i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"
  class="text-muted text-center">
  <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> 
  Instagram
</p>

when i generate the translation file using either ng xi18n or ./node_modules/.bin/ng-xi18n i get the following translation unit.

<x id="START_ITALIC_TEXT" ctype="x-i"/><x id="CLOSE_ITALIC_TEXT" ctype="x-i"/> Instagram

i create a translation file for es locale and when i serve my app using the new locale the font awesome icon is missing, only shows the text instagram.

This problems happens with any nested HTML tags where the parent is being translated.

nastrand
  • 131
  • 1
  • 14

3 Answers3

3

I assume that what you want to translate in the provided example is the word "Instagram". If so you have two options according to the documentation:

  • You can wrap the text to be downloaded in a ng-container tag

<p class="text-muted text-center"> <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> <ng-container i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"> Instagram <ng-container> </p>

  • You can wrap the word to be translated in a comment like this:

<p class="text-muted text-center"> <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> <!-- i18n: instagram-widget.instagram|Instagram name in the foot gallery@@instagramInstagramWidget --> Instagram <!--/i18n--> </p>

Nacho GlezBull
  • 31
  • 2
  • 1
    I feel like there's a mismatch between the title of this thread and the answers. What if I have a longer text and want to add line-breaks (e.g. `
    `)? What is the best practice for doing those translations?     – Jeppe Apr 23 '20 at 05:38
1

The problem was related to the translators i was using.

The translators remove the placeholder tags () and leave only the plain text, what i did is manually look over all the translations strings and add the placeholders where originally are.

Angular uses this placeholders to avoid translators modifying your HTML tags by mistake, in the translation process angular take this placeholders tags and replace it for the original tags in the view (https://github.com/angular/angular/issues/18302)

I cant find (yet) a translation tool that doesnt remove those placeholders

nastrand
  • 131
  • 1
  • 14
0

you can wrap it in a tag. 

 <p class="signupLink">
    <span i18n="@@loginPageNewAtProof">New at Proof?</span>
    <span i18n="@@loginPageSignupHereProof"><a routerLink="/signup">Signup here</a></span>
  </p>

then

  <trans-unit id="loginPageNewAtProof" datatype="html">
      <source>New at Proof?</source>
      <target>Nouveau chez Proof?</target>
</trans-unit>

<trans-unit id="loginPageSignupHereProof" datatype="html">
      <source>Signup here</source>
      <target>Inscrivez-vous ici</target>
</trans-unit>
dheeraj kumar
  • 419
  • 4
  • 6