-
Notifications
You must be signed in to change notification settings - Fork 0
/
step2-localization.html
167 lines (166 loc) · 4.89 KB
/
step2-localization.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Step 2: Localization</title>
<meta name="description"
content="
Localization (L10n)
involves the translation of language properties
and the adaptation of styles and functions
to a different language or culture.
"
/>
<link rel="stylesheet" type="text/css"
href="styles/page.css"
/>
</head>
<body>
<header>
<a href="/">
<img class="logo" alt="i18n.fr" src="images/i18nfr.png" />
</a>
</header>
<h2>Step 2: Localization</h2>
<p>
The next step is Localization (L10n),
which involves the translation of <em>language properties</em>
and the adaptation of styles and functions
to a different language or culture.
</p>
<p>
This is typically a back and forth process
with <a href="step1-internationalization.html">Internationalization</a>,
when new <em>language properties</em> must be added,
or translations must be updated
when the initial text is modified.
</p>
<p>
For example, a translator will receive
the following <em>language property</em> in English:
</p>
<p>
<code>about.service: "i18n.fr is very helpful."</code>
</p>
<p>
and will translate it to French:
</p>
<p>
<code>about.service: "i18n.fr est très utile."</code>
</p>
<p>
Each <em>language property</em> is made of two parts:
</p>
<ol class="numbered">
<li>
the <em>key</em>, here <code>about.service</code>,
identifies the property across translations;<br/>
it is the <strong>fixed</strong> part of the property.
</li>
<li>
the <em>value</em> is the <strong>variable</strong> part
which changes from language to language:<br />
here <code>"i18n.fr is very helpful."</code> in English
and <code>"i18n.fr est très utile."</code> in French.
</li>
</ol>
<a href="contact.html" class="layer-box hero-box">
<img class="hero"
src="images/step2_900x833.jpg"
/>
<div class="layer hero-layer text-overlay"
style="top: 7em; right: 2em;"
>
Let me help you<br/>
at Step 2: Localization
</div>
</a>
<h3>Pitfalls: Pluralization and Gender Agreement</h3>
<p>
A static transformation of text
is not enough for a full Localization:
logic is needed
to take into account
plural and gender agreement.
</p>
<p>
This is typically done with functions
written in a programming language,
for example:
</p>
<pre>
function(context){
var count = context["basket.count"];
switch(count){
case 0:
return "There are no items in your basket.";
case 1:
return "There is 1 item in your basket.";
default:
return "There are "+count+" items in your basket.";
}
}
</pre>
<p>
The
<a href="http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html"
>Language Plural Rules</a>
vary depending on the language.
singular and plural are not enough
to describe these rules:
some languages have different forms of plural,
for example,
for 2, 12 and 100 items.
</p>
<p>
It is sometimes possible
to define separate <em>language properties</em>
for each <em>category</em> of singular and plural;
in this case the complexity becomes to select
the correct <em>language property</em>
depending on the context:
</p>
<pre>
basket.items.zero: "There are no items in your basket."
basket.items.one: "There is 1 item in your basket."
basket.items.other: "There are #basket.count# items in your basket."
</pre>
<nav>
<ol>
<li class="layer-box nav-item">
<a href="step1-internationalization.html">
<img alt="" class="nav-thumbnail"
src="images/step1_280x188.jpg"
/>
<div class="layer nav-layer text-overlay">
Step 1:<br/>
Internationalization
</div>
</a>
</li
><li class="layer-box nav-item">
<a href="step2-localization.html">
<img alt="" class="nav-thumbnail"
src="images/step2_280x188.jpg"
/>
<div class="layer nav-layer text-overlay">
Step 2:<br/>
Localization
</div>
</a>
</li
><li class="layer-box nav-item">
<a href="step3-language-selection.html">
<img alt="" class="nav-thumbnail"
src="images/step3_280x188.jpg"
/>
<div class="layer nav-layer text-overlay">
Step 3:<br/>
Language Selection
</div>
</a>
</li>
</ol>
</nav>
</body>
</html>