You are in: Home Blog


Welcome to 4Visions! We'll share information on our company, 4Visions Manager and the wonderful technology that makes it possible. And also interesting posts for translators.


How to translate websites, technically

Asier Marques // 24/04/2012 // Translation Tools

Without any doubt one of the most obvious aspects of the internationalisation of a website is translation into the user´s language.

Nowadays website interfaces are very often displayed in different languages, depending on the language of the browser or the session data configured in the web application they are using.

For some years an increasing number of options have emerged to facilitate this task, so that translators can do their work well without having to worry about navigating around the whole website in question or viewing the html code. In 2012, that shouldn´t be necessary under any circumstances.

Many companies even end up designing systems which allow the translation to be done directly in the website interface or in a web control panel specifically designed for this purpose.

However, mostly commonly the strings are in translation files which adhere to a specific format. This format can be read by text editors specifically designed to enable translators to work on these files quickly and easily.

In the past, depending on the design, content included images that had to be edited by a graphic editor in order to be modified. Today, thanks to the developments in CSS style sheets and javascript, it is practically possible to have all a website´s strings in text format regardless of the design. A design rarely requires multiple images for each of the application´s languages.

Another part of the web that might seem difficult to translate are Javascript scripts. Years ago these were rarely used for any function other than validating forms or avoiding right- clicking on the website.

However, today Javascript is increasingly important and is used for more complex purposes than in the past. In fact, the trend is for web applications, at least in their interface, being entirely developed in Javascript language.

Javascript, like the other most commonly used programming languages today, has many options which are compatible with the formats discussed previously, which are described below.

Possible Formats


GetText is the longest-standing and most widely-used option for translating websites through string files outside the application code.

Technically speaking, all that is needed in the application is to write the strings in the language in which the website is programmed, for example in php it would be:

<h2><?php echo __("Title to be translated", "domain") ?></h2>

There are utilities which then allow us to extract all the strings of the application in a .pot file.

Subsequently, with a translation editor such as poEdit we can easily generate a .po file to the desired language or locale.
GetText is so extensively used that it is available in practically all the existing programming languages, including JavaScript, php, or c#. It is very unusual to find a language that does not have a library or support for GetText.


XLIFF has a very similar concept to GetText, but technically it is based on XML files rather than text files.

In terms of programming, ideally programmers would follow the GetText convention seen above and through configuration, the type of format to be used, GetText, XLIFF or any another, could be modified.

However, the only thing translators should worry about is the XML format generated through XLIFF, an example would be as follows:

<trans-unit approved="no" xml:space="contexto">
 <source xml:lang="es">
   Text in Spanish
 <target xml:lang="en"/>
   Text in English

Similarly to gettext, there are editors that allow us to work on the XML files we’ve generated.


While the YAML format is designed to present configuration files rather than to translate strings, it can be used for the latter purpose.

The following is an example of a YAML file:

#en archivo cadenas-en.yml
   original:   " Text in Spanish"
   translated: "Text in English"
   original:   " Text in Spanish 2"
   translated: "Text in English 2"

In this case the names and file structure are free and will depend on each application and how it was decided to present the strings.

Hardcoded (Arrays)

Another common option is to have the strings in a code file which contains strings assigned to an array or matrix within the chosen programming language.

An example of this in php would be:

// in the file strings-en.php
$variable["key_of_the_chain"]  = "Text in English";
$variable["key_of_the_chain 2"] = "Text in English2";

I hope that this post has helped you to understand and become familiar with the most popular options that are currently being used to translate websites and applications of all kinds.

Translated by Catherine Stephenson

Sign up now!

And you will be one of the first to try out v1.0.

Recent posts from our blog

  • Let’s not discuss rates any more

    08/05/2012 // Learn more

  • Interview with Pablo Muñoz, the translator who does more than translate

    03/05/2012 // Learn more

  • Developers

    How to translate websites, technically

    24/04/2012 // Learn more

  • la foto (2)

    Quotations: whose job are they?

    17/04/2012 // Learn more