This is a tutorial on how to localize html documents with javascript. Before I go into details, here is an example html document before and after localization. Advanced techniques and notes will be in italics.

BEFORE:

Code:

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

One file for each supported language in the format index.html-<2-letter language code>.js

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)

(the internal code could just as easily be pasted into an existing <script> tag)

Then find the <body> tag and add onload='setLang()' to it:

Code:

<body onload='setLang()'>

Next we need to find the text (or any html code) that we want to localize. We pick out the line: This is the default text of string1.
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:

<div id="string1">This is the default text of string1.</div>

Repeat this step for each string that you wish to localize.
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:

So we will create a file called <name of html file>-en.js
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:

items=[
{"id":"","value":""},
{"id":"","value":""}
];

Now all we need to do is fill it in.

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:

{"id":"string0","value":"This is \"localized\" text"},

Notice the outside quotes for the string are _NOT_ back-slashed though.
If you are not familiar with html, it may be helpful to know a couple basics:

Code:

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

(if you come across some tag you aren't sure of you can google html w3c and the tag)

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)_________________Web Programming - Pet Packaging 100 & 101

... for rtl languagues we will need to do some css manipulations as well (todo)

...done

Though I cannot read write or understand arabic I have simulated right-to-left in german.

It is html5, validated, file size 5194B, original /usr/share/doc/home-en.htm was 6381B

upload coming soon.... [edited: and done]

The template:

home-raw-en.js wrote:

items=[

{"id":"s0","value":"DISTRO_NAME Linux"},

{"id":"s1","value":"DISTRO_NAME jumping-off page"},

{"id":"s2","value":"DISTRO_NAME is a member of a large family of Puppy-Linux-based distros or "puppies". Click on any of these Internet links to find out more, interact with our vibrant community, and just plain have fun!"},

{"id":"s3","value":"Howto get<br />onto the<br />Internet"},

{"id":"s4","value":"<a href=\"http://www.zen45800.zen.co.uk/puppy3/index.htm\">Puppy is an evolutionary operating system, based on GNU Linux. Need a simple intro? Do not click here for Lobster's Puppy slideshow, there is none"},

{"id":"s5","value":"Want detailed multi-language User Manuals, that show all aspects of setting up and using Puppy?"},
{"id":"s6","value":"Read the latest Puppy News on the community-supported Wiki News page. Find out how keen our community is!"},

{"id":"s8","value":"Visit our Discussion Forums and be part of the vibrant Puppy community. Find answers, post questions, chat about all sorts of things"},

{"id":"s9","value":"Barry's leading-edge Developer Site has just about everything to do with setup, configuration, compiling and all the nuts-and-bolts. This is also a great getting-started site, as has many introductory web pages. Quick links: <a href=\"http://puppylinux.com/\">Puppy</a>, <a href=\"http://bkhome.org/quirky/\">Quirky</a>, <a href=\"http://bkhome.org/bacon/\">BaCon</a>, <a href=\"http://bkhome.org/woof/\">Woof</a>, <a href=\"http://bkhome.org/bones/\">Bones</a>"},

{"id":"s14","value":"An online jumping-off place for everything Puppy-related. This site is maintained by Puppy enthusiasts ...be warned, it's catching!"},
{"id":"s15","value":"Download Puppy. Or, if on dialup consider buying a CD."},
{"id":"s16","value":"So many exciting Internet links, but don't forget that right here in DISTRO_NAME there's lots of documentation. This is also available via the 'Help' entry in the menu."}

];

Note1,
do not be afraid of some long and very long lines
These are easy to handle in geany (-->Document...wrap)

Note2,
in a browser with quick-locale-switcher you can fast and easily switch between different installed languages. (tested in firefox)

<div id="descr">
<p id="s2" class="teaser">Precise Puppy is a member of a large family of Puppy-Linux-based distros or "puppies". Click on any of these Internet links to find out more, interact with our vibrant community, and just plain have fun!</p>
<p id="howto"><a href="HOWTO_Internet.htm">
<img alt="Help" src="/usr/local/lib/X11/pixmaps/help48.png" ></a>
<span id="s3">Howto get<br />onto the<br />Internet</span>
</p>
</div>

