CODEWITHSUNDEEP
javascriptjqueryhtmlinternationalization
kamaci
kamaci

Reputation: 75137

Internationalizaton of HTML Files

I am developing a project and uses HTML files (not JSP or any other technology at client side). I use JQuery for scripting. I have tables, columns, and many fields that have "text" on them. How can I internationalize my web page with JQuery? I mean I will load a file _tr.extension and my web page will be Turkish, _swe.extension will be Swedish etc.

Any ideas?

EDIT1: For example I will write a code like that:

<div>${name}</div>
<div>${surname}</div>

and there will be a _tr.properties file like that:

name = isim
surname = soyisim

and there will be a _swe.properties file like that:

name = namn
surname = efternamn

And if I change the imported file that texts inside that divs will be at different language per pages.

EDIT2: That functionality is enough for me I don't want more I need a speedy and lightweight plug-in (Maybe feeding from JSON can be an additional specialty).

Upvotes: 3

Views: 3870

Answers (8)

Miriam
Miriam

Reputation: 969

Here are a few suggestions. (i18n == internationalization)

http://plugins.jquery.com/i18n/
http://code.google.com/p/jquery-utils/wiki/I18N
http://code.google.com/p/jquery-i18n-properties/

EDIT: for your needs I recommend https://github.com/jquery-i18n-properties/jquery-i18n-properties

Upvotes: 2

Rinkesh
Rinkesh

Reputation: 3316

Index.html

 <!DOCTYPE html>
  <html>
  <head>
  <title>javascript - Internationalizaton of HTML Files</title>
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="globalize.cultures.js"></script>
<p id="name">name</p>
<p id="surname">surname</p>

  <script>
function myFunction()
 {
 surname=document.getElementById("surname");  //Find the element
 surname.innerHTML=Globalize.localize( "surname", "fr" );    //Change the content
 n=document.getElementById("name");
 n.innerHTML=Globalize.localize("name","fr");
}
 window.onload=function(){
 var language=window.navigator.language; //default language en-US
 surname=document.getElementById("surname");  //Find the element
 surname.innerHTML=Globalize.localize( "surname", language );    //Change the content
 n=document.getElementById("name");
 n.innerHTML=Globalize.localize("name",language);

 };
</script>
 <button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

globalize.cultures.js file

  Globalize.addCultureInfo( "en-US", {
    messages: {
     "name" : "English Name",
     "surname" : "English Surname"
    }
   });
   // French language code is actually fr

       Globalize.addCultureInfo( "fr", {
       messages: {
     "name" : "French name",
    "surname" : "French Surname"
      }
    });

Upvotes: 0

c_y
c_y

Reputation: 550

I second Pawel Dyda's answer to use Jquery Globalize Plugin. We are using similar solution in our project.

Steps below.

  1. Download Jquery Globalize Plugin

    https://github.com/jquery/globalize

  2. Include globalize.js and the JS files for the cultures you need in your HTML file

    e.g., globalize.culture.tr.js

  3. Add HTML code with IDs

    <div id="name"></div>
<div id="surname></div>

  4. Add name and surname to the messages section of the respective language JS files

    Turkish JS File

     messages : 
{
"name": "isim",
"surname": "soyisim"    
}

    Swedish JS file

     messages :
     {
    "name": "namn"
"surname": "efternamn"
}

  5. Set the culture based on selection

     Globalize.Culture("tr");

  6. Update the strings for the culture using .text function or .html function 

       $("#name").text(Globalize.localize("name",globalize.culture()));
   $("#surname").text(Globalize.localize("surame",globalize.culture()));

In our project, we are also using JSON string to populate dropdowns based on culture

  1. Save the dropdown name and value pairs as a JSON string in the messages section
  2. Convert the JSON string to JSON object
  3. Loop the JSON object and set the Option Name and Value for the dropdown list

Upvotes: 1

kamaci
kamaci

Reputation: 75137

Localizer plug-in - plugins.jquery.com/project/localizer is simple and works well.

Upvotes: 0

Paweł Dyda
Paweł Dyda

Reputation: 18662

I can strongly recommend Globalize as an translating and formatting solution.

To translate you would use the code similar to that:

<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="cultures/globalize.cultures.js"></script>
<script type="text/javascript">
  Globalize.addCultureInfo( "tr", {
    messages: {
      "name" : "isim",
      "surname" : "soyisim"
    }
  });
  // Swedish language code is actually sv
  Globalize.addCultureInfo( "sv", {
    messages: {
      "name" : "namn",
      "surname" : "efternamn"
    }
  });

  $(document).ready(function() {
    // you need somehow know what language to use
    // but it is out of scope of this answer
    $( "name" ).val( Globalize.localize( "name", "tr" ) );
    $( "surname" ).val( Globalize.localize( "surname", "tr" ) );
  });
</script>

To use this script you would need to modify your html as follows:

<!-- DIV is just a container, P (paragraph) or SPAN 
     are more suitable for the job. Also this shows
     neutral language texts.
     Be sure to use unique IDs -->
<div><p id="name">name</p></div>
<div><p id="surname">surname</p></div>

Upvotes: 3

Michael Mior
Michael Mior

Reputation: 28752

You may want to look at the gettext jQuery plugin. gettext is a standard with language files that have awesome editing tools, which will make the experience a lot easier in the case you have to do deal with a translation service (or even internal people who are not highly technical).

For the URL issue, your web server likely has some capability to help by rewriting the URLs. For example .htaccess in Apache. (You may wish to post that as a separate question.)

Upvotes: 0

Frobitz
Frobitz

Reputation: 17

I'd not use JQuery to internationalise the content of your web pages, it's not a good choice of technologies as JavaScript can't be relied on to be active in the browser or client reading your pages.

You'd be better off using a server side language to feed content into HTML templates, or if this isn't possible, creating duplicate pages for each language and marking them up appropriately.

Upvotes: 0

Skylar Anderson
Skylar Anderson

Reputation: 5703

You can use the jQuery templating API to replace all of your written words with variables which can be defined dynamically.

See more here: http://api.jquery.com/tmpl/

Upvotes: 0

Related Questions