1

What is the best way to provide a web application in multiple languages? The focus of my question is not what to think about, but indeed how to do it.

The text in the web application:

  • text in the popup of spatial features
  • text in the sidebar containing the feature's description
  • text elements of the website components: menu (navbar)

As the web application should be available in both English and French, I am thinking of how to best implement the multiple language support.

The text is available in two separate files (English, French) and I thought of based on the user's choice to call either the one or the other file and query the text. But how to deal with the website components, such as the menu items? This is plain text in the html, how could this be solved?

The web application is built using Bootstrap and Leaflet (JavaScript).

Let me know if it is easier to make two web applications, one for each language, but my thoughts were that this is a huge overload of code.

1

Make use of the GetText internationalisation, often shortened to I18n to save typing 20 letters, features in your application - quite a good write up here.

Basically you mark the text components, and supply the text in your own language, as candidates for translation according to the locale and supply bundles of the translated text for the various messages using POEdit and some cleverness to load the appropriate ones using the locale as a selector. GetText is implemented in various languages including Node.js which is most probably the one that you need.

The advantages of this approach are:

  • Your different language versions never get out of step if a translation isn't available for a specific message it falls back to the original text.
  • You are not duplicating huge amounts of code.
  • You can supply the PO files only to translators not your code.
  • You can add a new language by simply adding a translations bundle rather than yet another copy of the code.
  • There are even online services that you can supply the extracted messages to for free or paid assistance in generating translations.

Update

There is even a leaflet plugin that does the majority of the hard work for you. Basically you mark the text that you need translated, i.e. Menu items, etc., with L._('Word or Phrase that needs translating') note that these can include substitution values and provide the translation(s) in Local files for each supported locale named for that locale, give the end user a mechanism for specifying their locale, e.g. fr

There is even a script for generating or updating the locale files with the strings that need translating.

Examples from the github page:

In your site code:

L._("The phrase I want to be translatable");
L._("A complex sentence with a {variable}", {variable: "my value"});

in locale/fr.js file:

var mylocale = {
    "Simple phrase to translate": "Une simple phrase à traduire",
    "A sentence with a {variable}": "Une phrase avec une {variable}",
};

Register the locale:

L.registerLocale('fr', mylocale);
  • This seems very complicated to me, as I am not that much into hard programming, rather putting together components using Leaflet (JavaScript). Is there another conceptual approach of how most easily translate the text-based website components (menu, navbar, plain text for describing something)? – the_chimp May 17 '17 at 12:10
  • 1
    @the_chimp: Have two versions of the website: one in English, at myDomainName.com/en/site and the other in French at myDomainName.com/fr/site. Have a little toggle button in a common template that switches the user to the English or French version of the site/current-page. It's ugly, but it will (probably - I haven't done this myself, but I've seen it and heard of it) work. – FrustratedWithFormsDesigner May 17 '17 at 16:19
  • @Steve Barnes: Thanks for the update, with the plugin it would maybe work for me. But I am not quite sure, cause it is stated that it is an internationalization module for Leaflet plugins - but it cannot only be used for plugins right? And in the var mylocale I would add all the text in both languages? And is there also a need for a button that the user decides the language, or does the language appear automatically based on the browser settings? – the_chimp May 17 '17 at 18:31
  • @FrustratedWithFormsDesigner: This sounds like a quite comfortable or rather the more easy solution. Two questions. First, the URL is something like name.com/index.html - would it then be name.com/en/index.html or how could that be done? Second, would I kind of duplicate the whole web application and put in the text in the other language? This would then result in quite a lot of redundant code, not that easily maintainable... – the_chimp May 17 '17 at 18:37
  • @the_chimp: Well, the one time I sort-of worked closely with a system like that, it was mostly static HTML that was generated by some site-generator that ran in the backend, so duplicate code wasn't an issue because the whole thing was generated by a tool. This might not be applicable to your situation. I've heard that this is not uncommon, but for more details, you'll probably have to do your own in-depth research. – FrustratedWithFormsDesigner May 17 '17 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.