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 .

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...

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?

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...

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.

For JavaScript implementation of GNU gettext API these links can be also useful:
http://tnga.github.io/extra.js-ijs
http://tnga.github.io/extra.js-ijs/docs/iJS.Gettext.html

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

来源：https://stackoverflow.com/questions/4717475/how-to-translate-into-other-languages-my-web-page

标签

javascript

html

webpage

translate