How to translate into other languages my web page?

javascript html webpage translate

20,046

Solution 1

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

Solution 2

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?

Solution 3

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

20,046

Author by

Alaattin KAYRAK

Updated on July 13, 2022

Comments

Alaattin KAYRAK almost 2 years

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 .