The translation of JSON is commonly used for software localization and the translation of data. In this blog post we will check out an easy and fast way to translate locales as well as JSON data. We will cover different aspects that are relevant for these use cases. If you like to get a head start just sign up.
Online JSON Translator
The Simpleen online translator supports JSON (and other common formats like YAML) with variable/interpolation handling. You can translate from and to 12 languages which are supported by DeepL like Spanish, English, French or Portuguese. Just copy/paste your locale files or JSON data and insert it in the translator. After a few seconds you can copy the translated result.
Configuration of Translator
Basically you configure a translator with a Format like JSON, a source- and target language and the corresponding interpolation for localization. Additional translation options are the formality to get more or less formal results. This is very useful if you translate from english to other languages because in english the formality cannot always be determined.
For the translation of JSON data you can add selections to partially translate your structure and exclude others from getting translated.
The configuration is saved in your account and can be reused easily.
Adapt Translations With Custom Glossary
With your glossary you can define words that should be excluded from getting translated. This is really useful for brands and product names. You can also define some words that should always be translated to specific words. Depending on how you use your glossary they can be target language specific or generally used for multiple configurations.
Limits of the Online Translator
The Online Translator is a good starting point to try out Simpleen. You don’t have any vendor lock-in or an additional dependency in your project. But there are limits for this approach. Especially for a continuous localization process, where you also adapt your translations and handle multiple versions we recommend to use the CLI. Also if you have many JSON files that you want to get translated.
Continuous Translations With the CLI
When to Use the CLI
The Simpleen CLI brings machine translations into your development workflow. You create your multilingual app/game and can enjoy the results in other languages while developing. This is the fastest way to check and improve your app for a multilingual audience. It's a suitable approach for quality assurance during internationalization (i18n). It's also an alternative approach to pseudo localization.
Lock Translations
The translation results will evolve over time. Therefore, adapted translations should not be overwritten once you adapted the localization result. To handle this situation, the CLI can create a lock file which should be put under version control. After a manual change or a merge from your translation management system, simply run simpleen lock. It considers the source translation file, so that keys can be reused in larger projects.
Translate JSON to Localize
A variety of i18n libraries use JSON locales by default to support localizing your app into multiple languages. Depending on the library they use flat (i.e. react intl) or nested JSON structures (i.e. i18next). These can be stored in multiple files or extracted into a single one. If you want to localize your software, game or app you will need to translate your locale files into your desired language.
Variables (Interpolation)
You probably want to insert some data into your translation text. These variables are specifically marked and replaced with data later on. Here is a list of common JSON based i18n libraries with their default interpolations:
| Library | Variable Interpolation |
|---|---|
| Angular ngx-translate, react intl, vue i18n | { variable } |
| i18next, Transloco | {{ variable }} |
| Polyglot.js | %{ variable } |
The translation of such interpolation variables would break the implementation at runtime. Therefore they need to be handled carefully and not to be translated by mistake. For example the sentence: There are {{count}} similar recipes{lang=en} becomes to 似た {{count}} ようなレシピがあります。{lang=ja}.
Additional Formats in JSON Locales
To correctly translate JSON locales you can handle embedded formats as well. Some common ones of i18n libraries are HTML and Markdown inside the translation text. You can highlight certain words/phrases or use some links directly in your translations. You don’t want to break your formatted strings while translating, otherwise your app shows some markup in your text (i.e. some **) or the whole phrase gets bold.
Multilingual Software
Multilingual apps need more attention on formats, i.e. currencies, number formats or date formats. Try to imagine which languages you want to support. Depending on the selection of the language pluralization rules or text floating (right to left) can become more challenging. With the translation of your application as early as possible you will be able to determine implementation problems and solve them.
Translation of JSON Data
JSON is also a common data format outside of software localization. The JSON structure consists of more information that should not be altered, i.e. some ids, a creation date or an author name. With Simpleen you can selectively translate your JSON data.
For example, let's take the following recipe:
{
"title": "World's Best Lasagna",
"instructions": [
"Heat up the oven",
"Cut the onions",
"Cook the ground beef, onions, and garlic over medium heat until well browned"
],
"notes": "<p class=\"info\">One of my most favorite dishes</p>",
"ingredients": [{
"amount": "2 pcs",
"name": "onions"
}, {
"amount": "1 tbsp",
"name": "salt"
}],
"published": "2020-07-19",
"author": "@denisaugsburger"
}
When translating this kind of data, we may only want to translate parts of the provided recipe.
Keep Your Structure
To do this, we want to keep our existing structure as well as not corrupt any data in it. Also, our styles and data structure in HTML need to stay intact.
Keys should not be translated otherwise your code doesn't work anymore. Some values should stay as is, i.e. the amount of the ingredient, because it is handled by a special conversion function. The same applies to the published date which is handled by localization afterwards.
Also, some of the included formats like HTML or Markdown should be translated without losing their formatting.
Simpleen makes it easy to selectively translate some content in your JSON structure. Just define your selections and formats in your Simpleen translator.
Implement the Recipe Example
So let’s see how this works with the example from above and translate our recipe into Japanese.
First: Create a Simpleen Account and configure your Translator. Your selections for the example above could be as follows:
| Path | Format |
|---|---|
| title | Text |
| instructions[*] | Text |
| notes | HTML |
| ingredients[*].name | Text |
Your created translators can be used independently with their ID. They are configured with your expected format, selections, languages as well as a glossary.
Second you can use your translator to translate (some of) your JSON data.
/* Post-Request to use your translator for translations */
axios.post("https://api.simpleen.io/translators/{ID}/translate", {
// You can select which part of the JSON should be translated via selections
text: JSON.stringify(recipe),
},
options: {
params: {
auth_key: '{YOUR_API_AUTHENTICATION_TOKEN}'
}
});
Our result with a configured target language of Japanese looks like this:
{
"title": "世界一おいしいラザニア",
"instructions": [
"オーブンを温める",
"玉ねぎを切る",
"牛ひき肉、玉ねぎ、にんにくを中火でよく焦げ目がつくまで煮る。"
],
"notes": "<p class=\"info\">一番好きな食べ物の一つ</p>",
"ingredients": [
{
"amount": "2 pcs",
"name": "玉ねぎ"
},
{
"amount": "1 tbspn",
"name": "塩"
}
],
"published": "2020-07-19",
"author": "@denisaugsburger"
}
DeepL for Better Translation Results
Currently we support the translation with DeepL, which results in better translation results in comparison to Google Translate. Unfortunately DeepL currently support a dozen languages with some varieties like brazilian portuguese or british english. Google translate supports much more languages but with less accuracy. Therefore we have decided to build Simpleen with DeepL in the background but we will consider more options in the future.
Start JSON Translating
You can start now localizing & translating by creating a Simpleen account. If you have any questions you can reach out to me via Twitter or Mail.
Top comments (0)