A translation engine for sciter.js on top of i18next.
IMPORTANT NOTE From 4.4.8.14, sciter.js offers native translation support.
- git clone the repository
- install packages
npm install
- install latest sciter sdk
npm run install-sdk
- start the demo
npm run scapp
- A recent version of Node.js
node
(tested with 16 LTS) and its package managernpm
.- On Windows download and run the installer
- On Linux check the installation guide
- install package
npm install sciter-i18n
- add the
src
dir to your project - in
<script type="module">
// import from npm package
import I18n from "node_modules/sciter-i18n/src/i18n.js";
// import from src dir
import I18n from "src/i18n.js";
document.on("ready", function() {
const locale = "fr";
const file = URL.toPath(__DIR__ + `locales/${locale}.json`);
const config = {
// i18n logging
logging: true,
// debug i18next
debug: true,
};
// initialize translation engine
if (I18n.init(locale, file, config)) {
console.log("i18n init - OK");
// translate window
I18n.i18n(document);
}
});
- create translation file
locales\fr.json
{
"translation": {
"key1": "test du moteur i18n"
}
}
- then in the html code add attribute
data-i18n
to all elements you want translated. If thedata-i18n
attribute value is set then it will be used as the translation key.
<h1 data-i18n="key1">i18n engine test</h1>
- otherwise the element's
innerText
will be the key
<h1 data-i18n>h1</h1>
// with 2 arguments, first serves as key, second as default value (better option)
let message = I18n.m("no-update", "Widget could not be updated.");
// with a single argument, it's both the key and the default value
let message = I18n.m("Widget could not be updated.");
The basics
let message = I18n.m("Widget failed with error {{error_number}}.", { eror_number: 18 });
Interpolation can also be set at initialization to apply to all translations.
const config = {
interpolation: {
defaultVariables: {
name: "Yuri",
country: "Russia",
},
},
};
I18n.init(locale, path, config);
let message = I18n.m("My name is {{name}} and I'm from {{country}}.");
- i18next file system backend or fetch backend
- add missing ids to json
- how to deal with interface refresh?