UNA CERVEZA, POR FAVOR

How to work with Multilingual Sites

Why a multilingual website builder

Working with multiple languages is hard. Simple sites that are just a few HTML pages have to be broken down into multiple localized versions. Copy and code have to be separated so all text have to be extracted from the HTML pages in order to be translated. There are multiple solutions available, like plugins if you are using WordPress and online translation management software platforms, but most of them not fully integrated and difficult to use.

Kit55 is a multilingual website builder designed that way from the ground up. Making an international version of a site using Kit55 is as easy as it can be.

How to translate your website into another language

So, how to translate your website into another language? With Kit55 creating multilingual sites is easy. You can make your site multilingual in 3 easy steps (or in just 1 step if you use Kit55 Text Extraction Tool!):

1) Add a context.json to your project

Create a new file under Documents/Kit55/projects/<your_project>/src, name it context.json. This file will store all text of your site in the default language (in our case English):

{
    ARTICLE_TITLE: "My first post",
    ARTICLE_BODY: "The sky above the port was the color of television, tuned to a dead channel."
}

2) Replace all text in your HTML with references to context.json

You can now add references to these text pieces in your html, like so:

...
<h1>{{ARTICLE_TITLE}}</h1>
<p>{{ARTICLE_BODY}}</p>
...

Kit55 will render your page and replace those references with the text in context.json.

3) Add a context.es.json to your project

Make a copy of your file context.json and name this new file context.es.json. This file will contain all your translations to Spanish.

{
    ARTICLE_TITLE: "Mi primer post",
    ARTICLE_BODY: "El cielo sobre el puerto tenía el color de una pantalla de televisor sintonizado en un canal muerto."
}

And that's it!, Kit55 will create a second site under es/ with all your pages translated!

If you need to include a third language, just add another context file (i.e., context.jp.json for Japanese, and Kit55 will create additional pages in Japanese under jp/ ).

Text extraction tool included

With Kit55 you don't even have to do 1) and 2). Kit55 comes with a text extraction tool that will extract all text from your site and create a context.json file for you automatically, replacing all text in your pages with references to the json file.

Click on the arrow icon next to the project selector

So basically, when you are ready to make your site multilingual, just click on the Text Extraction Tool icon, then make a copy of the context.json file generated and rename it to context.<lang code>.json (1), and then translate all the entries there.

Switching between languages

Once you have more than one context.json file in your project, Kit55 will understand that this is a multilingual site now, and will enable the language menu:

The language menu will be enabled

So, besides the extraction tool, you will have now a few more extra options available:

  • Auto-build <lang> language: Kit55 will add as many auto-build <lang> options as languages you have in your site. When you select a single language and make a change (i.e., when you change a HTML file or a translation in a json file), Kit55 will automatically build that language only and all links in the Kit55 console will be referenced to the language selected. I.e., a file index.html located at the root (/) directory will be translated and a file es/index.html will be created under es/.
  • Auto-build DEFAULT language: Kit55 will build your default language pages only. The default language pages are always in root (/).
  • Manual build all languages: If you select this option, a small button with a refresh icon (↺) will be enabled and your site won't be refreshed automatically anymore. To build all pages and all languages, just click on the refresh icon (↺). This option is useful when, for example, you are finished making changes in your html (that you visualize in your default language as you work), and you are ready to build all pages in all other languages before deploying your site.
  • (1) "lang code" is typically an iso lang code (i.e., 'es' for Spanish and 'de' for German), or a combination of an iso country code and an iso language code (i.e., AR is country code for Argentina and DE for Germany, the combination Ar-es would mean Spanish spoken in Argentina). Kit55 will accept any character string as long as it can be used to form proper URLs. So, if you want to translate your English site to Spanish from Argentina, just add your translations to a file named context.Ar-es.json. Your translated pages will be generated under Ar-es/.

Kit55 as a translation management software

Kit55 translations are based on files stored in your filesystem, so using Kit55 as a translation management software is as easy as editing and sharing files among your team of editors and translators.

In order to set up a simple workflow and tools required to allow your team to work together in translations you might have to consider:

  1. A way to share and collaborate translation files. Can be as easy as a shared Google Drive or Dropbox folder or a more complex solution like a Git project.
  2. A text editor to work with JSON files. JSON files are just text, so a simple text editor would work, but there are also JSON editors that would make easier working with JSON files.