Dynamic content translation

Learn how to translate content containing variables

Dynamic content translation is a way of making possible to translate strings in which you can find dynamic content within.

Take the following example:

  • Hi Jon, how are you?

Jon currently being displayed, is just a name in a set of many different names.

Dynamic markup strings

Because of how markup translations work in Hi-Framework, the syntax for translating dynamic markup strings does not change.

Meaning this:

   <label translate>Hi</label>

and this:

   <label translate>Hi {{name}}</label>

Will both be translated in the same way (On the server-side as the policy states).

What will happen is that once the translated version of the markup reaches the client side, the variables inner the labels will naturally be handled by AngularJs.

Let's assume the dictionary file containing that translation looks like this :

   Hi {{name}} = Oi {{name}}

When the markup of the view gets loaded, it will be looking like this :

   <label>Oi {{name}}</label>

And then AngularJs will just be AngularJs.

Dynamic javascript strings

As the Translation Policy explains, Javascript is translated on the client-side. The way you translate dynamic strings is not very different from how you translate normal strings, after all it's the same feature.

Let's recap:

   translate("Hi Human!") 
   //returns the translated version of "Hi Human!"

You can translate a string containing variables, as long as you provide an object for Hi-Framework to read their values from:

   translate("Hi {{name}}!").with({name:"Jack"}) 
   //1. fetches the translated version of "Hi {{name}}!" 
   //2. apllies the value of the {{name}} variable
   //3. returns the final string

If name is a variable from the view's $scope, you can just pass the $scope as param. Since the $scope is an object the key is there, so things will just work fine.

   translate("Hi {{name}}!").with($scope)
Github Repository