i18n and javascript quotes

[Sshnyari]

Currently, we have a .NET application with a front end built with angular.
We use multiple html template files with translatable tokens within.
It all works great with i18n. A single translation framework for both front and back ends. All outgoing "traffic" goes through i18n before getting out, either be it text, javascript, json, xml or html

The problem arises (or becomes more noticiable) when we want to minify everything that gets sent client side :
With gulp, we can easily "minify" html templates (with gulp-angular-templatecache for example)
What it basically does is create a js file that contains every html template used by angular.
An example of the js file :
angular.module("templates").run(["$templateCache",function(e){e.put("actions/actions.html",'<div>[[[Quotes of text]]]</div>')}]);
If the translation of "Quotes of text" is "Text's quotes", the browser gets the following js file :
angular.module("templates").run(["$templateCache",function(e){e.put("actions/actions.html",'<div>Text's quotes</div>')}]);

Which causes a syntax error.

We could correct the problem by escaping the translated string in the po file (like this : "Text's quotes"), but the token can be used in other content types where the escape character would be visible.

Is there a way to escape translated strings based on content types (or context it is used in or something else more appropriate) when tokens are being replaced ?

[turquoiseowl]

Sorry, i18n doesn't support different messages per content type.

Have you tried using HTML entities, in this case ' ?

[turquoiseowl]

Or even better: ’

[Sshnyari]

Yep, but it doesn't go well with json data (using .net webapi)

[Sshnyari]

http://stackoverflow.com/questions/18326218/should-i-html-encode-response-of-my-web-api

[turquoiseowl]

If I understand you correctly, you are effectively encoding HTML into Javascript. If that is correct, it seems more than reasonable to me to have HTML entities in that Javascript. I'm not clear where JSON comes into it.

[Sshnyari]

Well, the token can either be in a javascript file, an html file, or a json file (or json response from a web api)

[turquoiseowl]

Yes, good call. I've added some functionality -- please see the commit.

[Sshnyari]

Cool, thanks man

[mesteves]

Hi, I have a similar case, but somewhere between requests and roundtrips, the javascript file misses the translation :( What could be the cause for that?

I even tried other approach placing the tokens in different lines:
var p1 = '[[[[No guidelines.]]]]'; var p2 = '[[[[Please choose guidelines to evaluate.]]]]'; var message = '<strong>' + p1 + '</strong> ' + p2;

Thanks for any help that you can provide.

[turquoiseowl]

@mesteves Sorry, I'm not clear on your problem/question.

[mesteves]

Hi @turquoiseowl thanks for your feedback, those images on my first post, it's the resulting javascript after comming from the server. The first one, if you notice, is in Czech with the parameter %0 replaced by the corresponding value. I have those string in a angularJs controller and when the first time page loads, everything is ok, I do some postback's and still ok, but after 4/5 postbacks/roudtrips to the server, the angular controller that comes from the server losses the translations and serves the file with the second format (in the default language and with no parameter substitution). Don't know if I was more clear now to expose my problem. If you need some more information, please tell me.

[turquoiseowl]

This sounds like the URL for the AJAX/$http requests isn't carrying across the language tag. Diagnosing at the HTTP level would help to see full details of the problematic request. Maybe #267 will help.