{"action":"created","issue":{"url":"https://api.github.com/repos/node-red/node-red/issues/566","labels_url":"https://api.github.com/repos/node-red/node-red/issues/566/labels{/name}","comments_url":"https://api.github.com/repos/node-red/node-red/issues/566/comments","events_url":"https://api.github.com/repos/node-red/node-red/issues/566/events","html_url":"https://github.com/node-red/node-red/issues/566","id":57749297,"number":566,"title":"i18n Support","user":{"login":"knolleary","id":51083,"avatar_url":"https://avatars.githubusercontent.com/u/51083?v=3","gravatar_id":"","url":"https://api.github.com/users/knolleary","html_url":"https://github.com/knolleary","followers_url":"https://api.github.com/users/knolleary/followers","following_url":"https://api.github.com/users/knolleary/following{/other_user}","gists_url":"https://api.github.com/users/knolleary/gists{/gist_id}","starred_url":"https://api.github.com/users/knolleary/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/knolleary/subscriptions","organizations_url":"https://api.github.com/users/knolleary/orgs","repos_url":"https://api.github.com/users/knolleary/repos","events_url":"https://api.github.com/users/knolleary/events{/privacy}","received_events_url":"https://api.github.com/users/knolleary/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/node-red/node-red/labels/editor","name":"editor","color":"eb6420"},{"url":"https://api.github.com/repos/node-red/node-red/labels/epic","name":"epic","color":"006b75"},{"url":"https://api.github.com/repos/node-red/node-red/labels/runtime","name":"runtime","color":"5319e7"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-02-15T22:28:48Z","updated_at":"2015-04-09T20:37:50Z","closed_at":null,"body":"We haven't decided on what time-scale we want to enable node-red to be internationalized, but it is something we need to have a plan for.\r\n\r\nThis needs a high-level design that considers how each of the main components will have to be changed to support i18n. The runtime and editor should be fairly straightforward to add support for message catalogues. The hard part is how nodes can provide localized versions; their current architecture doesn't make it entirely obvious how this will be achieved easily.\r\n\r\nThen there is the question of what library to use. Amongst the libraries that appear to be candidates are:\r\n - [jquery.i18n](https://github.com/wikimedia/jquery.i18n)\r\n - [i18next](http://i18next.com/)"},"comment":{"url":"https://api.github.com/repos/node-red/node-red/issues/comments/91349554","html_url":"https://github.com/node-red/node-red/issues/566#issuecomment-91349554","issue_url":"https://api.github.com/repos/node-red/node-red/issues/566","id":91349554,"user":{"login":"kallenboone","id":10621247,"avatar_url":"https://avatars.githubusercontent.com/u/10621247?v=3","gravatar_id":"","url":"https://api.github.com/users/kallenboone","html_url":"https://github.com/kallenboone","followers_url":"https://api.github.com/users/kallenboone/followers","following_url":"https://api.github.com/users/kallenboone/following{/other_user}","gists_url":"https://api.github.com/users/kallenboone/gists{/gist_id}","starred_url":"https://api.github.com/users/kallenboone/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kallenboone/subscriptions","organizations_url":"https://api.github.com/users/kallenboone/orgs","repos_url":"https://api.github.com/users/kallenboone/repos","events_url":"https://api.github.com/users/kallenboone/events{/privacy}","received_events_url":"https://api.github.com/users/kallenboone/received_events","type":"User","site_admin":false},"created_at":"2015-04-09T20:37:50Z","updated_at":"2015-04-09T20:37:50Z","body":"The nodes pose an interesting problem for localization. Much of the text associated with them is in an .html file. From what I understand of the editor code (correct me if I'm wrong), the contents of these .html files are appended to the DOM and data-template-name and data-help-name script elements are used to fill the node config dialog and node help panel, respectively. Currently the contents of the the script elements seem to be used without any processing. \r\n\r\nMy first thought is to run the markup from these two elements through a basic template engine. All it really needs is a simple find/replace. Both libraries you mentioned allow for specifying an element's PII key using a data-i18n attribute, but that feature doesn't seem to work with nested HTML, which could be a problem since I see a lot of the <label> elements including an <i class=\"fa fa-user\"></i> tag in addition the text. Doing the swapping once the HTML has been added to the DOM could be unnecessarily complicated, as well. \r\n\r\nWe could also do the text swapping on the server side. The backend service GET /nodes that returns the node configs would then just do a global find/replace on the html as plaintext, and we can avoid messing with DOM operations outright. Add some caching and I imagine this approach would have better performance than doing the locale swapping on the client side. \r\n\r\nIn either case, each .html file would need to replace the text snippets with variables. If we set up our variables like ${key}, then we could use a function like \r\n\r\nnodeHelpText.replace(/\\${([a-zA-Z]*)}/g, function(match, key){ return i18n.t(key); });\r\n\r\nto perform the replacements. We'd also need a way to specify which PII file to pull the data from. I imagine the core nodes would all use a common file, but additional packages like the web nodes and user nodes would need their own PII file. The client-side approach would make specifying the file easy: just use a property on the object passed to the RED.nodes.registerType() function called in the .html file to set the PII file. I'll have to look more at how the backend stores node information before I determine a good way to specify the PII file with that approach. \r\n\r\nThese are my initial thoughts. Let me know what you think and whether you have any questions. "}}