-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathreadme.html
162 lines (156 loc) · 6.42 KB
/
readme.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title data-trans="title">jsI18n - Readme</title> <!-- Ignored by IE -->
<script src="jsi18n.js"></script>
<script src="sv.js"></script>
<script src="en.js"></script>
<script type="text/javascript">
//Changes locale
function changeLocale(locale)
{
jsI18n.setLocale(locale)
jsI18n.processPage()
}
</script>
<style type="text/css">
body {max-width:42em}
dt {font-weight:bold}
dd {margin-top:0.25em; margin-bottom:0.25em}
</style>
</head>
<body onload="jsI18n.processPage()">
<h1>jsI18n</h1>
<p>
<strong><span data-trans="change-lang">Change language:</span></strong>
<a href="readme.html">en</a> <!-- Entire reload required -->
<a href="javascript:changeLocale('sv')">sv</a>
</p>
<p data-trans="intro">
jsI18n is a simple javascript library for putting I18n on the client side.
</p>
<h2 data-trans="howto-html">How do I use it for my HTML?</h2>
<p data-trans="howto-html-1">
It's simple. Just put in a reference to "jsi18n.js" and your locale files,
and add the <em>data-trans</em> attribute to the elements whose contents
you want to translate, like this:
</p>
<p>
<div <strong>data-trans="cat"</strong>>Default value<div>
</p>
<p data-trans="howto-html-2">
Then call <code>jsI18n.processPage</code> after the page has finished
loading. A simple way to do this is to put the code in the
<em>onload </em>event of the body tag.
</p>
<p data-trans="howto-html-3">
This will look up the relevant text for the keyword "cat" in the
translation table for the current locale and replace the contents
of the tag with that text. If the keyword is undefined, or if the
current locale is not set, the default value (original content) will
be used.
</p>
<p data-trans="howto-html-4">
To get a full example, check out the source of this readme!
</p>
<h3 data-trans="trans-attr">Translating attributes</h3>
<p data-trans="trans-attr-1">
Sometimes you want to translate element attributes,
such as the <em>alt</em> and <em>title</em> attributes for images or
the <em>value</em> attribute for input elements. The proper way to do
this is to specify <em>attribute_name</em>=<em>key</em> in the
<em>data-trans</em> attribute. Multiple attribute translations can
be specified by separating the assignments by a semicolon:
</p>
<code>
<img src="..." alt="myalt" value="myvalue" data-trans="alt=altkey;value=valkey"/>
</code>
<p data-trans="trans-attr-2">
This works for any kind of element, not just input and img elements.
<br/><br/>
<strong>Important!</strong> Using this notation, the content of the
element is translated by specifying <code>html=key</code> in
<em>data-trans</em>.
</p>
<h2 data-trans="howto-js">How do I use it for my javascript?</h2>
<p>
<code>
var cat = jsI18n.translate("cat") <br/>
cat == jsI18n.t("cat") //Short form
</code>
</p>
<h2 data-trans="howto-change-locale">How do I change the current locale?</h2>
<p data-trans="change-locale-content">
Just call <code>jsI18n.setLocale(locale)</code>. It is up to you how to
retrieve the locale value.
</p>
<h2 data-trans="locale-files">What about the locale files?</h2>
<p data-trans="locale-files-1">
The locale files are just javascript files that call
the function <code>jsI18n.addLocale(locale, translations)</code>,
where locale is a string used as an identifier, and translations
is an associative array mapping keys to actual translations.
</p>
<p data-trans="locale-files-2">
So, using our cat example we would put the following in sv.js:
</p>
<p>
<code>
var translations = {"cat":"Katt", "dog":"Hund"}
<br/><br/>
jsI18n.addLocale("sv", translations")
</code>
</p>
<p data-trans="locale-files-3">
<strong>Important:</strong>Make sure you include your locale files into
your HTML <em>after</em> you have included "jsi18n.js".
</p>
<h2 data-trans="pros-cons">Pros and Cons</h2>
<p data-trans="pros-cons-1">
There are a few things you should think about before using this approach
for internationalization.
</p>
<dl>
<dt data-trans="js-turned-off">What if javascript is turned off?</dt>
<dd data-trans="js-turned-off-1">
If your site depends on JS anyway, this does not matter as much
as you have probably thought about it anyway.<br/><br/>
If it doesn't, using jsI18n simply means your site will only
be available in the default locale (as the default text will be used).
</dd>
<dt data-trans="slower-download">Slower page download</dt>
<dd data-trans="slower-download-1">
Using jsI18n means that the client will have to download (at least)
one additional file. If your site is very big, your translation files
will likely be so too, which will make page download slower.
</dd>
</dl>
<div data-trans="pros-cons-2">
With the above (possible) limitations, why use jsI18n at all?
</div>
<dl>
<dt data-trans="no-sss">No server side scripting required</dt>
<dd data-trans="no-sss-1">
If you do not need server side scripting, and don't want
to deal with multiple HTML pages for each locale, jsI18n
is a nice solution.
</dd>
<dt data-trans="simple">It's simple and elegant!</dt>
<dd data-trans="simple-1">
With jsI18n it is simple to add new locales and change
translations without breaking markup. Additionally, jsI18n
does not require any hacks, its just natural JS and HTML.
</dd>
</dl>
<div id="process-node">
<h2 data-trans="process-node">Translating individual DOM nodes</h2>
<p data-trans="process-node-1">
You can translate individual nodes (parts of the page) by calling
<code>jsI18n.processNode(node)</code>, e.g.
<code>jsI18n.processNode(document.getElementById('to_translate'))</code>.
<a href="javascript:jsI18n.setLocale('sv'); jsI18n.processNode(document.getElementById('process-node'))">Test it!</a>
</p>
</div>
</body>
</html>