-
Notifications
You must be signed in to change notification settings - Fork 10
/
language-matrix.html
417 lines (383 loc) · 18.4 KB
/
language-matrix.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
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Language matrix</title>
<script src="language-matrix-data.js"> </script>
<link rel="stylesheet" href="matrix.css"/>
<style>
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 3em;
padding-top: 0;
}
#flexwrapper {
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
margin: 2em;
}
#flexwrapper div {
margin: 2em;
}
th {
text-align: end;
}
td {
text-align: center;
border-radius: 2px;
}
.na {
background-color: #7CFF7C;
background-color: green;
color: green;
/* color: #7CFF7C; */
}
.l3 {
background-color: green;
color: green;
}
.l2 {
background-color: #F4CB77;
background-color: yellow;
background-color: #00ff00;
color: #00ff00;
}
.l1 {
background-color: #FF9A00;
color: #FF9A00;
color: orange;
}
.l0 {
background-color: #ff0000;
color: #ff0000;
}
p {
margin: 0;
}
thead td {
text-align: start;
font-weight: bold;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
line-height: 1.5;
width: 20px;
text-align: end;
text-align: right;
vertical-align: bottom;
}
thead td div {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
height: 15em;
}
.sum {
border-right: 5px solid #0623ED;
width: 3em;
}
.future {
border: 1px dotted blue;
border-radius: 10px;
}
table {
margin:auto;
}
</style>
</head>
<body>
<header>
<nav id="topbar">
<div id="w3cIcon"><a href="https://www.w3.org/"><img src="https://www.w3.org/Icons/w3c_home" alt="W3C" height="48" width="72"></a></div>
<div id="banner"><a href="https://www.w3.org/International">
<p id="sitename">Internationalization (i18n) Activity</p>
<p id="subtitle">Making the World Wide Web worldwide!</p></a>
</div>
<br style="clear:both;">
<div id="sitelinks" class="noprint">
<a href="https://www.w3.org/International/technique-index" title="Learn techniques and requirements for internationalization.">Learn</a>
<a href="https://www.w3.org/International/resources" title="Find information on this site.">Find</a>
<a href="https://www.w3.org/International/participate" title="Participate in W3C Internationalization work.">Join</a>
<a href="https://www.w3.org/International/log/description" title="Follow the work at W3C Internationalization.">Follow</a>
<a href="https://www.w3.org/International/about" title="Get help from W3C Internationalization.">Contact</a> </div>
<div id="line"> </div>
</nav>
<h1>Internationalization support on the Web</h1>
</header>
<div id="flexwrapper">
<div id="key">
<h2>Key:</h2>
<p>
<span class="l3"> ■</span> <i class="highlight">3</i> All needs covered (ie. OK), or not applicable<br/>
<span class="l2"> ■</span> <i class="highlight">2</i> Basic needs covered, but work needed for advance publishing<br/>
<span class="l1"> ■</span> <i class="highlight">1</i> Can create interoperable web pages, but work still needed for basic features<br/>
<span class="l0"> ■</span> <i class="highlight">0</i> Something prevents interoperable or effective use of the language in webpages</p>
<p>* next to a language name indicates a tentative score, pending validation by experts</p>
</div>
<div id="resultsSummary">
<h2>Results:</h2>
<p>Number of languages listed: <strong><span id="totalScore"></span></strong></p>
<p><span class="l3"> ■</span> <strong><span id="level3"></span></strong> may be Ok, based on what information we have for them</p>
<p><span class="l2"> ■</span> <strong><span id="level2"></span></strong> need work for advanced publishing</p>
<p><span class="l1"> ■</span> <strong><span id="level1"></span></strong> need work for basic features</p>
<p><span class="l0"> ■</span> <strong><span id="level0"></span></strong> don't work on the Web</p>
<p><strong><span style="background-color:white; border:1px solid gray;">?</span> <span id="unknown"></span></strong> of cells still need investigation.</p>
</div>
</div>
<p>If a language has a link, click on any cell in that row to see more detail about why the cell was scored that way. An asterisk next to a language name indicates that the scores for that language are tentative, ie. our best guess pending thorough analysis and validation by experts representing the language user community. </p>
<p>A question mark indicates that we don't yet have a reasonable degree of confidence about level of the support for this aspect of the language. There may not be an issue, or there may be something that needs fixing which we are as yet unaware of.</p>
<table id="results">
<thead>
<tr id="table_headers">
<th scope="row">script</th>
<td>language</td>
<td>Level</td>
<td><div><abbr title="Character encodings">Encoding</abbr></div></td>
<td><a href="https://w3c.github.io/typography/#fonts"><abbr title="Fonts">Fonts</abbr></a></td>
<td><div><a href="https://w3c.github.io/typography/#font-style"><abbr title="font styling">Font styles</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#glyphs_diacritics"><abbr title="glyph controls">Glyph control</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#cursive"><abbr title="cursive text">Cursive text</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#transforming_characters"><abbr title="transforming characters">Char transforms</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#numbers"><abbr title="native numbers">Numbers & digits</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#graphemes"><abbr title="boundary selection">Boundaries & selection</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#quotations"><abbr title="Quotations">Quotation</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#letter_spacing"><abbr title="inline spacing">Inter-char spacing</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#ruby_annotation"><abbr title="ruby annotation">Ruby</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#text_decoration"><abbr title="text decoration">Text decoration</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#emphasis"><abbr title="emphasis">Emphasis & highlight</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#bidirectional_text_direction"><abbr title="bidirectional text">Bidi text</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#initial_letter"><abbr title="Other inline features">Other inline</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#line_breaking"><abbr title="line breaking">Line breaking</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#hyphenation"><abbr title="hyphenation">Hyphenation</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#justification"><abbr title="justification and alignment">Justification & alignment</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#counters"><abbr title="lists, counters, etc">Lists, counters</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#initial_letter"><abbr title="initial letter styling">Initial letter style</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#baselines_inline_alignment"><abbr title="baselines & inline alignment">Baselines, inline align</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#other_para_features"><abbr title="other paragraph features">Other paragraph</abbr></a></div></td>
<td><a href="https://w3c.github.io/typography/#bidi_layout">Bidi layout</a></td>
<td><div><a href="https://w3c.github.io/typography/#vertical_text"><abbr title="vertical text">Vertical text</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#notes_footnotes"><abbr title="notes, footnotes, etc">Notes, footnotes</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#page_numbering_running_headers"><abbr title="page numbering & running headers, etc">Page no.s, running heads</abbr></a></div></td>
<td><div><a href="https://w3c.github.io/typography/#more_page_layout_and_pagination"><abbr title="other page layout">Other pagination</abbr></a></div></td>
</tr>
</thead>
<tbody id="langData">
</tbody>
</table>
<p><em>Total number of languages in the table: <span id="langCount"> </span></em></p>
<h2>How to read the chart</h2>
<p>The chart is arranged by script. Note that some languages use more than one script, and so appear in more than one place in the chart. For each script, a list of languages appears in order of the highest to lowest number of speakers. </p>
<p> </p>
<p>The list currently targets some of the more common languages, or scripts that have important implications for general support. It is expected that the list will grow as data becomes available, and we welcome contributions for other languages from local experts.</p>
<p> </p>
<p>Each cell is the intersection of a language and a category of typographic features. The colours indicate what needs work, and whether the work is needed to bring the language to the next level. If no work is needed for a language, either because it is fully supported, or because that feature is not applicable, the dark green colour is used to indicate that no work is needed.</p>
<p> </p>
<p>An asterisk next to a language name indicates that the scores for that language are tentative, ie. our best guess pending thorough analysis and validation by experts representing the language user community. </p>
<p> </p>
<p>When a language name has a link, you can follow that link to find a draft report that gives details about work needed. That also needs validation and prioritization by experts if the language name has an asterisk.</p>
<p> </p>
<p>Click the feature categories along the top of the chart to get an idea of what kind of typographic features are included in that category. You are taken to the document <a href="https://w3c.github.io/typography/">International Text Layout and Typography Index</a>. From there you can follow links to current requirements, requests for information, spec wording, and issues related to that group of features.</p>
<p> </p>
<p>What qualifies a cell for a score of 3 (OK)? A cell can be scored as OK if the feature in question is specified in an appropriate specification, and is supported by user agents. For the latter, a specification that is in CR or later and has two implementations in 'major' browsers will count. This means that the feature may not be supported in all browsers yet. (At some point in the future we may try to distinguish, visually, whether support is available in a specification but still pending in browsers.)</p>
<p> </p>
<p>The colour of the third column from the left is the lowest score of any of the cells to its right, and represents the level for the language as a whole. The numeric score in that column is a non-scientific way of hinting at the amount of work to be done to get the language level to OK. (We may change the algorithm used for that at some future point.)</p>
<p> </p>
<h2>How to help</h2>
<p>We are actively looking for people and organizations that can help us complete the missing information in the matrix, and compile requirements for spec and browser developers. The following links may be helpful.</p>
<p> </p>
<p><a href="https://github.com/w3c/i18n-discuss/wiki/Analysing-support-for-text-layout-on-the-Web">Analysing support for text layout on the Web</a></p>
<p><a href="https://github.com/w3c/typography/wiki/Setting-up-a-Gap-Analysis-Project">Setting up a Gap Analysis Project</a></p>
<p><a href="https://www.w3.org/International/sponsorship/">The W3C Internationalization Sponsorship Program</a></p>
<hr/>
<p><em><a href="https://github.com/w3c/typography/tree/gh-pages/gap-analysis">Raise an issue or see the source code</a>.</em></p>
</body>
<script>
// add rows to table from .js file
var table = ''
for (let s=0;s<langData.length;s++) {
for (let l=0;l<langData[s].languages.length;l++){
var cLang = langData[s].languages[l]
table += '<tr'
if (cLang.url) table += ' data-url="'+cLang.url+'"'
table += '>\n'
if (l===0) table += '<th scope="row">'+langData[s].script+'</th>'
else table += '<th> </td>'
table += '<td class="language'
if (cLang.tentative) table += ' tentative'
table += '">'
if (cLang.url) table += '<a target="details" href="'+cLang.url+'">'
table += cLang.lang
if (cLang.url) table += '</a>'
table += '</td>'
table += '<td class="sum"> </td>'
table += '<td>'+cLang.encoding+'</td>'
table += '<td>'+cLang.fonts+'</td>'
table += '<td>'+cLang.fontstyle+'</td>'
table += '<td>'+cLang.glyphcontrol+'</td>'
table += '<td>'+cLang.cursive+'</td>'
table += '<td>'+cLang.transforms+'</td>'
table += '<td>'+cLang.digits+'</td>'
table += '<td>'+cLang.boundaries+'</td>'
table += '<td>'+cLang.quotations+'</td>'
table += '<td>'+cLang.spacing+'</td>'
table += '<td>'+cLang.ruby+'</td>'
table += '<td>'+cLang.textdecor+'</td>'
table += '<td>'+cLang.emphasis+'</td>'
table += '<td>'+cLang.bidi+'</td>'
table += '<td>'+cLang.otherinline+'</td>'
table += '<td>'+cLang.linebreak+'</td>'
table += '<td>'+cLang.hyphenation+'</td>'
table += '<td>'+cLang.justification+'</td>'
table += '<td>'+cLang.counters+'</td>'
table += '<td>'+cLang.initialletter+'</td>'
table += '<td>'+cLang.baselines+'</td>'
table += '<td>'+cLang.otherpara+'</td>'
table += '<td>'+cLang.bidilayout+'</td>'
table += '<td>'+cLang.vertical+'</td>'
table += '<td class="future">'+cLang.notes+'</td>'
table += '<td class="future">'+cLang.pagehead+'</td>'
table += '<td class="future">'+cLang.otherpage+'</td>'
table += '</tr>\n'
}
}
document.getElementById('langData').innerHTML = table
// add colours to cells & identify tentative scores
var tds = document.querySelectorAll('td')
for (let i=0;i<tds.length;i++) {
if (tds[i].textContent === '-') tds[i].classList.add('na')
if (tds[i].textContent === '3') tds[i].classList.add('l3')
if (tds[i].textContent === '2') tds[i].classList.add('l2')
if (tds[i].textContent === '1') tds[i].classList.add('l1')
if (tds[i].textContent === '0') tds[i].classList.add('l0')
if (tds[i].textContent == '') tds[i].textContent = '?'
if (tds[i].classList.contains('tentative')) tds[i].innerHTML += '*'
}
// get overall scores
/*document.getElementById('totalScore').textContent = tds.length
var unknown = level0 = level1 = level2 = level3 = 0
for (let i=0;i<tds.length;i++) {
switch (tds[i].textContent) {
case '-': ++level3; break;
case '3': ++level3; break;
case '2': ++level2; break;
case '1': ++level1; break;
case '0': ++level0; break;
case '?': ++unknown; break;
}
}
document.getElementById('level3').textContent = level3
document.getElementById('level2').textContent = level2
document.getElementById('level1').textContent = level1
document.getElementById('level0').textContent = level0
document.getElementById('unknown').textContent = unknown
*/
// calculate a score for each language
var lowest, lowestClass
var rows = document.querySelectorAll('.sum')
for (let i=0;i<rows.length;i++) {
tds = rows[i].parentNode.querySelectorAll('td')
score = 0
count = 0
for (let c=0;c<tds.length;c++) {
if (tds[c].textContent === '3' || tds[c].textContent === '-') {
score += 3; count++ }
if (tds[c].textContent === '2') {
score += 2; count++ }
if (tds[c].textContent === '1') {
score += 1; count++ }
}
rows[i].textContent = (Math.round(((score/count)-2)*100)/100)
//rows[i].classList.add(lowestClass)
}
// add number of languages below table
document.getElementById('langCount').textContent = document.querySelectorAll('.language').length
// calculate the level for each language
var lowest, lowestClass
var rows = document.querySelectorAll('.sum')
for (let i=0;i<rows.length;i++) {
tds = rows[i].parentNode.querySelectorAll('td')
lowestClass = 'unknown'
lowest = 3
for (let c=0;c<tds.length;c++) {
let ccell = parseInt(tds[c].textContent)
if (ccell < lowest && tds[c].className !== 'sum') lowest = ccell
//console.log(i,tds[c].textContent,ccell,lowest)
}
lowestClass = 'l'+lowest
//rows[i].textContent = lowest
rows[i].classList.add(lowestClass)
rows[i].style.color = 'black'
}
// get overall scores
tds = document.querySelectorAll('.sum')
console.log(tds.length)
document.getElementById('totalScore').textContent = tds.length
var unknown = level0 = level1 = level2 = level3 = 0
for (let i=0;i<tds.length;i++) {
if (tds[i].classList.contains('na')) ++level3
else if (tds[i].classList.contains('l3')) ++level3
else if (tds[i].classList.contains('l2')) ++level2
else if (tds[i].classList.contains('l1')) ++level1
else if (tds[i].classList.contains('l0')) ++level0
}
document.getElementById('level3').textContent = level3
document.getElementById('level2').textContent = level2
document.getElementById('level1').textContent = level1
document.getElementById('level0').textContent = level0
document.getElementById('unknown').textContent = unknown
// get percentage of unknown cells
tds = document.querySelectorAll('td')
var unknown = 0
for (let i=0;i<tds.length;i++) {
if (tds[i].textContent === '?') unknown++
}
document.getElementById('unknown').textContent = Math.floor((unknown*100)/tds.length)+'%'
// array of ids for links from cells
idlinks = [
'',
'encoding',
'fonts',
'fontstyle',
'glyphs',
'cursive',
'transforms',
'numbers',
'boundaries',
'quotations',
'spacing',
'ruby',
'textdecoration',
'emphasis',
'bidi',
'otherinline',
'linebreak',
'hyphenation',
'justification',
'counters',
'initialletter',
'baselines',
'otherpara',
'bidilayout',
'vertical',
'notes',
'pageheaders',
'otherpage',
]
// add titles and links for each colored cell
rows = document.querySelectorAll('.sum')
var headers = document.getElementById('table_headers').querySelectorAll('td')
for (let i=0;i<rows.length;i++) {
tds = rows[i].parentNode.querySelectorAll('td')
for (let c=0;c<tds.length;c++) {
tds[c].title = headers[c].textContent
if (tds[c].parentNode.dataset.url && ! tds[c].classList.contains('language')) {
tds[c].addEventListener('click', function(evt) {
details = window.open(evt.target.parentNode.dataset.url+'#'+idlinks[c-1], 'details'); details.focus();
console.log(evt.target.parentNode.dataset.url, idlinks[c-1], evt)
})
tds[c].style.cursor = 'pointer'
}
}
}
</script>
</html>