{"id":373,"date":"2017-09-28T06:44:50","date_gmt":"2017-09-28T04:44:50","guid":{"rendered":"http:\/\/tauria.ee\/002\/?p=373"},"modified":"2019-03-04T12:03:23","modified_gmt":"2019-03-04T10:03:23","slug":"translating-javascript-webapp-with-gettext","status":"publish","type":"post","link":"http:\/\/tauria.ee\/002\/whitepaper\/translating-javascript-webapp-with-gettext\/","title":{"rendered":"Translating JavaScript WebApp with GetText"},"content":{"rendered":"

GNU GetText<\/a> is very powerful tool for translation of applications. Entire Linux world is using it. The tool-set includes original text changes tracking, automatic translations and more. Several user interfaces are available to make translation work faster. Programmers have very solid and understandable way to write original texts into code like this:<\/p>\n

{\r\n  the_need: _(\"I want an red apple\")\r\n}<\/pre>\n
The tools will collect this into translation intermediate file looking for the special function _() from the code with translatable strings. The intermediate file is text file and looks like this:<\/p>\n
#: ..\/source\/app_account.js:15\r\nmsgid \"I want an red apple\"\r\nmsgstr \"\"\r\n<\/pre>\n
where msgid<\/em> is the original text and msgstr<\/em> is translated string. GetText for C\/C++ and other compiled languages is going to order the msgid<\/em> text in ascending order so that the translation can be found using binary search algorithm and is taking least possible time.<\/p>\n
<\/p>\n
When we look from the application perspective, then the “red apple” might be something that is computed and inserted into the text. In C language it would be done like this:<\/p>\n
void do_something_with( char *color, char *item )\r\n{\r\n  char result[200];\r\n  snprintf( result, 200, _(\"I want an %1$s %2$s\"), color, item );\r\n  \/\/ ...\r\n}<\/pre>\n
where color<\/em> and \u00a0item<\/em> are string pointers to the actual texts. Those items need to be translated outside the function. Those may be originated from database where database needs to handle different translations inside. Note that not all C printf function implementations support reordering of the arguments using “%m$s”, where m is the argument order number.<\/p>\n
On JavaScript application we can write the above like this:<\/p>\n
{\r\n  the_need: _(\"I want an %red% %apple%\",{red:color, apple:item})\r\n}<\/pre>\n
afterwards when the variable color<\/em> holds “green” and item<\/em> holds “onion” the resulting message would be “I want an green onion”. The translatable message in translation file will look like this:<\/p>\n
#: ..\/source\/app_account.js:15\r\nmsgid \"I want an %red% %apple%\"\r\nmsgstr \"Quiero una %apple% %red%\"<\/pre>\n
You see that the msgid<\/em> is holding these human understandable placeholders for JavaScript message translator. Also, you will see how the translator would reorder the red<\/em> and apple<\/em> placeholders for the Spanish language. Thus if the variable color<\/em> holds “roja” and variable item<\/em> holds “manzana” then the Spanish translation will be “Quiero una manzana roja”.<\/p>\n
I have not seen that the GetText has been used with JavaScript so far. We have used it. The system is pretty straight forward with JavaScript as the language provides lots of operators for it. If you want to know more about how to use GetText with JavaScript application and get an implementation, then please contact us.<\/p>\n","protected":false},"excerpt":{"rendered":"
GNU GetText is very powerful tool for translation of applications. Entire Linux world is using it. The tool-set includes original text changes tracking, automatic translations and more. Several user interfaces are available to make translation work faster. Programmers have very solid and understandable way to write original texts into code like this: { the_need: _(“I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_meta":""},"categories":[7],"tags":[21,12,22],"_links":{"self":[{"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/posts\/373"}],"collection":[{"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/comments?post=373"}],"version-history":[{"count":12,"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/posts\/373\/revisions"}],"predecessor-version":[{"id":520,"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/posts\/373\/revisions\/520"}],"wp:attachment":[{"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/media?parent=373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/categories?post=373"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/tauria.ee\/002\/wp-json\/wp\/v2\/tags?post=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}