Translating the UI

I fired quite a few more commits into the Project Trillek UI repository today. The changes include full CLI testing automation as well as Travis CI integration. Alongside all this cool testing stuff I’ve improved the i18n tooling to make it a tiny bit easier to add languages as well as spot missing keys.

When running the application now you’ll get a console.warn notification within the developer tools if there are any missing i18n keys in your current language. This should help in the future when we could have hundreds of i18n keys. To have all of those translations though, we’ll need more languages. I’m going to give a quick overview as to how you can help by translating the UI into your respective languages.

How to add a language

Warning: Adding a language to the repository requires some fairly basic git usage. You may have to brush up on that first.

First of all, you’re going to want to fork the repository and clone your version down, now you can checkout to develop. You may perform any branching or git workflow strategies you want here, it’s your repository (I’d recommend nvie’s flow though).

Now you can actually add your translations. You start off by copying ./src/assets/js/trillek/i18n/en.js into a new file right next to it under your new language key name. You can now go into your new file and translate each key into your own language.

Now you need to get your fresh translations loaded into the UI, you do this by opening up ./src/assets/js/trillek/i18n/main.js and editing the languages array you should be able to see near the top of the file. You can simply copy an existing key, such as en or pl, and edit where you see fit. Beware of missing or trailing commas though, this is a JavaScript array.

The final step is to add your new language to the language selection list. This is done by opening up ./src/assets/js/trillek/config/default.js and adding your new language to i18n.availableLanguages. Again, all you have to do is follow the format of the existing languages. Add your key and spell the languages name in it’s actual language, not English. The word on the right is what is displayed to the user within the language list, we want it in the actual language they’re looking for, they may not be able to spot it if it’s written in English.

Then, pull request

The only thing I have to say about the final pull request is this: Make sure the destination branch is set to develop. If you leave it set to master I’ll have to do a manual merge locally. GitHub then won’t realise and I’ll have to close the pull request manually when I’m done. Sure, this isn’t too bad, but it’ll look like I just ignored you and closed the pull request, it also means I can’t do it from the train, for instance.

If everything has gone well, I’ll hit merge and your new language, or improvements to an existing one, will be merged into develop, ready and waiting for the next release.

I look forward to seeing how many languages we can get it translated into. Be warned though, there aren’t many keys yet, I’ll be continually adding them to en as we progress. I’ll need everyone’s help to keep the other languages in sync with en.


  1. jeftaDotEu

    Wanted to translate to dutch, but wasn’t able to find the right files; i could not find the i18n folder.. Can anyone help me?


    1. Did you checkout the `develop` branch? It should be in `src/assets/js/trillek/i18n` as long as you’re on `develop`.

    2. Ruben van Baarle

      Sorry, you’re just too slow, I already translated dutch now


Leave a Reply

Your email address will not be published. Required fields are marked *