<dl>
<dt><a href="http://www.tmxxine.com/web/puppy3/"><img alt="Lobster" src="/usr/local/lib/X11/pixmaps/go48.png"></a></dt>
<dd id="s4"><a href="http://www.zen45800.zen.co.uk/puppy3/index.htm">Puppy is an evolutionary operating system, based on GNU Linux. Need a simple intro? Do not click here for Lobster's Puppy slideshow, there is none</a></dd>

<dt><a href="http://www.puppylinux.org/manual"><img alt="Multimedia" src="/usr/local/lib/X11/pixmaps/multimedia48.png"></a></dt>
<dd id="s5">Want detailed multi-language User Manuals, that show all aspects of setting up and using Puppy?</dd>

<dt><a href="http://bkhome.org/"><img alt="pup" src="/usr/share/doc/puppylogo48.png"></a></dt>
<dd id="s9">Barry's leading-edge Developer Site has just about everything to do with setup, configuration, compiling and all the nuts-and-bolts. This is also a great getting-started site, as has many introductory web pages. Quick links: <a href="http://puppylinux.com/">Puppy</a>, <a href="http://bkhome.org/quirky/">Quirky</a>, <a href="http://bkhome.org/bacon/">BaCon</a>, <a href="http://bkhome.org/woof/">Woof</a>, <a href="http://bkhome.org/bones/">Bones</a>
</dd>

<div class="footer">
<a href="index.html"><img alt="Help" src="/usr/local/lib/X11/pixmaps/help48.png"></a>
<span id="s16">So many exciting Internet links, but don't forget that right here in Precise Puppy there's lots of documentation. This is also available via the 'Help' entry in the menu.</span>
</div>

Excellent, (I think - I don't speak arabic either) except for including the script as an include.
The source code for manipulating the objects is so small, its not worth it to include it as a separate file - especially for our online documentation. (each document request takes longer than loading ~10kb of data (varies) and cannot be minified and compressed with the main document) It makes good sense to keep the localizations in a separate file since users will only use at most 1 and it makes maintenance easier... besides including the code directly guarantees that an update to the api (which I am far from declaring as "stable") doesn't break stuff.

Note: I am actually compiling a small "Unlicensed" (basically public domain) library of javascript that is designed to be "compiled" by uglifyjs, closure, etc... (no passing functions as arguments, minimize nested includes) and for maximum compression by using common naming and ordering for maximum string match lengths. Most existing javascript libraries like jquery fail hard at this task (including 1 function pulls in almost the entire library even when compiled to eliminate unused code - its like glibc vs uclibc). I am still working on my css sprite stuff (its cut page load times by a factor of 10 to 1 on pages with a lot of small images)_________________Web Programming - Pet Packaging 100 & 101

maybe we should have used class instead of id for the strings in case a string occurs multiple times... in the mean time here is my attempt at getElementsById
(for whatever reason that is not a standard function but getElementsByClassName and getElementsByTagName are)

maybe we should have used class instead of id for the strings in case a string occurs multiple times...]

Good idea !
And it is this class only that has to be checked for swap of right/left.

Quote:

... for whatever reason that is not a standard function...

There is one reason:
An id is an id for (exactly one) item
But it can serve as error checker if there are more than 1.

No problem for me to change the markup, I want it to become as simple as possible.
Just 1 rule:
-class="text" for text (direction:rtl handled by javascript)
This does not mean it has to be text, it can be img too

or
-class="float" which means direction of float is automatically changed in javascript

the only problem with class is that it can have multiple values, like:
class="hidden red box text"
Which was the reason I settled on id -- wasn't sure if document.getElementsByClassName("text") would find the above example, but it does_________________Web Programming - Pet Packaging 100 & 101

You cannot post new topics in this forumYou cannot reply to topics in this forumYou cannot edit your posts in this forumYou cannot delete your posts in this forumYou cannot vote in polls in this forumYou cannot attach files in this forumYou can download files in this forum