Recently, I needed to add a multi-language support to a website that was run using PHP. Sure, I could use some i18n PHP framework to deliver translated web-page directly from a server, but I decided to design a simple approach based on Javascript.<\/p>\n
Here it goes …<\/p>\n
The default language is supposed to be slovene, so visiting a page by url http:\/\/mywebpage would show a slovene version. To get a webpage in a specific language, you need to explicitly define the language using a parameter, like so: http:\/\/mywebpage?lang={sl, hr, en}. Of course, this is used in a header of a web page for a languages selection menu:<\/p>\n
[codesyntax lang=”html4strict”]<\/p>\n
<a id=\"lang-sl\" href=\"\/?lang=sl\">Slovenski<\/a>|\r\n<a id=\"lang-hr\" href=\"\/?lang=hr\">Hrvatski<\/a>|\r\n<a id=\"lang-en\" href=\"\/?lang=en\">English<\/a><\/pre>\n[\/codesyntax]<\/p>\n
In the webpage, I introduced a “lang” HTML tag, which acts as a placeholder for a language-specific text:<\/p>\n
[codesyntax lang=”html4strict”]<\/p>\n
<lang id=\"home\" \/><\/pre>\n[\/codesyntax]<\/p>\n
For each language I create a separate JS file that includes a map variable, whose keys\u00a0are ids used in HTML placeholders and values are translated texts. For example, a file “lang.sl.js” includes slovene translations:<\/p>\n
[codesyntax lang=”javascript”]<\/p>\n
var lang = {\r\n home: \"Domov\",\r\n about: \"O programu\",\r\n functionalities: \"Funkcionalnosti\",\r\n ....\r\n};<\/pre>\n[\/codesyntax]<\/p>\n
Now, as we have everything prepared, we are going to write a JS script that (A) automatically detects a selected language from query string, (B) \u00a0includes an appropriate translation file and (C) automatically populates prepared HTML placeholders. I do this as follows:<\/p>\n
[codesyntax lang=”javascript”]<\/p>\n
$(document).ready(function() {\r\n\r\n\t$.urlParam = function(name){\r\n\t\tvar results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);\r\n\t\tif (results==null){\r\n\t\t return null;\r\n\t\t}\r\n\t\telse{\r\n\t\t return results[1] || 0;\r\n\t\t}\r\n\t}\r\n\t\r\n\tfunction loadJS(file) {\r\n\t\tvar jsElm = document.createElement(\"script\");\r\n\t\tjsElm.type = \"application\/javascript\";\r\n\t\tjsElm.src = file;\r\n\t\t\r\n\t\t$(\"body\").prepend(jsElm);\r\n\t}\r\n\r\n\tif ($.urlParam(\"lang\") == \"en\") {\r\n\t\tloadJS(\"js\/lang.en.js\");\r\n\t\t$(\"#lang-en\").css(\"font-weight\", \"bolder\");\r\n\t} else if ($.urlParam(\"lang\") == \"hr\") {\r\n\t\tloadJS(\"js\/lang.hr.js\");\r\n\t\t$(\"#lang-hr\").css(\"font-weight\", \"bolder\");\r\n\t} else {\r\n\t\tloadJS(\"js\/lang.sl.js\");\r\n\t\t$(\"#lang-sl\").css(\"font-weight\", \"bolder\");\t\r\n\t}\r\n\t\r\n\tfunction fillIn(key, value) {\r\n\t\tdocument.getElementById(key).innerHTML = value;\t \t\r\n\t}\r\n\r\n\r\n\t\/\/Fill in translations\t\r\n\tfor(var key in lang) {\r\n\t fillIn(key, lang[key]);\r\n\t}\r\n\t\r\n});<\/pre>\n[\/codesyntax]<\/p>\n
Additionally to that basic example I added some exceptions to insert language-specific values into some HTML tag attributes.<\/p>\n
Such approach works like a charm for about 200 language keys – I have not tested for more. The whole site is served by an RPi and JS loading of language-specific texts is not noticeable on a client.<\/p>\n