Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Sven Lenaerts
Sven Lenaerts
4,644 Points

How to build a website with multiple languages most efficiently?

Hey guys, quick question - How would you build a website which supports multiple languages efficiently?

I won't be forcing users to make a selection as they arrive on the homepage. There will be a drop down menu in the navigation to change the language. The default language is English.

Cheers!

3 Answers

I just recently had to make a decision exactly like this. We decided to use the Google Translate website tools. You can add a simple widget to your website where the user can select a language and Google translates the page. Check it out, it's definitely the easiest way to handle this in my opinion.

Sven Lenaerts
Sven Lenaerts
4,644 Points

Hey Devan, thanks for your input. The problem though is the client I'm working with is providing services with business jargon. He'll provide translations to reflect that service-specific jargon. Google Translate wouldn't be the solution I'm afraid. :(

Oziel Perez
Oziel Perez
61,321 Points

Google just released a message saying they will no longer be providing this service unless you have a "high impact website." With that in mind, I would recommend you try another method. I'm currently thinking of doing it using a MySQL database but I'm looking for other methods of translation as well. I was wondering if AJAX could also be implemented, but I don't know. In the end I probably want the most SEO friendly solution.

Kirill Kovalchuk
Kirill Kovalchuk
2,533 Points

Hi. It's usually done using internationalization (i18n) and localization (l10n). i18n is usually about translation, e.g. Hi -> Hola -> Bonjour etc. l10n is about using standards of a particular country or area, e.g. in US standard date format is mm/dd/yyyy, but is Russia it's dd.mm.yyyy.

i18n is usually done by translating all your website tokens to all the languages you want to support. By token I mean a single piece of data. Let's say you want to translate user's salutation which is "Hi" in English. What you do is you translate Hi to all the languages and put it in a separate file. Let's do this in a simple format and we will use JavaScript for simplicity:

ru_RU.json { "hi": "??????" }

on your website you output the salutation using a special method. Lets call it t and it could be written like this in JS:

function t(token) {
    var current_locale = getCurrentLocale(), // somehow we understand current user's language is Russian (ru_RU)
          translations = loadTranslations(current_locale); // loaded ru_RU.json either from FS or memory cache

    // if translation exists, return translated token, return token itself otherwise
    return translations.indexOf(token) != -1 ? translations[token] : token;
}

now we can use t('hi') and get back '??????' if current user's locale is ru_RU. See the "Start Discussion" button at the right sidebar? We can translate it too:

{"Start Discussion" => "?????? ?????????"}

But what about text you are reading right now? It's not a token. You cant just add all of this text to a dictionary. It's user-generated content. An article you write on your own website would not be a user-generated content, but content. Content that you write can be translated by yourself or you could hire somebody to do that for you, but user-generated content... forget about it.

Now the question is: how do we know current user's locale? How do you know I speak Russian? Well, first - from HTTP request. Browser sends Accept-Language header. It looks like this:

Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4

This is an actual header my browser sends each request. Even if I grab my laptop and go to, let's say, Australia my browser will send this header with ru-RU preferable locale anyway.

Second way how you can know what language your user speaks is checking his IP range. You could use IPs database like maxmind (I find it's pretty accurate).

Third, ask user what language he speaks. I'm from Russia, but I don't like how certain sites (especially when they use google translate) are translated to Russian. It really irritates me that I can not chose english version of ebay (I'm actually hacking Accept-Language so my browser sends that I prefer en-US to ebay).

Once user selected his preferable language, you can use cookies to store user's selection.

As Devan said you can use google translate and yes, it is the simplest way to translate an entire website, but the translation quality is awful - personally I can not read google-translated text.

Kirill Kovalchuk
Kirill Kovalchuk
2,533 Points

ouch, treehouse turned all the cyrillic letter to question marks :( anyway, I think you've got an idea.

Sven Lenaerts
Sven Lenaerts
4,644 Points

Hey Kirill, I really appreciate your time for writing all of this down and I've definitely learned a couple of things, though the solution here is a bit too broad. The website will have three languages and basically I simply want to change some pieces of paragraphs (let's say a couple of <p>'s with different ID's) from one language to another the moment the user selects a different language in the navigation. I think the solution could potentially be more simple.

I don't need a general translator, I simply want a couple of paragraphs be changed dynamically when the user changes the language in the navigation. Preferably without having to reload the page. (Or is the method you've listed above the most efficient?)

Thanks for your effort anyhow! :)

Kirill Kovalchuk
Kirill Kovalchuk
2,533 Points

I just described how i18n usually works. In special cases, like yours, you can apply special techniques. It matters if you want this translated article to be indexed by search-engines like Google when implementing such "on-the-fly" translation.

  1. You could have your articles for a specific page be translated to Russian and stored in database.
  2. Or you could store all of the translations in hidden blocks right on the page.
  3. Or you could have translated articles to be stored in html or plaint-text files and be accessible on the web 3.1. or not accessible on the web and to fetch them you would have to make a request to the application server.

All of this techniques are applicable.

  1. If you need to maintain a relatively large number of articles and supported languages for them
  2. If you have just a couple of short articles and you dont mind that an end-user fetches some extra 100-kylobytes each page request
  3. Same as 1. but you don't mind maintaining all the articles using files. With the DBMS you can have an admin interface to add articles, edit, delete, etc., in case if you are using files you upload them to the server manually 3.1 no much difference comparing to 3, just a matter of choice. If you fetch an article using application server you can do some application-level processing like changing all the links in an article or adding styles, etc.

Now, if you want this translated articles to be indexed by Google, you need change page's URL. If not, you can just fetch an article using AJAX. Of course, in case if translations are already rendered to the page, you don't need to fetch them. For example you go with 2nd solution and you don't mind if Google wont index translated content. Your page could contain following code:

<select name='lang' class='language-select'>
    <option value='en'>English</option>
    <option value='fr'>French</option>
    <option value='sp'>Spanish</option>
</select>

<!-- this wont be shown to the user + google will ignore it because it's a script  -->
<div class='article' data-current-language='en'>
   <strong>hello</strong>, lorem ipsum dolor
</div>
<script type='text/html-template' lang='fr'>
    <strong>bonjour</strong>, lorem ipsum dolor
</script>
<script type='text/html-template' lang='sp'>
    <strong>hola</strong>, lorem ipsum dolor
</script>

<script type='text/javascript'>
$(document).ready(function() {
    $('select.language-select').on('change', function(evt) {
        var selectedLanguage = $(this).find('option:selected').val(),
            articleHtml = $('script[type="text/html-template"][lang=' + selectedLanguage + ']').html(),
            article = $('div.article');
        article.html(articleHtml);
    });
});
</script>```

[in action](http://jsfiddle.net/WSaMM/)
Kirill Kovalchuk
Kirill Kovalchuk
2,533 Points

Damn :( Editing a posting still not fixed.

in action

Sven Lenaerts
Sven Lenaerts
4,644 Points

Wow! Awesome, thank you so much Kirill. :)

Sven, this is a long shot, but it sounds like you have limited information you want to change and don't want to refresh the page. How about just using some jquery to rewrite the html of some of those paragraphs? You could create a simple select menu of some sort where the user selects their language of choice and when they select one language you navigate the dom and use the .html() method to override and inject the translated paragraphs.

Just an idea I had after reading your response.

Sven Lenaerts
Sven Lenaerts
4,644 Points

Yeah, this is what I initially had in mind. I'm wondering though if this is the most efficient way to tackle this problem or if there are other methods I'm not aware of which are smooth and don't penalise website performance.

Thanks for your reply Devan!