How to translate a html page into different language

How can I translate my web pages? Actually what technology or what scripting-if require- should be used? For info; I have all translated text. But I do not want to create something like clone site for other language. I used just javascript -including jquery .

asked Jan 17, 2011 at 20:21

Alaattin KAYRAKAlaattin KAYRAK

1,0342 gold badges12 silver badges29 bronze badges

3

Just using JavaScript...

// JSON-formatted, potentially read from a database
var article = {
    title: {
      en_US: "Article Title",
      fr_FR: "Titre de l\'Article"
    },
    content: {
      en_US: "Content of the Article.",
      fr_FR: "Contenu de l\'Article."
    }
}

// simple function to write the info to the page
function get_i18n[item, lang] {
    document.write[article[item][lang]];
}




   
get_i18n['title','en_US'];
   
get_i18n['content','en_US'];




   
get_i18n['title','fr_FR'];
   
get_i18n['content','fr_FR'];

Please Note: This isn't a very graceful solution. I'm sure there's a prettier method...

answered Jan 17, 2011 at 22:09

You actually mean "how to build multi lingual website" as you already have the "translated text" as you call it.

One way is to put the text inside containers then using client side code change the containers contents to the proper text according to selected language, having arrays with translated text in each language.

If you have server side language at your disposal it would be much better though - do you have such thing?

answered Jan 17, 2011 at 20:48

Using CSS attribute selectors:

    // hides all French blocks by default
    div.story[lang="fr"] {
        display: none;
    }
    // hide all English blocks
    body[lang="fr"] div.story[lang="en"] {
        display: none;
    }
    // show all French blocks
    body[lang="fr"] div.story[lang="fr"] {
        display: block;
    }





    
    

       
Article Title
       
Content of the Article.
    

    
    

       
Titre de l'Article
       
Contenu de l'Article.
    

This setup defaults to showing all English blocks, unless lang="fr" is set on the tag.

Of course, you'll still need some way to modify the lang attribute of the tag...

answered Jan 17, 2011 at 22:41

drudgedrudge

33.9k7 gold badges34 silver badges43 bronze badges

It would take too long for JavaScript to translate your site. I'd say find some software that can translate HTML files and keep both versions on your server. I know this isn't what you want, but it's the only practical way right now.

answered Jan 17, 2011 at 20:42

You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: //github.com/angrymonkeycloud/CloudTranslation.

You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:

And add the configuration within the HTML head as follows:

    {
  "Settings": {
    "DefaultLanguage": "en",
    "TranslatorProvider": "Azure", // not required if you filled in all translations
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}", // not required if above is empty
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "ar",
      "DisplayName": "Arabic",
      "Direction": "rtl"
    }
  ],
 "Translations": [
    {
      "en": "Home",
      "ar": "الصفحة الرئيسية"
    },
  }

and add your own custom select [dropdown] having the class "CloudTranslationSelect" [you can customize the style of your select the way you want].

More information found on //www.angrymonkeycloud.com/translation

answered Aug 8, 2019 at 13:35

I have improved the first answer a bit. Just use a function to set the lanaguage value in localStorage and then get the language from there and dynamically change the HTML with the global variable lgn.

  // JSON-formatted, potentially read from a database
  var article = {
      title: {
        en_US: "Article Title",
        fr_FR: "Titre de l\'Article"
      },
      content: {
        en_US: "Content of the Article.",
        fr_FR: "Contenu de l\'Article."
      }
  }
  
  // simple function to write the info to the page
  function get_i18n[item, lang] {
      document.write[article[item][lang]];
  }
 

  var lng;  //global variable

  if [localStorage.getItem['lng'] == null] {     //if I have no language saved just load the English language
    lng  = 'en_US';
    localStorage.setItem['lng', lng];  
  }

  if[localStorage.getItem["lng"] == 'en_US']{   
   lng  = 'en_US';
  }

  if[localStorage.getItem["lng"] == 'fr_FR']{   
   lng  = 'fr_FR';
  }

  console.log[lng];

  function get_i18n[item, lng] {
    document.write[article[item][lng]];
    }





    
get_i18n['title',lng];
    
get_i18n['content',lng];
 

answered Jul 26, 2021 at 9:50

How do I translate an HTML page?

How do I translate an entire page into another language?

How do I make a multilingual HTML page?