5
<title>Internationalization</title>
6
<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
<link rel="stylesheet" href="../assets/css/main.css">
8
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
<script src="../../build/yui/yui-min.js"></script>
14
<h1>Internationalization</h1>
17
<a href="#toc" class="jump">Jump to Table of Contents</a>
21
<div id="main" class="yui3-u">
22
<div class="content"><div class="intro">
23
<p>The Internationalization utility supports the management of localized resources such as strings and formatting patterns.</p>
26
<h2 id="scenarios">Usage Scenarios for the Internationalization Utility</h2>
28
<p>The YUI Internationalization utility supports externalization, that is,
29
separating data that needs to change for different languages or markets
30
from the code of a software product, so that the same code can be used
33
<p>Depending on the kind of software you create with YUI, you will interact
34
with the Internationalization utility in different ways.</p>
36
<h3 id="monolingualApps">Monolingual Applications</h3>
38
<p>Many applications using YUI are not internationalized themselves; they
39
use one user interface language to target one market.
40
However, such applications still want language-sensitive modules that
41
they rely on to be internationalized and localized for their language.
42
For example, an application using Chinese to target Hong Kong wants dates
43
to be displayed in a Chinese format appropriate for Hong Kong, and so
44
relies on the DataType utility to provide such formats.</p>
46
<p>If the modules that such an application uses support the language of
47
the application, the problem is solved by simply
48
<a href="#prefLang">requesting preferred languages</a>. Otherwise, the
49
application may be able to fill the gap by
50
<a href="#appResources">providing resources to modules</a>.</p>
52
<h3 id="multilingualApps">Multilingual Applications</h3>
54
<p>An application that's intended for users in different markets or
55
using different languages has to be internationalized.<p>
57
<p>Primarily, this means developing its code in the form of
58
<a href="#intlModules">internationalized modules</a>, determining
59
the preferred user interface language(s),
60
<a href="#prefLang">requesting preferred languages</a>, and possibly
61
<a href="#appResources">providing resources to modules</a>.</p>
63
<p>Optionally, an application can provide a user interface element
64
that lets the user <a href="#switchingLangs">switch languages</a>
67
<h3 id="intlModules">Internationalized Modules</h3>
69
<p>A module whose functionality is sensitive to different markets and
70
languages and that's intended for use by multilingual applications
71
or by different monolingual applications
72
has to be <a href="#modules">internationalized</a>.</p>
74
<h2 id="getting-started">Getting Started</h2>
77
To include the source files for Internationalization and its dependencies, first load
78
the YUI seed file if you haven't already loaded it.
81
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script></pre>
85
Next, create a new YUI instance for your application and populate it with the
86
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
87
YUI will automatically load any dependencies required by the modules you
91
<pre class="code prettyprint">// Create a new YUI instance and populate it with the required modules.
92
YUI().use('intl', function (Y) {
93
// Internationalization is available and ready for use. Add implementation
94
// code here.
99
For more information on creating YUI instances and on the
100
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
101
documentation for the <a href="../yui/index.html">YUI Global object</a>.
105
<h2 id="using">Using the Internationalization Utility</h2>
107
<h3 id="bcp47">Using BCP 47 Language Tags</h3>
109
<p>BCP 47 language tags are the identifiers for languages used on the internet.
110
BCP stands for IETF Best Current Practice, and BCP 47 is currently the combination
111
of <a href="http://tools.ietf.org/html/rfc5646">RFC 5646</a> and
112
<a href="http://tools.ietf.org/html/rfc4647">RFC 4647</a>.
113
These tags allow the description of languages in varying levels of detail, from
114
"Chinese" ("zh") to "Chinese written in traditional characters as used in Taiwan"
115
("zh-Hant-TW") and more. Typical components ("subtags") are ISO 639 language codes,
116
ISO 15924 script codes, and ISO 3166 country codes. Subtags are separated by
119
<p>Here are the language tags for some popular languages:</p>
122
<tr><th>Language Tag<th>Description
123
<tr><td>zh-Hans-CN<td>Chinese, simplified characters, China
124
<tr><td>es<td>Spanish
125
<tr><td>en<td>English
126
<tr><td>hi-IN<td>Hindi, India
128
<tr><td>en-US<td>English, U.S.A.
129
<tr><td>id-ID<td>Indonesian, Indonesia
130
<tr><td>pt-BR<td>Portuguese, Brazil
131
<tr><td>ru-RU<td>Russian, Russia
133
<tr><td>ja-JP<td>Japanese, Japan
134
<tr><td>es-MX<td>Spanish, Mexico
137
<p>BCP 47 also defines a "Lookup" algorithm, which is commonly used to determine
138
the best language for a user interface. Its input is an ordered list of
139
languages that the user prefers, and the list of languages that the software
140
supports. When looking for a language, the algorithm uses a fallback that
141
successively simplifies a language tag. For example, when looking for
142
a requested "zh-Hans-CN", it also checks whether "zh-Hans" or "zh" are
145
<p>The Internationalization utility provides the Lookup algorithm as the
146
<code>Intl.lookupBestLang</code> method, and the YUI loader uses it to determine
147
the best language based on an application's request and a module's language
150
<p>When requesting a language, it's generally a good idea to be specific and
151
include the country, because in some cases the differences between countries
152
are significant. For example, "3/5/10" means "March 5, 2010" in U.S. English,
153
but "3 May 2010" in British English.</p>
155
<p>When providing language support, on the other hand, you should also support
156
the less specific variant without country ("en", "es", "zh-Hans", etc.), so that
157
the fallback finds something when a request includes a country that you don't
158
support. Where the usage in different countries using the same language diverges
159
siginificantly, try to be neutral, e.g., by formatting dates in ISO notation
162
<h3 id="applications">Internationalizing Applications</h3>
164
<h4 id="prefLang">Requesting Preferred Languages</h4>
166
<p>When creating a YUI instance, you can specify a list of preferred languages.</p>
168
<p>For a monolingual application, this list starts with the user interface
169
language of the application, but it may include other languages that
170
users are likely to understand, in case a module doesn't support the
171
preferred language. For example, an application in Arabic for Morocco might
172
specify French as a second choice since French is widely spoken in Morocco.</p>
174
<p>A multilingual application might maintain user language preferences as part of
175
the application, derive the preference list from the <code>Accept-Language</code>
176
header provided by the browser, or determine the list in some other fashion.</p>
178
<p>The preference list is specified as the <code>lang</code> property of the YUI
179
instance's config object. The YUI instance uses it to select the best available
180
language for each module and load the necessary resource bundles.</p>
182
<pre class="code prettyprint">// Create new YUI instance, specify preferred languages,
183
// and populate it with the required modules
184
YUI({lang:"ar-MA,fr-FR"}).use('datatype-date', function(Y) {
186
// DataType available, and hopefully localized into one of the preferred languages
191
<h4 id="appResources">Providing Resources to Modules</h4>
193
<p>In some cases, a module is internationalized, but doesn't have a resource
194
bundle for the desired language. It may however have specified the contents
195
of the resource bundle needed. In such a case, the application can register
196
a resource bundle for its language with the Internationalization utility and
197
set the language of that module.</p>
199
<p>For example, date formatting in the DataType utility has support for a
200
large number of languages built in, but Punjabi is not one of them. If
201
you need date formatting for Punjabi, you can provide a resource bundle for this
202
language (see the <a href="../datatype/index.html#addDateFormat">DataType</a>
203
documentation for information on the contents of the resource bundle):</p>
205
<pre class="code prettyprint">YUI().use("intl", "datatype-date-format", function(Y) {
206
// provide data for Punjabi in India
207
Y.Intl.add("datatype-date-format", "pa-IN", {
208
"a":["ਐਤ.","ਸੋਮ.","ਮੰਗਲ.","ਬੁਧ.","ਵੀਰ.","ਸ਼ੁਕਰ.","ਸ਼ਨੀ."],
209
"A":["ਐਤਵਾਰ","ਸੋਮਵਾਰ","ਮੰਗਲਵਾਰ","ਬੁਧਵਾਰ","ਵੀਰਵਾਰ","ਸ਼ੁੱਕਰਵਾਰ","ਸ਼ਨੀਚਰਵਾਰ"],
210
"b":["ਜਨਵਰੀ","ਫ਼ਰਵਰੀ","ਮਾਰਚ","ਅਪ੍ਰੈਲ","ਮਈ","ਜੂਨ","ਜੁਲਾਈ","ਅਗਸਤ","ਸਤੰਬਰ","ਅਕਤੂਬਰ","ਨਵੰਬਰ","ਦਸੰਬਰ"],
211
"B":["ਜਨਵਰੀ","ਫ਼ਰਵਰੀ","ਮਾਰਚ","ਅਪ੍ਰੈਲ","ਮਈ","ਜੂਨ","ਜੁਲਾਈ","ਅਗਸਤ","ਸਤੰਬਰ","ਅਕਤੂਬਰ","ਨਵੰਬਰ","ਦਸੰਬਰ"],
212
"c":"%a, %Y %b %d %l:%M:%S %p %Z",
213
"p":["ਸਵੇਰੇ","ਸ਼ਾਮ"],
214
"P":["ਸਵੇਰੇ","ਸ਼ਾਮ"],
215
"x":"%d/%m/%Y",
216
"X":"%l:%M:%S %p"
218
// switch to Punjabi
219
Y.Intl.setLang("datatype-date-format", "pa-IN");
220
// now dates are formatted in Punjabi
221
alert(Y.DataType.Date.format(new Date(), {format:"%A %x %X"}));
225
<h4 id="switchingLangs">Switching Languages</h4>
227
<p>Some applications let the user change the user interface language on the fly.
228
The Internationalization utility offers some low-level support for this:</p>
231
<li>Applications that want to make the languages offered reflect the actually
232
available languages in one or more modules can obtain the necessary
233
information from <code>Intl.getAvailableLangs</code>.
234
<li>Once a new language has been selected, the application can load the
235
required resource bundles and call <code>Intl.setLang</code> to
236
switch localizable modules to the new language.
237
<li>Modules that have language sensitive behavior, whether relying on
238
their own resource bundles or on other modules', can listen to
239
<code>intl:langChange</code> events to find out about language changes.
242
<p>The <a href="../datatype/datatype-dateformat-lang.html">Formatting
243
Dates Using Language Resource Bundles</a> example shows how to use these interfaces.</p>
245
<h3 id="modules">Internationalizing Modules</h3>
247
<h4 id="externalizing">Externalizing Resources</h4>
249
<p>Externalization means moving all language-sensitive data into external data files,
250
also known as "resource bundles". Most of this data will be user interface strings
251
that have to be translated, but there may also be patterns strings, font names, or
252
other items. Resource bundles store this data as simple key-value pairs.</p>
254
<p>The first resource bundle you always have to provide for an internationalized module
255
is the root bundle, identified by the empty language tag "" and using the bundle name
256
<code>lang/<i>module</i></code>.
258
This is the bundle that will be used when an application requests a language that your module does
259
not support. Additional languages are identified by their BCP 47 language tags, and their resource
260
bundles use the names <code>lang/<i>module</i>_<i>language</i></code>.</p>
262
<p>If you've used resource bundles in Java or other internationalization libraries,
263
you may be familiar with the fallback mechanisms in their ResourceBundle classes.
264
These do not exist in YUI, so that the loader doesn't have to load multiple bundles.
265
As a consequence, each YUI resource bundle must provide the complete set of key-value
266
pairs that the module needs.</p>
268
<p>YUI currently supports two source formats for resource bundles: JSON-style
269
JavaScript source files, and Yahoo Resource Bundle format.</p>
271
<p>In JSON-style format, a resource bundle is a simple object whose properties
272
represent the bundle's key-value pairs. Source files use the JavaScript suffix
273
".js" and can contain comments, so that you can provide localizers with the
274
information they need for correct localization.
275
Here is a family of JSON files providing the same set of strings in English,
276
German, and simplified Chinese:</p>
281
<th>English <span style="text-transform:none">(root)</span></th>
282
<th>German<th>Simplified Chinese</th>
286
<td>greetings.js</td>
287
<td>greetings_de.js</td>
288
<td>greetings_zh-Hans.js</td>
293
<pre class="code prettyprint">{
294
HELLO: "Hello!",
295
GOODBYE: "Goodbye!"
300
<pre class="code prettyprint">{
301
HELLO: "Hallo!",
302
GOODBYE: "Tschüß!"
307
<pre class="code prettyprint">{
308
HELLO: "你好!",
309
GOODBYE: "再见!"
315
<p>The <a href="#yrb">Yahoo Resource Bundles format</a> is a simple
316
text format for resource bundles that Yahoo open-sourced in 2009.
317
It uses the file name suffix ".pres".
318
Here are the same resource bundles as above in YRB format:</p>
323
<th>English <span style="text-transform:none">(root)</span></th>
325
<th>Simplified Chinese</th>
329
<td>greetings.pres</td>
330
<td>greetings_de.pres</td>
331
<td>greetings_zh-Hans.pres</td>
336
<pre class="code prettyprint">HELLO = Hello!
337
GOODBYE = Goodbye!</pre>
341
<pre class="code prettyprint">HELLO = Hallo!
342
GOODBYE = Tschüß!</pre>
346
<pre class="code prettyprint">HELLO = 你好!
353
<h4 id="packaging">Packaging Resources</h4>
355
<p>The YUI loader expects resource bundles in a specific format. If you use the YUI Builder
356
to build your module, resource bundles in JSON or YRB format will be automatically
357
converted into the format expected by the loader. All you have to do is provide the source
358
files in the <code>src/<i>module</i>/lang/</code> directory, and specify the list of
359
available languages as the <code>component.lang</code> property of the module's
360
build.properties file:</p>
362
<pre class="code prettyprint">component.lang=de,zh-Hans</pre>
365
<p>If you use some other build process, you have to produce JavaScript files in the
366
following format:</p>
368
<pre class="code prettyprint">YUI.add("lang/greetings_zh-Hans", function(Y) {
372
"greetings", // associated module
373
"zh-Hans", // BCP 47 language tag
375
// key-value pairs for this module and language
377
HELLO: "你好!",
378
GOODBYE: "再见!"
381
}, "3.1.0");</pre>
384
<h4 id="specifying">Specifying Available Languages</h4>
386
<p>The YUI loader also needs to be told that your module uses resource bundles,
387
and for which languages it has resource bundles available. You provide this
388
information as the <code>lang</code> property of the module meta data:</p>
390
<pre class="code prettyprint">modules: {
391
"greetings": {
392
lang: ["de", "zh-Hans"]
397
<h4 id="obtaining">Obtaining Resources</h4>
399
<p>To access its resources, a module simply calls <code>Intl.get</code> with its
400
module name. When instantiating YUI, the application will have requested its
401
user interface language, so <code>Intl.get</code> will return the appropriate
402
localized resource bundle.</p>
404
<pre class="code prettyprint">function Greetings() {
405
// Get localized strings in the current language
406
this.resources = Y.Intl.get("greetings");
409
Greetings.prototype = {
412
return this.resources.HELLO;
415
goodbye: function() {
416
return this.resources.GOODBYE;
421
<h3 id="yrb">Yahoo Resource Bundle Format</h3>
423
<p>The Yahoo Resource Bundle (YRB) format is a simple text format for
424
resource bundles. It's similar to Java properties files, but based
425
on UTF-8 and with additional heredoc support.</p>
428
<li>Files are encoded in UTF-8. The first line may be prefixed with a byte order mark (BOM).</li>
429
<li>Lines whose first non-whitespace character is “#” are comment lines and are ignored.</li>
430
<li>Lines that contain only whitespace characters and are not part of a heredoc string are ignored.</li>
431
<li>Key-value definitions come in two forms:
433
<li>The simple form has a key string, followed by “=”, followed by the value, all on one line.
434
The tokens may or may not be surrounded by whitespace characters. Leading and trailing
435
whitespace is trimmed from both key and value. The value cannot start with "<<<";
436
for values starting with this character sequence, use the heredoc form.
438
<li>The heredoc form starts with a key string, followed by “=”, followed by “<<<”,
439
followed by an identifier, all on one line.
440
The tokens may or may not be surrounded by whitespace characters
441
Leading and trailing whitespace is trimmed from both key and identifier.
442
The heredoc form ends with a termination line that contains only the identifier,
443
possibly followed by a semicolon.
444
The lines between these two lines, except comment lines, form the heredoc string.
445
The line break before the termination line is removed, all other line breaks are preserved.
449
<li>Lines that are not comment lines, whitespace lines, or part of a key-value definition are illegal.</li>
450
<li>The following escape sequences are recognized in values:
452
<li>“\\” stands for “\”.</li>
453
<li>“\n” stands for the newline character, U+000A.</li>
454
<li>“\t” stands for the horizontal tab character, U+0009.</li>
455
<li>“\ ” stands for the space character, U+0020. This is only needed if the value of a key-value
456
pair starts or ends with a space character.</li>
457
<li>“\#” stands for the number sign character, U+0023. This is only needed if a line within a
458
heredoc string starts with this character.</li>
461
<li>A sequence of “\” followed by a character not listed above is illegal.
462
A “\” immediately preceding the end of the file is illegal.</li>
463
<li>Only the characters horizontal tab, U+0009, and space, U+0020, are considered whitespace.</li>
468
<div id="sidebar" class="yui3-u">
470
<div id="toc" class="sidebox">
472
<h2 class="no-toc">Table of Contents</h2>
478
<a href="#scenarios">Usage Scenarios for the Internationalization Utility</a>
481
<a href="#monolingualApps">Monolingual Applications</a>
484
<a href="#multilingualApps">Multilingual Applications</a>
487
<a href="#intlModules">Internationalized Modules</a>
492
<a href="#getting-started">Getting Started</a>
495
<a href="#using">Using the Internationalization Utility</a>
498
<a href="#bcp47">Using BCP 47 Language Tags</a>
501
<a href="#applications">Internationalizing Applications</a>
504
<a href="#prefLang">Requesting Preferred Languages</a>
507
<a href="#appResources">Providing Resources to Modules</a>
510
<a href="#switchingLangs">Switching Languages</a>
515
<a href="#modules">Internationalizing Modules</a>
518
<a href="#externalizing">Externalizing Resources</a>
521
<a href="#packaging">Packaging Resources</a>
524
<a href="#specifying">Specifying Available Languages</a>
527
<a href="#obtaining">Obtaining Resources</a>
532
<a href="#yrb">Yahoo Resource Bundle Format</a>
542
<div class="sidebox">
544
<h2 class="no-toc">Examples</h2>
548
<ul class="examples">
551
<li data-description="How to create components which use language resource bundles.">
552
<a href="intl-basic.html">Language Resource Bundles</a>
564
<div class="sidebox">
566
<h2 class="no-toc">Examples That Use This Component</h2>
570
<ul class="examples">
575
<li data-description="Formatting dates into strings using pre-packaged language resource bundles.">
576
<a href="../datatype/datatype-dateformat-lang.html">Formatting Dates Using Language Resource Bundles</a>
588
<script src="../assets/vendor/prettify/prettify-min.js"></script>
589
<script>prettyPrint();</script>