-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
371 lines (370 loc) · 16.1 KB
/
index.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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>ICU Message Format for Translators</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="./css/normalize.css"/>
<link rel="stylesheet" href="./css/skeleton.css"/>
<link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
<main class="container">
<section class="section hero">
<div class="row section-row">
<div class="six columns">
<h1 class="hero-heading">Translate ICU messages with confidence.</h1>
<a class="button button-primary" href="./editor.html">Try It Out</a>
<a class="u-pull-right" href="#learn-more">Learn More</a>
</div>
<div class="six columns section-column">
<code class="icu-m">
<span class="icu-m-arg">{
<var class="icu-m-argname">gender</var>,
<span class="icu-m-argtype">select</span>,<br/>
<span class="icu-m-argkey">female</span>
{<span class="icu-m-sub"
><span class="icu-m-arg">{<br/>
<var class="icu-m-argname">count</var>,
<span class="icu-m-argtype">plural</span>,<br/>
<span class="icu-m-argkey">=0</span>
{<span class="icu-m-sub" lang="pt-BR">Ela não tem nenhum Pokémon</span>}<br/>
<span class="icu-m-argkey">one</span>
{<span class="icu-m-sub" lang="pt-BR">Ela tem só um Pokémon</span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub" lang="pt-BR">Ela tem <span class="icu-m-arghash">#</span> Pokémon</span>}<br/>
}</span
></span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub"
><span class="icu-m-arg">{<br/>
<var class="icu-m-argname">count</var>,
<span class="icu-m-argtype">plural</span>,<br/>
<span class="icu-m-argkey">=0</span>
{<span class="icu-m-sub" lang="pt-BR">Ele não tem nenhum Pokémon</span>}<br/>
<span class="icu-m-argkey">one</span>
{<span class="icu-m-sub" lang="pt-BR">Ele tem só um Pokémon</span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub" lang="pt-BR">Ele tem <span class="icu-m-arghash">#</span> Pokémon</span>}<br/>
}</span
></span>}<br/>
}</span>
</code>
</div>
</div>
</section>
<section class="section learn-more" id="learn-more">
<div class="row section-row">
<div class="six columns">
<p>
Before ICU messages are shown to users, placeholders are
replaced with data from the application.
</p>
<p>
The placeholder name, wrapped in curly braces, should
<strong>not</strong> be translated.
</p>
<a class="u-pull-right" href="#reorder">reordering</a>
</div>
<div class="three columns section-column">
<code class="icu-m" data-params='{"name":"Ash"}'>
Welcome, <span class="icu-m-arg">{
<var class="icu-m-argname">name</var>
}</span>!
</code>
<br/>+<br/>
name: <code>Ash</code>
<br/>=<br/>
<output>
Welcome, Ash!
</output>
</div>
<div class="three columns section-column">
<code class="icu-m" lang="pt-BR" data-params='{"l":"pt-BR","name":"Ash"}'>
Bem vindo, <span class="icu-m-arg">{
<var class="icu-m-argname">name</var>
}</span>!
</code>
<br/>+<br/>
name: <code>Ash</code>
<br/>=<br/>
<output>
Bem vindo, Ash!
</output>
</div>
</div>
</section>
<section class="section" id="reorder">
<div class="row section-row">
<div class="six columns">
<p>
While you should not translate placeholders, they can be moved
around to fit the translated phrase.
</p>
<a class="u-pull-right" href="#types">placeholder types</a>
</div>
<div class="six columns section-column">
<code class="icu-m" lang="en-US">
Hello,
<span class="icu-m-arg">{<span class="icu-m-argname">firstName</span>}</span>
<span class="icu-m-arg">{<span class="icu-m-argname">lastName</span>}</span>!
</code>
<code class="icu-m" lang="zh-TW" data-params='{"l":"zh-TW"}'>
歡迎
<span lang="en-US" class="icu-m-arg">{<span class="icu-m-argname">lastName</span>}</span>
<span lang="en-US" class="icu-m-arg">{<span class="icu-m-argname">firstName</span>}</span>
回來
</code>
</div>
</div>
</section>
<section class="section" id="types">
<div class="row section-row">
<div class="six columns">
<p>
Placeholders can have a type. This helps numbers and dates get
locale-specific formatting.
</p>
<p>
The type is always one of these:
<code>number</code>,
<code>date</code>,
<code>time</code>,
<code>ordinal</code>,
<code>duration</code>,
<code>spellout</code>,
<code>plural</code>,
<code>selectordinal</code>, or
<code>select</code>.
The type and preceeding comma must <strong>not</strong> be translated.
</p>
<a class="u-pull-right" href="#styles">placeholder styles</a>
</div>
<div class="six columns section-column">
<code class="icu-m" data-params='{"count":21629693}'>
Trainers: <span class="icu-m-arg">{
<var class="icu-m-argname">count</var>,
<span class="icu-m-argtype">number</span>
}</span>
</code>
<br/>+<br/>
count: <code>21629693</code>
<br/>=<br/>
<output>
Trainers: 21,629,693
</output>
</div>
</div>
</section>
<section class="section" id="styles">
<div class="row section-row">
<div class="six columns">
<p>
Placeholders can have a style too. This is extra information for
how the value will be formatted.
</p>
<p>
The style must <strong>not</strong> be translated either.
</p>
<a class="u-pull-right" href="#nested-messages">nested messages</a>
</div>
<div class="six columns section-column">
<code class="icu-m" data-params='{"catchDate":"2016-07-21T15:21:07Z"}'>
Caught on <span class="icu-m-arg">{
<var class="icu-m-argname">catchDate</var>,
<span class="icu-m-argtype">date</span>,
<span class="icu-m-argstyle">short</span>
}</span>
</code>
<br/>+<br/>
catchDate: <code>2016-07-21T15:21:07Z</code>
<br/>=<br/>
<output>
Caught on: 7/21/16
</output>
</div>
</div>
</section>
<section class="section" id="nested-messages">
<div class="row section-row">
<div class="six columns">
<p>
Placeholders of <code>select</code>, <code>plural</code>, and
<code>selectordinal</code> types also have nested messages that
are chosen by matching the value against a selector.
</p>
<p>
The selectors are <strong>not</strong> translated, but the nested
messages <strong>are</strong> translated.
</p>
<a class="u-pull-right" href="#white-space">white space</a>
</div>
<div class="six columns section-column">
<code class="icu-m" data-params='{"gender":"female"}'>
<span class="icu-m-arg">{
<var class="icu-m-argname">gender</var>,
<span class="icu-m-argtype">select</span>,<br/>
<span class="icu-m-argkey">male</span>
{<span class="icu-m-sub">He avoids bugs</span>}<br/>
<span class="icu-m-argkey">female</span>
{<span class="icu-m-sub">She avoids bugs</span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub">They avoid bugs</span>}
}</span>
</code>
<br/>+<br/>
gender: <code>female</code>
<br/>=<br/>
<output>
She avoids bugs
</output>
</div>
</div>
</section>
<section class="section" id="white-space">
<div class="row section-row">
<div class="six columns">
<p>
Space inside a placeholder isn’t important. You can add new lines
or extra space to make it easier to read.
</p>
<p>
Space outside placeholders and in nested messages will be
displayed to the user.
</p>
<a class="u-pull-right" href="#plural-hash">hash placeholder</a>
</div>
<div class="six columns section-column">
<code class="icu-m"
><span class="icu-m-arg"
>{<var class="icu-m-argname">count</var
>,<span class="icu-m-argtype">plural</span
>,<span class="icu-m-argkey">=0</span
>{<span class="icu-m-sub">No candy left</span
>}<span class="icu-m-argkey">one</span
><br/>{<span class="icu-m-sub">Got <span class="icu-m-arghash">#</span> candy left</span
>}<span class="icu-m-argkey">other</span
>{<span class="icu-m-sub">Got <span class="icu-m-arghash">#</span> candies left</span
>}}</span>
</code>
<br/>=<br/>
<code class="icu-m">
<span class="icu-m-arg">{
<var class="icu-m-argname">count</var> ,
<span class="icu-m-argtype">plural</span> ,<br/>
<span class="icu-m-argkey">=0</span>
{<span class="icu-m-sub">No candy left</span>}<br/>
<span class="icu-m-argkey">one</span>
{<span class="icu-m-sub">Got <span class="icu-m-arghash">#</span> candy left</span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub">Got <span class="icu-m-arghash">#</span> candies left</span>}
}</span>
</code>
</div>
</div>
</section>
<section class="section" id="plural-hash">
<div class="row section-row">
<div class="six columns">
<p>
Nested messages in a <code>plural</code> can have a special
placeholder: <code>#</code>. It is shorthand for the same value as
the plural, formatted as a number.
</p>
<p>
<code>plural</code> can also have an <code>offset</code>, which
should <strong>not</strong> be translated. (=number selectors are
checked first, then the offset is subtracted before matching
keywords <code>one</code>, <code>few</code>, etc.)
</p>
<a class="u-pull-right" href="#wrap-up">wrap up</a>
</div>
<div class="six columns section-column">
<code class="icu-m" data-params='{"trainers":2}'>
<span class="icu-m-arg">{
<var class="icu-m-argname">trainers</var>,
<span class="icu-m-argtype">plural</span>,
<span class="icu-m-argstyle">offset:1</span><br/>
<span class="icu-m-argkey">=0</span>
{<span class="icu-m-sub">The gym is empty</span>}<br/>
<span class="icu-m-argkey">=1</span>
{<span class="icu-m-sub">You are alone here</span>}<br/>
<span class="icu-m-argkey">one</span>
{<span class="icu-m-sub">You and <span class="icu-m-arghash">#</span> trainer</span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub">You and <span class="icu-m-arghash">#</span> trainers</span>}
}</span>
</code>
<br/>+<br/>
trainers: <code>2</code>
<br/>=<br/>
<output>
You and 1 other trainer
</output>
</div>
</div>
</section>
<section class="section" id="wrap-up">
<div class="row section-row">
<div class="six columns">
<p>
This page made with ❤️ by
<a href="https://andy.vanwago.net">Andy VanWagoner</a> on
<a href="https://github.com/format-message/icu-message-format-for-translators">GitHub</a>.
</p>
<p>Thanks to <a href="http://site.icu-project.org">ICU</a> for awesome i18n.</p>
<a class="button button-primary" href="./editor.html">Open ICU Message Editor</a>
</div>
<div class="six columns section-column">
<code class="icu-m" data-params='{"l":"pt-BR"}'>
<span class="icu-m-arg">{
<var class="icu-m-argname">gender</var>,
<span class="icu-m-argtype">select</span>,<br/>
<span class="icu-m-argkey">female</span>
{<span class="icu-m-sub"
><span class="icu-m-arg">{<br/>
<var class="icu-m-argname">count</var>,
<span class="icu-m-argtype">plural</span>,<br/>
<span class="icu-m-argkey">=0</span>
{<span class="icu-m-sub" lang="pt-BR">Ela não capturou nenhum</span>}<br/>
<span class="icu-m-argkey">one</span>
{<span class="icu-m-sub" lang="pt-BR">Ela tem capturado um só</span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub" lang="pt-BR">Ela tem capturado <span class="icu-m-arghash">#</span></span>}<br/>
}</span
></span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub"
><span class="icu-m-arg">{<br/>
<var class="icu-m-argname">count</var>,
<span class="icu-m-argtype">plural</span>,<br/>
<span class="icu-m-argkey">=0</span>
{<span class="icu-m-sub" lang="pt-BR">Ele não capturou nenhum</span>}<br/>
<span class="icu-m-argkey">one</span>
{<span class="icu-m-sub" lang="pt-BR">Ele tem capturado um só</span>}<br/>
<span class="icu-m-argkey">other</span>
{<span class="icu-m-sub" lang="pt-BR">Ele tem capturado <span class="icu-m-arghash">#</span></span>}<br/>
}</span
></span>}<br/>
}</span>
</code>
</div>
</div>
</section>
</main>
<script>
Array.prototype.slice.call(document.querySelectorAll('code.icu-m')).forEach(function (code) {
var pattern = (code.innerText || code.textContent).trim()
var params = JSON.parse(code.getAttribute('data-params') || '{}')
var href = './editor.html?m=' + encodeURIComponent(pattern)
for (var k in params) {
href += '&' + encodeURIComponent(k) + '=' + encodeURIComponent(params[k])
}
var a = document.createElement('a')
a.className = 'editor-link'
a.href = href
a.appendChild(code.parentNode.replaceChild(a, code))
})
</script>
</body>
</html>