Add functionality to display text in different languages

[sdnorris]

Email from Holly @Together Productions today: "It would be great if we could translate into Arabic, French and possibly a third language - if you could look into the functionality we can look into getting the translations done."

Maybe something like this:

//Keep all of the content text in external JSON files:
//english_content.json:-------
english_content = {
  page1_title: "hello page1",
  page2_title: "hello pag2"
};
//----------------------------

let text_content = {};
//Some kind of event listener that executes when a user selects an item from a Language menu, the language gets passed to a function like this:
function setLang(language){
  switch(language){
    case 'english':
    text_content = english_content.json;
    somethingToRebuildHTML();
    break;

    case 'french':
    text_content = french_content.json;
    somethingToRebuildHTML();
    break;

  }
}

<h1>text_content.page1_title</h1>

[joelle-o-world]

A shortcut for this is making sure we've complied with all web standards for tagging the language of the content. This will help Google Translate or similar do the work for us.

[joelle-o-world]

I'm nervous about putting all the content in a json because that could end up confusing google translate.

Something like this might be better:

<div class='page'>
  <p class="french">Bonjour monsoir</p>
  <p class="english">Hello sir</p>
</div>

And then use css to hide and show elements.

[joelle-o-world]

Ou..

Instead of using class attribute use the lang attribute and use a css lang selector.

<style>
p[lang="eng-uk"] {
display: none;
}
p[lang="fr"] {
display: block;
}
</style>

<div class='page'>
  <p class="fr">Bonjour monsoir</p>
  <p class="eng-uk">Hello sir</p>
</div>

[sdnorris]

Holly said they would handle all of the translations, so we would have all of the content in all of the languages necessary

[sdnorris]

I'm nervous about putting all the content in a json because that could end up confusing google translate.

Something like this might be better:

<div class='page'>
  <p class="french">Bonjour monsoir</p>
  <p class="english">Hello sir</p>
</div>

And then use css to hide and show elements.

This is cool, but it does mean that we'd have to manually enter all of the content for the website for every language we want it displayed in

[joelle-o-world]

True, but it will afford us greater flexibility in how we format the pages. At some point, the text needs to be entered manually whether it's in JSON or HTML.

A solution combining both approaches would be to use JSON but keep it server side. That way the search engine/screen-reader/google translate won't be confused, we don't have to write out endless html, and we don't pointlessly get every user to download the content 5 times over for different languages.