forked from acdha/djangocon-internationalization-tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
web.html
executable file
·353 lines (293 loc) · 14.6 KB
/
web.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="viewport" content="width=1024, user-scalable=no">
<title>Building International Sites: Front-End Web Strategies</title>
<!-- Required stylesheet -->
<link rel="stylesheet" href="deck.js/core/deck.core.css">
<link rel="stylesheet" href="deck.js/extensions/goto/deck.goto.css">
<link rel="stylesheet" href="deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="deck.js/themes/style/swiss.css">
<link rel="stylesheet" href="custom.css">
<script src="deck.js/modernizr.custom.js"></script>
</head>
<body class="deck-container">
<section class="slide" id="intro">
<h1>Front-End Web Strategies</h1>
</section>
<section id="language-declaration" class="slide">
<h2>Specifying language information</h2>
<figure class="center-block">
<figcaption class="center">
<h3>How HTTP & HTML specify language</h3>
</figcaption>
<ol>
<li>
HTTP <code>Content-Language</code> header
</li>
<li>
HTML <code><meta></code> equivalent
</li>
<li>
An HTML
<a href="http://www.w3.org/TR/html4/struct/dirlang.html#h-8.1"><code>lang</code></a>
attribute defined on a parent
</li>
<li>A <code>lang</code> attribute on the element</li>
</ol>
<figcaption class="center">
(least to most specific)
</figcaption>
</figure>
<p>
Recommendation: specify the primary language in the
<code>lang</code> attribute on your <code><html></code>
element and where it changes:
</p>
<code class="block">
<html lang="en"><br>
…<br>
<blockquote lang="la">Lorem ipsum dolor sit amet…</blockquote><br>
</code>
<aside>
<code>lang</code> values follow
<a href="http://www.ietf.org/rfc/rfc1766.txt">RFC 1766</a>.
Heavily summarized: a primary value, optionally with a
hyphen-separated secondary value. Values are most commonly
<a href="http://www.loc.gov/standards/iso639-2/">ISO 639 two-letter codes</a>
(e.g. Chinese is <samp>zh</samp>) but may also be
<samp>i-</samp> prefixed for official languages without
ISO639-2 values (e.g. <samp>i-cherokee</samp>) or
<samp>x-</samp> prefixed for non-standard private values (e.g.
<samp>x-klingon</samp>)
</aside>
</section>
<section id="css-lang" class="slide">
<h2>Applying per-language styles</h2>
<p>
CSS specifies the
<a href="https://developer.mozilla.org/en-US/docs/CSS/:lang">
<code>:lang</code>
</a>
pseudo-selector which allows your stylesheets to target specific
languages:
</p>
<code class="block">:lang(zh) { font-family: "Sim Sun"; }</code>
<p>
This is better than the older class or attribute selector
approach which we had to use when Internet Explorer prior to 8
was dominant:
</p>
<code class="block">[lang=zh] { font-family: "Sim Sun"; }</code>
<p>
<code>:lang()</code> uses the HTML hierarchy and falls back to
the base language, making it much easier to style complex HTML
like this without having to carefuly adjust your selectors'
specificity:
</p>
<code class="block">
<div lang="es"><br>
El Ejemplo:<br>
<blockquote lang="en-US"><br>
<q>My hovercraft is full of eels</q> is<br>
<q lang="is">Svifnökkvinn minn er fullur af álum</q> in Icelandic<br>
and <q lang="zh-yue">我隻氣墊船裝滿晒鱔</q> in Cantonese<br>
</blockquote><br>
</div>
</code>
</section>
<section id="directionality" class="slide">
<h2>Dealing with mixed LTR and RTL content</h2>
<p>
Text display can get complicated when you need to mix
left-to-right and right-to-left characters.
The W3 has a great example:
</p>
<blockquote class="long" cite="http://www.w3.org/TR/WCAG20-TECHS/H34#H34-examples">
<p>
This example shows an Arabic phrase in the middle of an
English sentence. The exclamation point is part of the
Arabic phrase and should appear on its left. Because it
is between an Arabic and Latin character and the
overall paragraph direction is <acronym
title="left-to-right">LTR</acronym>, the bidirectional
algorithm positions the exclamation mark to the right
of the Arabic phrase.
</p>
<p>
The title is <q lang="ar">مفتاح معايير الويب!</q> in Arabic.
</p>
</blockquote>
<div class="slide collapse-inactive">
<p>Unicode provides several characters to
<a href="http://unicode.org/reports/tr9/#Directional_Formatting_Codes">control the displayed text direction</a>.
These can be confusing because these characters do not
display visually but it's the best option when you want to
correct a non-HTML field by adding a
<code>LEFT-TO-RIGHT MARK</code> (<code>U+200E</code>)
or <code>RIGHT-TO-LEFT MARK</code> (<code>U+200F</code>)
– in our example above, we can add an RLM after the
exclamation point to tell the text layout engine that it
should be included in the RTL text:
</p>
<samp>
The title is <q lang="ar">مفتاح معايير الويب!</q> in Arabic.
</samp>
</div>
<div class="slide collapse-inactive">
<p>
HTML allows you to specify <code>dir="ltr"</code> or
<code>dir="rtl"</code>. The example above uses this markup:
<code><q lang="ar"></code>; this one uses
<code><q lang="ar" dir="rtl"></code>:
</p>
<samp>
The title is <q lang="ar" dir="rtl">مفتاح معايير الويب!</q> in Arabic.
</samp>
<p>
HTML also specifies the
<a href="https://developer.mozilla.org/en-US/docs/HTML/Element/bdo"><code>bdo</code></a>
tag which allows you to override direction if you were
otherwise going to add a semantically meaningless
<code>span</code> tag:
</p>
<samp>
The title is <q lang="ar"><bdo dir="rtl">مفتاح معايير الويب!</bdo></q> in Arabic.
</samp>
</div>
<div id="css-unicode-bidi-example" class="slide collapse-inactive">
CSS allows you to set
<a href="https://developer.mozilla.org/en-US/docs/CSS/unicode-bidi">
<code>direction</code>
</a>
and
<a href="https://developer.mozilla.org/en-US/docs/CSS/unicode-bidi">
<code>unicode-bidi</code>
</a>
which is particularly powerful with the
<a href="https://developer.mozilla.org/en-US/docs/CSS/:lang">
<code>:lang</code>
</a> pseudo-selector:
<code class="block">
:lang(ar) {
direction: rtl;
unicode-bidi: embed;
}
</code>
<samp>
The title is <q lang="ar" style="unicode-bidi: embed">مفتاح معايير الويب!</q> in Arabic.
</samp>
</div>
</section>
<section id="webfonts" class="slide">
<h2>Web Fonts</h2>
<p>
<a href="https://developer.mozilla.org/en-US/docs/CSS/@font-face">CSS3 @font-face</a>
is
<a href="http://caniuse.com/#feat=fontface">widely available</a>,
and there are now many webfont options available for
multi-lingual sites which don't want to use “Arial Unicode MS”
for everything. This is particularly powerful because browsers
won't download a webfont until it's actually needed and the
<a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#unicode-range-desc">unicode-range descriptor</a>
allows you to target character ranges to specify fonts for
particular languages or override specific characters (e.g.
low-quality numbers in a great Chinese font)
</p>
<pre><code>@font-face {
font-family: 'syriac_font';
src: url('../webfont/syriac/syriac-webfont.eot'); #IE fallback
src: local('Estrangelo Edessa'),
url('../webfont/syriac/syriac-webfont.eot') format('embedded-opentype'),
url('../webfont/syriac/syriac-webfont.woff') format('woff');
unicode-range: U+700-074f;
}
body {
font-family: sans-serif, 'syriac_font';
}</code></pre>
</section>
<section id="ruby" class="slide">
<h2>Ruby</h2>
<p>
Some Asian language have an annotation system for providing
pronunciation or other information which is displayed next to
the primary text:
<pre><ruby>攻殻<rp>（</rp><rt>こうかく</rt><rp>）</rp>機動隊<rp>（</rp><rt>きどうたい</rt><rp>）</rp></ruby></pre>
</p>
<p>
Most browsers have <a href="http://caniuse.com/#feat=ruby">some support for ruby</a>
but this varies and not all of the
<a href="http://www.w3.org/TR/css3-ruby/#ruby-def">CSS3 Ruby</a>
spec is available.
</p>
</section>
<section id="vertical-text" class="slide">
<h2>Vertical Text</h2>
<p>
Some languages should be written vertically rather than
horizontally. Support for this on the web has been challenging
for a long time – and this is an area where Internet Explorer
was years ahead, unfortunately using syntax which is not
supported by the draft W3
<a href="http://www.w3.org/TR/css3-writing-modes/">CSS Writing Modes Level 3</a>
specification.
</p>
<p>
As of September 2012 this is not supported at all by
Firefox but <code>writing-mode: vertical-lr</code> works in
Safari and Chrome when browser-prefixed. Until support matures,
be very careful about relying on this feature.
</p>
<figure class="center-block">
<figcaption class="center">
Mongolian text borrowed from a
<a href="http://www.w3.org/International/tests/html-css/vertical-text/results-vertical-text">W3 test</a>
</figcaption>
<blockquote class="long" lang="mn" style="max-height: 40%">
<p>ᠬᠤᠯᠤᠭᠠᠨᠠ ᠡᠨᠳᠡ ᠡᠨᠡ ᠭ᠋ᠠᠯ ᠴᠢᠷᠢᠭ ᠬᠠᠨᠠ</p>
<p>ᠤᠷᠲᠤ ᠡᠨᠳᠡ ᠡᠨᠡ ᠭ᠋ᠠᠯ ᠴᠢᠷᠢᠭ</p>
</blockquote>
</figure>
</section>
<section class="slide exit">
<nav>
<a href="index.html#agenda">Back to agenda</a>
</nav>
</section>
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
<!-- deck.status snippet -->
<p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
<script src="deck.js/jquery-1.7.2.min.js"></script>
<script src="deck.js/core/deck.core.js"></script>
<script src="deck.js/core/deck.core.js"></script>
<script src="deck.js/extensions/hash/deck.hash.js"></script>
<script src="deck.js/extensions/menu/deck.menu.js"></script>
<script src="deck.js/extensions/goto/deck.goto.js"></script>
<script src="deck.js/extensions/status/deck.status.js"></script>
<script src="deck.js/extensions/navigation/deck.navigation.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>