|
| 1 | +Hello World |
| 2 | +================== |
| 3 | + |
| 4 | +A simple example app for Hello World from the easiest way to localization (l10n). |
| 5 | + |
| 6 | +##Instructions |
| 7 | + |
| 8 | +In order to see this web app working, do the following: |
| 9 | + |
| 10 | +``` |
| 11 | +$ npm install |
| 12 | +$ node app-normal |
| 13 | +$ node app-express |
| 14 | +$ node app-static |
| 15 | +$ node app-render |
| 16 | +$ node app-localized |
| 17 | +``` |
| 18 | + |
| 19 | +Now you can see server-side localization in node.js by going to: |
| 20 | + |
| 21 | +* [http://localhost:3000/](http://localhost:3000/) |
| 22 | +* [http://localhost:3001/](http://localhost:3001/) |
| 23 | +* [http://localhost:3002/](http://localhost:3002/) |
| 24 | +* [http://localhost:3003/](http://localhost:3003/) |
| 25 | +* [http://localhost:3004/](http://localhost:3004/) |
| 26 | + |
| 27 | +For the last app (app-localized) when you run it you can try change the URL to see the localization in action by doing |
| 28 | + |
| 29 | +* [http://localhost:3004/th_TH](http://localhost:3004/th_TH) |
| 30 | + |
| 31 | +If you have added more languages to the `locale` folder you can simply change the URL base on the file name *see locale section for more info* |
| 32 | + |
| 33 | +##Locale |
| 34 | + |
| 35 | +At this moment we are using i18n-abide to do the localization (l10n) and this plugin will load the string from directory called |
| 36 | +`locale` and in this language bundle we will have to named the language based on the Using Language Identifiers (RFC 3066) standard |
| 37 | + |
| 38 | +For example English `en_US` or Thai we will use `th_TH` for that |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | + |
| 43 | +###Format of the locale file |
| 44 | + |
| 45 | +Currently the i18n-abide that is modified by :humphd made it works with Property Lists (plist) which is easy to maintain |
| 46 | +and it is also supported by Transifex [file formats](http://help.transifex.com/features/formats.html), among them .po, .ini, .xml, etc. |
| 47 | + |
| 48 | + |
| 49 | +Node.js and Transifex both support .plist files, which are what was created for OS X and iPhone apps. These are |
| 50 | +simple XML files, and for the purposes of localizaiton, contain key/value pairs in a dictionary. Below is an example: |
| 51 | + |
| 52 | +```xml |
| 53 | +<?xml version="1.0" encoding="UTF-8"?> |
| 54 | +<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> |
| 55 | +<plist version="1.0"> |
| 56 | + <dict> |
| 57 | + <key>helloworld</key> |
| 58 | + <string>Hello World</string> |
| 59 | + </dict> |
| 60 | +</plist> |
| 61 | +``` |
| 62 | + |
| 63 | +##Usage for localization |
| 64 | +(quoted from :humphd from amore.webmaker.org's repo |
| 65 | + |
| 66 | +Strings in the locale files are used via templates. The i18n module adds 3 things to the global scope which |
| 67 | +templated JS can use, specifically: |
| 68 | + |
| 69 | +```html |
| 70 | +<!DOCTYPE html> |
| 71 | +<html lang="{{ lang }}" dir="{{ lang_dir }}"> |
| 72 | +... |
| 73 | +<p id="main">{{ gettext( "helloworld" ) }}</p> |
| 74 | +``` |
| 75 | + |
| 76 | +Here the `lang` will be the locale's language, for example `en` or `en_US`. The `lang_dir` variable will be |
| 77 | +the direction of the language (`rtl` or `ltr`). Finally, the `gettext` function allows a string to be retrieved |
| 78 | +from the locale using an ID. The ID used should match one in the `<key>...</key>` portion of the .plist file. |
0 commit comments