Background
Recently I am working on a job which is for implement i18n for wechat work version. However, this project is 3 years old and it is not originally designed for international website. Our job is to make the existed Chinese website support English.
It is hard because if we want to support i18n, usually it should be planned and well designed. In many cases, we use a lot of variables to store our translation of different languages. And we use these variables in our project.
In our case, the website is finished with a lot of Chinese words in it and there’s no time for us to rewrite with variables to replace all Chinese words. There are too many words.
Besides, the whole front-end tech stack is too old (backbone + jquery). We are not able to use 3rd library like React or Vue. We also need to translate the words from our node server.
Access-Language
The original plan is to determine the Access-Language as the user’s language in Node server. For example,
The HTTP request will include the field Access-Language like this: en,zh-CN;q=0.9,zh;q=0.8,en-US;q=0.7. This means that the en is user’s first language. So we should show English version to our customer.
How to translate?
There is a file format called .po. This is for translation words. It can be used as the file shared between developers and translators.
How to automatically find Chinese words and translate them?
We write a javascript to scan the whole project and filter all the Chinese words in a po file. Then we send it to the 3rd translation department. After translation, we get a po file with translation finished.
Then, we scan the whole project to wrap the Chinese words with a function. Which is to map the Chinese words to the English words in po files.
So, the translation is happened when user load the scripts. And for html, it will be translated in server side. Because it is generated by template engine.