-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstep1-internationalization.html
136 lines (135 loc) · 3.85 KB
/
step1-internationalization.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Step 1: Internationalization</title>
<meta name="description"
content="
Internationalization (i18n)
consists in extracting all the text and formatting
specific to a single language,
to make your web site or application
in more than one language.
"
/>
<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 1: Internationalization</h2>
<p>
Internationalization (i18n) consists in extracting all the text
and formatting specific to a single language, to make your web
site or application in more than one language.
</p>
<p>
For example:
<code>"i18n.fr is very helpful."</code>
becomes
<code>"#about.service#"</code>.
</p>
<p>
A string of text has been replaced with a key,
<code>about.service</code>,
which will be used to retrieve the text
in a language property file.
</p>
<p>
This is the first step of the conversion process
from a monolingual to a multicultural web site.
</p>
<a href="contact.html" class="layer-box hero-box">
<img class="hero"
src="images/step1_900x578.jpg"
/>
<div class="layer hero-layer text-overlay"
style="bottom: 3em; right: 3em;"
>
Let me help you<br/>
from Step 1: Internationalization
</div>
</a>
<h3>A common pitfall: Concatenation</h3>
<p>
During the internationalization process,
it is common to create keys
for parts of sentences
to keep variable parts outside the key.
</p>
<p>
For example:
<code>"There are"</code> and <code>"items in your basket."</code>
</p>
<p>
The keys are then concatenated with a value
to make up the whole sentence.
This leads to issues at the next step,
when trying to translate each key
in a different language.
</p>
<p>
It is better to use <em>templates</em>
with <em>parameters</em> to replace inserted
in the text to translate:
</p>
<p>
<code>"There are #basket.count# items in your basket."</code>
</p>
<p>
<code>#basket.count#</code> is a placeholder
that marks the place
where the number of items
will be inserted.
</p>
<p>
The <code>#</code> signs are <em>separators</em>:
they surround the <em>name</em> of the <em>parameter</em>,
<code>basket.count</code>,
and make it stand out,
apart from the text before and the text after.
</p>
<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>