CODEWITHSUNDEEP
javascripthtmltranslate
Alaattin KAYRAK
Alaattin KAYRAK

Reputation: 1124

How to translate into other languages my web page?

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 .

Upvotes: 5

Views: 28753

Answers (6)

Pietro
Pietro

Reputation: 177

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.

<script type="text/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]);
  }
 

  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]);
    }

</script>


<div class="story">
    <h1 class="title"><script>get_i18n('title',lng);</script></h1>
    <p class="content"><script>get_i18n('content',lng);</script></p>
 </div>

Upvotes: 0

Elie Tebchrani
Elie Tebchrani

Reputation: 358

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

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

<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>

And add the configuration within the HTML head as follows:

<script type="application/json" id="CloudTranslationConfig">
    {
  "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": "الصفحة الرئيسية"
    },
  }
</script>

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 https://www.angrymonkeycloud.com/translation

Upvotes: 0

jrn.ak
jrn.ak

Reputation: 36627

Just using JavaScript...

<script type="text/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]);
}
</script>

<!-- English Version -->
<div class="story">
   <h1 class="title"><script>get_i18n('title','en_US');</script></h1>
   <p class="content"><script>get_i18n('content','en_US');</script></p>
</div>

<!-- French Version -->
<div class="story">
   <h1 class="title"><script>get_i18n('title','fr_FR');</script></h1>
   <p class="content"><script>get_i18n('content','fr_FR');</script></p>
</div>

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

Upvotes: 11

jrn.ak
jrn.ak

Reputation: 36627

Using CSS attribute selectors:

<style type="text/css">
    // 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;
    }
</style>

<!-- Change this to the language of the blocks you want to display -->
<body lang="fr">

    <!-- English block, shown by default -->
    <div class="story" lang="en">
       <h1 class="title">Article Title</h1>
       <p class="content">Content of the Article.</p>
    </div>

    <!-- French block, hidden by default -->
    <div class="story" lang="fr">
       <h1 class="title">Titre de l'Article</h1>
       <p class="content">Contenu de l'Article.</p>
    </div>

</body>

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

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

Upvotes: 3

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

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?

Upvotes: 3

Anonymous
Anonymous

Reputation:

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.

Upvotes: 0

Related Questions