CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Language matrix</title> <script src="language-matrix-data/language-matrix-data.js"> </script> <link rel="stylesheet" href="language-matrix-data/matrix.css"/> <script> var f = { } // AUTHORS should fill in these assignments: f.directory = 'getting-started'+'/'; // the path to this file, not including /International or the file name f.filename = 'contentdev'; // the file name WITHOUT extensions f.authors = 'Richard Ishida, W3C'; // author(s) and affiliations f.previousauthors = ''; // as above f.modifiers = ''; // people making substantive changes, and their affiliation f.searchString = 'level2-contentdev'; // blog search string - usually the filename without extensions f.firstPubDate = '2017-08-07'; // date of the first publication of the document (after review) f.lastSubstUpdate = { date:'2017-08-07', time:'12:18'} // date and time of latest substantive changes to this document f.status = 'notreviewed'; // should be one of draft, review, published, notreviewed or obsolete f.path = '../../' // what you need to prepend to a URL to get to the /International directory // AUTHORS AND TRANSLATORS should fill in these assignments: f.thisVersion = { date:'2017-08-07', time:'12:18'} // date and time of latest edits to this document/translation f.contributors = ''; // people providing useful contributions or feedback during review or at other times // also make sure that the lang attribute on the html tag is correct! // TRANSLATORS should fill in these assignments: f.translators = 'xxxNAME, ORG'; // translator(s) and their affiliation - a elements allowed, but use double quotes for attributes f.breadcrumb = ''; f.additionalLinks = '' </script> <script src="language-matrix-data/translations.js"> </script> <script src="../../i18n-drafts/javascript/doc-structure/article-dt.js"> </script> <script src="../../i18n-drafts/javascript/boilerplate-text/boilerplate-en.js"></script> <script src="../../i18n-drafts/javascript/doc-structure/sitepage-2022.js"> </script> <script src="../../i18n-drafts/javascript/articletoc-2022.js"></script> <link rel="stylesheet" href="../../i18n-drafts/style/sitepage-2022.css" /> <link rel="stylesheet" href="language-matrix-data/local.css" /> <link rel="copyright" href="#copyright"/>  <style> #table_headers a, #table_headers a:visited { color: #444; font-weight: bold; } </style> </head> <body> <header> <nav id="mainNavigation"></nav><script>document.getElementById('mainNavigation').innerHTML = mainNavigation</script> </header> <h1>Language matrix<br> <span style="font-size: 80%; font-style: italic;">International typography on the Web</span> </h1> <section id="sidebarExtras"> </section> <section> <p class="intro">Languages and writing systems have varying typographic conventions, and users and content authors expect local conventions to be supported on the Web and in eBooks. This page provides a ‘heat-map’ indicating the degree to which missing support for local features impacts use of the Web. Viewed as a whole, the table gives an idea of the amount of work still to be done. Dark green means there's no problem; red means that, currently, issues with this feature make the language very difficult or impossible to use.</p> <p class="intro">Across the top are feature categories; down the side are languages, listed by script. </p> <p class="intro">For the <span id="langCount"> </span> languages currently listed, we see the following problem areas. This page is updated as information becomes available.</p> <div id="resultsSummary">  <p><span class="l2"> ■</span> <strong><span id="level2"></span></strong> languages need work for advanced publishing</p> <p><span class="l1"> ■</span> <strong><span id="level1"></span></strong> languages need work for basic features</p> <p><span class="l0"> ■</span> <strong><span id="level0"></span></strong> languages don't work well on the Web</p> <p><span style="background-color:white; border:1px solid gray;">?</span> <strong><span id="unknown"></span></strong> of cells still need investigation.</p> </div> </section> <div id="bodycontent" style="clear: both;"> <section id="reference"> <h2>The matrix</h2> <p>Where a language name has a link, you can click on any cell in that row for more detailed information.</p> <table id="results"> <thead> <tr id="table_headers"> <th scope="row">script</th> <th>language</th> <td>summary</td> <td><div><a href="https://w3c.github.io/typography/#vertical_text">Vertical text</a></div></td> <td><div><a href="https://w3c.github.io/typography/#bidi_text">Bidirectional text</a></div></td> <td><div><a href="https://w3c.github.io/typography/#fonts">Fonts & font styles</a></div></td> <td><div><abbr title="Letterform slopes, weights, & italics."><a href="https://w3c.github.io/typography/#letterforms">Letterforms</a></abbr></div></td> <td><div><abbr title="Context-based shaping & positioning"><a href="https://w3c.github.io/typography/#glyphs">Shape & position</a></abbr></div></td> <td><div><a href="https://w3c.github.io/typography/#cursive">Cursive text</a></div></td> <td><div><abbr title="Case & other character transforms"><a href="https://w3c.github.io/typography/#transforms">Transforms</a></abbr></div></td> <td class="newSection"><div><abbr title="Characters & encodings"><a href="https://w3c.github.io/typography/#encoding">Characters </a></abbr></div></td> <td><div><abbr title="Grapheme/word segmentation & selection"><a href="https://w3c.github.io/typography/#segmentation">Segmentation</a></abbr></div></td> <td><div><abbr title="Phrase & section boundaries"><a href="https://w3c.github.io/typography/#punctuation_etc">Phrase/section</a></abbr></div></td> <td><div><abbr title="Quotations & citations"><a href="https://w3c.github.io/typography/#quotations">Quotations</a></abbr></div></td> <td><div><abbr title="Emphasis & highlighting"><a href="https://w3c.github.io/typography/#emphasis">Emphasis</a></abbr></div></td> <td><div><abbr title="Abbreviation, ellipsis, & repetition"><a href="https://w3c.github.io/typography/#abbrev">Abbreviation etc.</a></abbr></div></td> <td><div><abbr title="Inline notes & annotations"><a href="https://w3c.github.io/typography/#inline_notes">Inline annotations</a></abbr></div></td> <td><div><abbr title="Text decoration & other inline features"><a href="https://w3c.github.io/typography/#text_decoration">Text decoration</a></abbr></div></td> <td><div><abbr title="Data formats & numbers"><a href="https://w3c.github.io/typography/#data_formats">Data formats</a></abbr></div></td> <td class="newSection"><div><abbr title="Line breaking & hyphenation"><a href="https://w3c.github.io/typography/#line_breaking">Line breaking</a></abbr></div></td> <td><div><abbr title="Text alignment & justification"><a href="https://w3c.github.io/typography/#justification">Align, justify, …</a></abbr></div></td> <td><div><abbr title="Text spacing"><a href="https://w3c.github.io/typography/#spacing">Text spacing</a></abbr></div></td> <td><div><abbr title="Baselines, line height, etc."><a href="https://w3c.github.io/typography/#baselines">Baselines</a></abbr></div></td> <td><div><abbr title="Lists, counters, etc"><a href="https://w3c.github.io/typography/#lists">Lists, counters</a></abbr></div></td> <td><div><a href="https://w3c.github.io/typography/#initials">Styling initials</a></div></td> <td class="newSection"><div><abbr title="General page layout & progression"><a href="https://w3c.github.io/typography/#page_layout">Page layout</a></abbr></div></td> <td><div><abbr title="Grids & tables"><a href="https://w3c.github.io/typography/#grids_tables">Grids & tables</a></abbr></div></td> <td><div><abbr title="Footnotes, endnotes, etc"><a href="https://w3c.github.io/typography/#footnotes_etc">Footnotes, …</a></abbr></div></td> <td><div><abbr title="Page headers, footers, etc"><a href="https://w3c.github.io/typography/#headers_footers">Headers, footers, …</a></abbr></div></td> <td><div><abbr title="Forms & user interaction"><a href="https://w3c.github.io/typography/#interaction">Forms, interaction</a></abbr></div></td> </tr> </thead> <tbody id="langData"> </tbody> </table> </section> <section id="colors"> <h2>Color key</h2> <div id="key"> <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> </div> <p>An asterisk next to a language name indicates tentative coloring, based on set of initial expectations, but it is very possible that the colors will change after further investigation.</p> <p>A language name followed by † indicates that experts are currently investigating issues and developing the gap analysis. In this case, the coloring is expected to be more reliable, though may still change.</p> <p>Whatever the current status of a language, a cell that is currently colored green may change to another colour at a later date if a previously-overlooked issue is discovered.</p> </section> <section id="pipeline"> <h2>Gap-analysis pipeline</h2> <p>The chart at the following URL shows what gaps have been discovered so far, and indicates the resolution status for each of those gaps. The columns of the pipeline chart show which gaps have been reported to spec developers, which have been reported to browser implementers, and which have been successfully resolved.</p> <p style="text-align: center; font-size: 1.2em;"><a href="https://github.com/orgs/w3c/projects/95/views/1">Gap-analysis Pipeline</a></p> <p>The pipeline is regularly updated. If the same gap has been reported for multiple languages, only one card appears in the pipeline, however labels indicate the languages for which the gap was reported.</p> </section> <section id="howto"> <h2>Detailed information about the chart</h2> <p>The colour to the left of the language is the lowest score of any of the cells to its right, and represents the level for the language as a whole. The column immediately to the right of the language name graphically summarises the available data for that language (by reordering the squares in the main part of the table).</p> <p>A question mark indicates that we don't yet have a reasonable degree of confidence about level of 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> <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>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. Some less common languages are already represented, sometimes because they present features that need to be taken into account while designing the overall technological architecture, other times simply because we have information about them and including them helps the local community ensure the survival of their language on the Web.</p> <p>Each cell is the intersection of a language and an aspect of language enablement. 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>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>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>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/" style="font-size: 120%;">Language enablement 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>The column with the title Page Layout and the two columns to its right all relate to rendering paged media. In the general case, various paged media features are still not widely available on the Web; however, these columns are particularly focused on whether there are language-specific adaptations of the general approach which need attention.</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> </section> <section id="help"> <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> <ul> <li><a href="https://www.w3.org/International/i18n-drafts/pages/language_framework_overview" style="font-size: 120%;">Analysing support for text layout on the Web</a> <br> An overview of the various parts of the Language Enablement framework in which the work is done.</li> <li><a href="https://www.w3.org/International/typography/" style="font-size: 120%;">Language Enablement Index</a><br> A single location to find information related to Language Enablement. </li> <li><a href="https://www.w3.org/International/i18n-drafts/pages/languagedev_participation" style="font-size: 120%;">How to contribute to an Language Enablement group</a><br> Pointers for getting involved in the work. </li> <li style="margin-top: 1em;"><a href="https://www.w3.org/International/sponsorship/">The W3C Internationalization Sponsorship Program</a></li> <li><a href="https://github.com/w3c/typography/wiki/Setting-up-a-Gap-Analysis-Project">Setting up a Gap Analysis Project</a></li> <li><a href="https://github.com/w3c/typography/tree/gh-pages/gap-analysis">Raise an issue or see the source code</a></li> <li><a href="https://www.w3.org/International/layout" rel="nofollow">Overview of language enablement work in progress</a></li> </ul> </section> </div> <br style="clear: both;" /> <footer id="thefooter"></footer><script>document.getElementById('thefooter').innerHTML = g.bottomOfPage</script> <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+'" id="'+cLang.lang.replace(/ /g,'').toLowerCase()+'"' table += '>\n' if (l===0) table += '<th scope="row">'+langData[s].script+'</th>' else table += '<th> </td>' table += '<td class="language' if (cLang.tentative === true) table += ' tentative' else if (cLang.tentative === false) table += ' inprogress' // items not tentative or in progress should be labelled '', and get no mark 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.vertical_text+'</td>' table += '<td>'+cLang.bidi_text+'</td>' table += '<td class="newSection">'+cLang.fonts+'</td>' table += '<td>'+cLang.glyphs+'</td>' table += '<td>'+cLang.letterforms+'</td>' table += '<td>'+cLang.cursive+'</td>' table += '<td>'+cLang.transforms+'</td>' table += '<td class="newSection">'+cLang.encoding+'</td>' table += '<td>'+cLang.segmentation+'</td>' table += '<td class="newSection">'+cLang.punctuation_etc+'</td>' table += '<td>'+cLang.quotations+'</td>' table += '<td>'+cLang.emphasis+'</td>' table += '<td>'+cLang.abbrev+'</td>' table += '<td>'+cLang.inline_notes+'</td>' table += '<td>'+cLang.text_decoration+'</td>' table += '<td>'+cLang.data_formats+'</td>' table += '<td class="newSection">'+cLang.line_breaking+'</td>' table += '<td>'+cLang.justification+'</td>' table += '<td>'+cLang.spacing+'</td>' table += '<td>'+cLang.baselines+'</td>' table += '<td>'+cLang.lists+'</td>' table += '<td>'+cLang.initials+'</td>' table += '<td class="newSection">'+cLang.page_layout+'</td>' table += '<td>'+cLang.grids_tables+'</td>' table += '<td>'+cLang.footnotes_etc+'</td>' table += '<td>'+cLang.headers_footers+'</td>' table += '<td>'+cLang.interaction+'</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 += ' *' if (tds[i].classList.contains('inprogress')) tds[i].innerHTML += ' <sup>†</sup>' }//‡ // 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') if (rows[i].parentNode.id) cLang = rows[i].parentNode.id else cLang = '' level0 = level1 = level2 = level3 = levelq = 0 for (let c=0;c<tds.length;c++) { if (tds[c].textContent === '3' || tds[c].textContent === '-') level3+=3 else if (tds[c].textContent === '2') level2+=3 else if (tds[c].textContent === '1') level1+=3 else if (tds[c].textContent === '0') level0+=3 else levelq += 3 } temp = '' if (level0) temp += '<span class="guage0" style="width:'+level0+'px;"></span>' if (level1) temp += '<span class="guage1" style="width:'+level1+'px;"></span>' if (level2) temp += '<span class="guage2" style="width:'+level2+'px;"></span>' if (level3) temp += '<span class="guage3" style="width:'+level3+'px;"></span>' if (levelq) temp += '<span class="guageq" style="width:'+levelq+'px;"></span>' temp += '' // calculate the lowest level for this language lowestClass = 'unknown' if (level0) lowest = lowestClass = '0' else if (level1) lowest = lowestClass = '1' else if (level2) lowest = lowestClass = '2' else if (level3) lowest = lowestClass = '3' //temp = '<span class="lowest '+lowestClass+'">'+lowestClass+'</span> '+temp rows[i].parentNode.querySelector('.language').classList.add('low'+lowestClass) rows[i].innerHTML = temp } // add number of languages below table document.getElementById('langCount').textContent = document.querySelectorAll('.language').length // get overall scores tds = document.querySelectorAll('.language') 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('low3')) ++level3 else if (tds[i].classList.contains('low2')) ++level2 else if (tds[i].classList.contains('low1')) ++level1 else if (tds[i].classList.contains('low0')) ++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 = [ '', 'vertical_text', 'bidi_text', 'fonts', 'glyphs', 'letterforms', 'cursive', 'transforms', 'encoding', 'segmentation', 'punctuation_etc', 'quotations', 'emphasis', 'abbrev', 'inline_notes', 'text_decoration', 'data_formats', 'line_breaking', 'justification', 'spacing', 'baselines', 'lists', 'initials', 'page_layout', 'grids_tables', 'footnotes_etc', 'headers_footers', 'interaction', ] // array of titles for cells titlelinks = [ '', '', 'Vertical text', 'Bidirectional text', 'Fonts', 'Context-based shaping & positioning', 'Letterform slopes, weights, & italics.', 'Cursive text', 'Case & other character transforms', 'Characters & encoding', 'Grapheme/word segmentation & selection', 'Phrase & section boundaries', 'Quotations & citations', 'Emphasis & highlighting', 'Abbreviation, ellipsis & repetition', 'Inline notes & annotations', 'Text decoration & other inline features', 'Data formats & numbers', 'Line breaking & hyphenation', 'Text alignment & justification', 'Text spacing', 'Baselines, line-height, etc', 'Lists, counters, etc', 'Styling initials', 'General page layout & progression', 'Grids & tables', 'Footnotes, endnotes, etc', 'Page headers, footers, etc', 'Forms & user interaction', ] // 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 tds[c].title = titlelinks[c] 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></body> </html>