BEFORE:
Code: Select all
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head><title>My title</title>
</head>
<body>
This is the default text of string1.
This is the default text of string2.
</body</html>
Code: Select all
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head><title>My title</title>
<style>.txt{float:left;margin-left:10px}</style>
</head>
<body onload='setLang()'>
<div id="string1" class="txt">This is the default text of string1.</div>
<div id="string2" class="txt">This is the default text of string2.</div>
</body></html>
<script>
function setLang(){
for (var i=0;i<items.length;i++){
term=document.getElementById(items[i].id)
if (term) term.innerHTML=items[i].value
}
}
var lang=navigator.userLanguage || navigator.language;
var script=document.createElement("script");
script.src=document.URL+"-"+lang.substring(0,2)+".js"
var head = document.getElementsByTagName('head')[0]
head.insertBefore(script,head.firstChild)
</script>
Code: Select all
items=[
{"id":"string1","value":"Localized text of string1."},
{"id":"string2", "value":"Localized text of string2."}
];
We will assume that you have an existing english web page that you are wanting to localize and that you already have it opened in your favorite text editor (not a WYSIWYG editor).
The first thing you will need to do is add the script to any appropriate section of the page
(It is designed to work from any section - first tag in head to after the entire body, so just paste it to wherever it fits best for you)
Code: Select all
<script>
function setLang(){
for (var i=0;i<items.length;i++){
term=document.getElementById(items[i].id)
if (term) term.innerHTML=items[i].value
}
}
var lang=navigator.userLanguage || navigator.language;
var script=document.createElement("script");
script.src=document.URL+"-"+lang.substring(0,2)+".js"
var head = document.getElementsByTagName('head')[0]
head.insertBefore(script,head.firstChild)
</script>
Then find the <body> tag and add onload='setLang()' to it:
Code: Select all
<body onload='setLang()'>
We will need to enclose it in a <div> tag with an id for that string. Since it is the first one we will use:
Code: Select all
<div id="string1">This is the default text of string1.</div>
Note 1: for advanced usage, you can use existing tags or add a class="..." to format them according to a predefined <style> tag
Note 2: for most browsers it acceptable to use tags other than <div>, however there is at least 1 Insanely Error-prone browser in wide usage that barfs when you try to change the innerHTML of non-<div> tags
Next we need to create a file for our translation template. It will eventually look like:
Code: Select all
items=[
{"id":"string1","value":"Localized text of string1."},
{"id":"string2", "value":"Localized text of string2."}
];
Note: if you want to use a different naming scheme, this is the line of the script that determined the file name:
script.src=document.URL+"-"+lang.substring(0,2)+".js"
We can start with this template:
Code: Select all
items=[
{"id":"","value":""},
{"id":"","value":""}
];
Hopefully you chose to give each id a similar name to make it easier to find them in your text editor (in our case we can search for: ' id="string' ) For each one we will add its id and value to our template. For the id it is a simple cut and paste, but when copying the value (the string itself), we may need to backslash escape some things (internal double quotes at a minimum) For example:
Code: Select all
{"id":"string0","value":"This is \"localized\" text"},
If you are not familiar with html, it may be helpful to know a couple basics:
Code: Select all
each <tag> in your string should have a closing </tag> such as:
<br> new line *commonly used without a closing tag
<hr> horizontal line
<h> header
<pre>preformatted text
<code> similar to pre but for code
<div> generic tag that can be used for anything
<a ...> used for links
Note: for advanced users it is possible "localize" things other than strings, for instance <img>, <title> <a> tags or any type of html for that matter. In fact this method can be adapted for other types of dynamic changes based on parameters besides language (browser, name, time of day...) setLang could just as easily be called updateItems
Once you have all of the strings copied over to your template, just make a copy of it for each language and translate the strings, use a service or give them to a translator (Amazon's mechanical turk is a cost effective way if it is for a commercial project or if your open source project has more cash than volunteers, maybe you are localizing so you _can_ get volunteers from those speaking other languages)