How To Translate The Entire App To 103 Languages [Tutorial]

Saltar – a easy internet builder, is lately launched. We’re fortunate to be picked up by means of an area information, which led to the choice of customers to shook up. What attention-grabbing was once the choice of non-English audio system is importance.

Greater than part of the customers are Spanish audio system (in keeping with Google Analytics). Additionally, I latterly got here throughout an instructional on the usage of Google Translate in Spreadsheet. So I made up our minds so as to add extra languages to Saltar the usage of Spreadsheet, some frontend and backend code put in combination.

To be honest, there have been just about 400 words wish to translate. Which incorporates unmarried phrases like Post, Cancel, or longer word messages like What do you wish to have this web page referred to as, when it has 10 million audience a month?

This translation manner comes with a couple of problems that I used to be conscious about. For instance:

  • With phrases: when the usage of “state”, in mouse tournament (hover state, energetic state, and many others…), it translated “state” as a area.
  • With words: as we use a shorter type of words, for instance, the usage of “How it really works” as an alternative of “How does it really works?”, the interpretation end result could be differen. To repair this, use an extended shape that has the proper English grammar.

However, the answer supplies a loose and fast approach to translate the app. But even so, the usage of Spreadsheet permits you to repair the interpretation later.

The libraries and sources point out on this put up is to be had on the backside. And here’s step-by-step about the way to translate all of the app.

1. Get ready the SpreadSheet

The purpose of the spreadsheet is to just fill within the default languages. Then use the components to translate the remainder. I arranged the spreadsheet as follows:

  • Each and every column represents a language. The first column is reserved for the default language, which in my case is English.
  • There are 3 necessary rows. The first one is the identify of the language, which incorporates its English identify and local identify. For instance, Vietnamese (Tiếng Việt). Then the second one row is its ISO 639-1 code, reminiscent of “en” for English, or “vi” for Vietnamese. And the remaining one accommodates the GOOGLETRANSLATE components

You’ll to find the template I ready on the finish of this put up

2. Translate the SpreadSheet

As soon as the spreadsheet is in a position, all I’ve to do now’s to find words within the app, fill them into the primary column (default language) of the spreadsheet.

Be aware: The Jstomer library supplies a technique, which returns an inventory of not-translated words. You’ll get the record, then use Paste Particular choice on Google Sheet.

In the second one column, get started translating by means of the usage of the components:

=GOOGLETRANSLATE(sourceValue, sourceLanguageCode, targetLanguageCode)

Repeat to all different languages, for all words (see main points within the spreadsheet template on the backside). Then download as .csv (Record > Obtain > Comma-separated…)


Whenever you open the translated spreadsheet, it took some time to re-load all of the translation components. Let say you will have 100 words, it’s going to be 99 * 103, which is 10.107 formulation to be procedure.

To save you this, after the interpretation is completed, use Paste values (proper click on, Paste Particular > Paste values best). Within the template equipped underneath, I additionally freezed the third row. You’ll go away the components on this row because the template for later use

3. Setup a server handler

Leaving the language programs at the client-side isn’t an ideal thought. Since in my case, it added as much as 0.5-MB within the overall package length. Whilst best 2 languages are required at a time (the default and the user-selected ones).

I made up our minds to arrange a server, which permits the customer to drag and retailer the one 2 languages it wishes. Be aware that we use the CSV knowledge report downloaded in step 2.

The server APIs come with:

  • [GET] /languages/record : checklist all of the to be had languages
  • [GET] /languages/:code1,:code2…?model=:model: Request a couple of language programs (the usage of model to test for adjustments)

Each and every time a request is available in, it reads metadata of the CSV report, will get the date, and fit the “model” within the URL question. When the model is both empty or other, it quite a bit the languages and sends again as JSON.

4. Setup Jstomer library

The primary process of the customer library is to get the asked language, then show it. But even so, every time the app began, it makes a request to the server and downloads the brand new language bundle if there are any adjustments.

This is how the customer library seems like (translate English to Vietnamese):

<code elegance="language-js" taste="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; define: 0px; font-size: 19px; vertical-align: baseline; background: 0px 0px; font-family: &quot;Fira Mono&quot;, monospace; colour: rgb(195, 209, 223);">// use both i8.textual content or i8.t
i8.textual content("Hi there") // =&gt; Xin chào
i8.textual content("Your app __name__ is being created", )
// =&gt; Ứng dụng Reserving của bạn đang được khởi tạo
i8.textual content("Replace", ) // =&gt; CẬP NHẬT

The above instance demonstrates 3 commonplace circumstances for the interpretation. That are (1) a undeniable textual content, (2) textual content with dynamic variables (the usage of placeholder), (3) and addition choices (textual content case change into).

Be aware: there are lots of circumstances that the library didn’t duvet (for the reason that app doesn’t require). For instance, foreign money signal and conversion.

To wrap up, the entire level is to assist any person who can’t perceive English, have an even thought concerning the app and its functionalities. And God is aware of, your undertaking can also be picked up by means of other folks from every other a part of the sector.

Translate the app the usage of a spreadsheet isn’t as refined as one of the crucial translation products and services available in the market. Regardless that it did an good enough process, loose and easy

You’ll download the to be had sources, practice the directions to put in Jstomer and server library. Or making your personal translation library as you sought after from the next hyperlinks

You’ll to find instance for itl and itl-server within the `instance` repository. Be happy to provide me comments and percentage the answer.

(Visited 1 times, 1 visits today)

Leave a Reply