06-22-2020, 06:55 PM
While browsing over the many forum threads I hit two requestes (from @eslei and @michdal ) for localization of moOde.
It isn't that hard to do, but it will take time. And it also doesn't have to be all or nothing at once.
One of nasty side effects, if you start with translation, is that you notice that English is a very compact language and that it can be needed to get a little bit more screen estate for certain texts.
There are many localization frameworks, one I really like is i18next.
It supports a lot of webframeworks including jquery.
Below is an example how this framework, client-side, can be used.
TLDR:
1 Include the js libraries:
2 Initialize it (after the document load is completed):
3 Tag some static with a class to make it findable and also a translation 'key'. Can contain a namespace prefix.
4 Do some dynamic translation in javascript:
5 Instead of a creating the utf-8 json locale files error-prone by hand we let a parser do the work:
Because most of moOde html is generated php side, use something like wget to get aparsable document.
The content of such file (on per language per namespace) generated(or updated if already exists) file:
Example of a local file with a fresh scanned key:
6 Now the translation work can start by replace the empty strings.
Offcourse the above is only fit for a hello world example, real world use requires things like plurals, array, named arguments etc.
It isn't that hard to do, but it will take time. And it also doesn't have to be all or nothing at once.
One of nasty side effects, if you start with translation, is that you notice that English is a very compact language and that it can be needed to get a little bit more screen estate for certain texts.
There are many localization frameworks, one I really like is i18next.
It supports a lot of webframeworks including jquery.
Below is an example how this framework, client-side, can be used.
TLDR:
- Add the translation libraries and
- Initialize it.
- Tag all the statics to translate (don't have to do all at once)
- Add translate function to text that should be dynamic translated (don't have to do all at once)
- Let a parser scan the files and generate the locale files.
- Start translating (devide the work).
1 Include the js libraries:
Code:
<script src="js/i18next.js"/>
<script src="js/i18nextHttpBackend.js"/>
<script src="js/jquery-i18next.js"/>2 Initialize it (after the document load is completed):
Code:
i18next.use(i18nextHttpBackend) // use http to reload translation resources
.init({
lng: 'en',
ns: ['main', 'config', 'translation'], // set used namespaces to load, default is no namespace which is the translation.json file
debug: true,
// inline translation resources:
/*resources: {
en: {
translation: {
"key": "hello world"
}
}
}*/
backend: {
// for all available options read the backend's repository readme file
loadPath: 'locales/{{lng}}/{{ns}}.json' // path to find translation files
}
}).then(function(t) {
jqueryI18next.init(i18next, $); //init jquery helper for the translation
$(".i18n").localize(); // get all items marked for localization and localize
})3 Tag some static with a class to make it findable and also a translation 'key'. Can contain a namespace prefix.
Code:
<div class="i18n" data-i18n="mpd_config:audiodevice.dsd_over_pcm.label" />4 Do some dynamic translation in javascript:
Code:
$('#mydynamiccontent').html( i18next.t('myscope.mydynamictext') );5 Instead of a creating the utf-8 json locale files error-prone by hand we let a parser do the work:
Code:
$ i18next 'app/**/*.{js,html}'The content of such file (on per language per namespace) generated(or updated if already exists) file:
Example of a local file with a fresh scanned key:
Code:
{
"myscope": {
"mydynamictext": ""
}
}6 Now the translation work can start by replace the empty strings.
Offcourse the above is only fit for a hello world example, real world use requires things like plurals, array, named arguments etc.
