javascript - Internationalizaton of HTML Files - Stack Overflow

admin管理员组

文章数量:1356905

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

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

• javascript
• jquery
• html
• internationalization

Share Improve this question Follow edited Aug 24, 2011 at 13:39 kamaci asked Aug 24, 2011 at 12:42 kamacikamaci 75.4k7272 gold badges245245 silver badges372372 bronze badges 2

• Localizer plug-in - plugins.jquery./project/localizer looks like good, I will check it. – kamaci Commented Aug 24, 2011 at 13:42
• if you ever need more (like proper plural support, variables,..) you might take a look at i18next. – jamuhl Commented Sep 21, 2012 at 14:41

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3

I can strongly remend 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>

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

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

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

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

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

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.

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

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

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

本文标签： javascriptInternationalizaton of HTML FilesStack Overflow