CINXE.COM

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="generator" content="ReSpec 35.1.2"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> dfn{cursor:pointer} .dfn-panel{position:absolute;z-index:35;min-width:300px;max-width:500px;padding:.5em .75em;margin-top:.6em;font-family:"Helvetica Neue",sans-serif;font-size:small;background:#fff;background:var(--indextable-hover-bg,#fff);color:#000;color:var(--text,#000);box-shadow:0 1em 3em -.4em rgba(0,0,0,.3),0 0 1px 1px rgba(0,0,0,.05);box-shadow:0 1em 3em -.4em var(--tocsidebar-shadow,rgba(0,0,0,.3)),0 0 1px 1px var(--tocsidebar-shadow,rgba(0,0,0,.05));border-radius:2px} .dfn-panel:not(.docked)>.caret{position:absolute;top:-9px} .dfn-panel:not(.docked)>.caret::after,.dfn-panel:not(.docked)>.caret::before{content:"";position:absolute;border:10px solid transparent;border-top:0;border-bottom:10px solid #fff;border-bottom-color:var(--indextable-hover-bg,#fff);top:0} .dfn-panel:not(.docked)>.caret::before{border-bottom:9px solid #a2a9b1;border-bottom-color:var(--indextable-hover-bg,#a2a9b1)} .dfn-panel *{margin:0} .dfn-panel b{display:block;color:#000;color:var(--text,#000);margin-top:.25em} .dfn-panel ul a[href]{color:#333;color:var(--text,#333)} .dfn-panel>div{display:flex} .dfn-panel a.self-link{font-weight:700;margin-right:auto} .dfn-panel .marker{padding:.1em;margin-left:.5em;border-radius:.2em;text-align:center;white-space:nowrap;font-size:90%;color:#040b1c} .dfn-panel .marker.dfn-exported{background:#d1edfd;box-shadow:0 0 0 .125em #1ca5f940} .dfn-panel .marker.idl-block{background:#8ccbf2;box-shadow:0 0 0 .125em #0670b161} .dfn-panel a:not(:hover){text-decoration:none!important;border-bottom:none!important} .dfn-panel a[href]:hover{border-bottom-width:1px} .dfn-panel ul{padding:0} .dfn-panel li{margin-left:1em} .dfn-panel.docked{position:fixed;left:.5em;top:unset;bottom:2em;margin:0 auto;max-width:calc(100vw - .75em * 2 - .5em - .2em * 2);max-height:30vh;overflow:auto} </style> <title>N’Ko Gap Analysis</title> <style> body { font-size: 15px; } h2 { margin-left: 0; margin-top: 8em; } h3 { margin-top: 3em; } h3 a { color: #006; } h3 a:link { color: #006; } h3 a:active { color: #006; } h3 a:visited { color: #006; } h4 { margin-left: 0; font-size:1.1rem !important; color: brown; } h5 { margin-top: 1rem !important; border-block-end:1px solid #ccc !important; width:100% !important; font-style:normal !important; } .status_prompt { font-style: italic; color: #aaa; font-size: 90%; margin-bottom: 4em; } .issueLink { font-weight:bold; padding:.5rem 1rem; border-radius:.2rem; } .ok { border-left: 5em solid green; padding-left: 2em; } .ok:after { content: 'OK'; color: gray; font-weight: normal; font-size: 120%; } .okIssue { background-color: green; color:antiquewhite; } .issueLink.okIssue:visited, .issueLink.basicIssue:link { color: antiquewhite; } .na { border-left: 5em solid green; padding-left: 2em; } .na:after { content: 'Not applicable'; color: gray; font-weight: normal; font-size: 120%; } .naIssue { background-color: green; color:antiquewhite; } .issueLink.naIssue:visited, .issueLink.basicIssue:link { color: antiquewhite; } .advanced { border-left: 5em solid #0f0; padding-left: 2em; } .advanced { border-left: 5em solid moccasin; padding-left: 2em; } .advanced:after { content: 'Needs work for advanced level support.'; color: gray; font-weight: normal; font-size: 120%; } .advancedIssue { background-color: moccasin; color:chocolate; } .issueLink.advancedIssue:visited, .issueLink.basicIssue:link { color: chocolate; } .basic { border-left: 5em solid orange; padding-left: 2em; } .basic:after { content: 'Needs work for basic styling support.'; color: gray; font-weight: normal; font-size: 120%; } .basicIssue { background-color: orange; color:antiquewhite; } .issueLink.basicIssue:visited, .issueLink.basicIssue:link { color: antiquewhite; } .broken { border-left: 5em solid red; padding-left: 2em; } .broken:after { content: 'Basic display issues that prevent effective use on the Web for this language.'; color: gray; font-weight: normal; font-size: 120%; } .brokenIssue { background-color: red; color:antiquewhite; } .issueLink.brokenIssue:visited, .issueLink.basicIssue:link { color: antiquewhite; } .tbd { border-left: 5em solid #eee; padding-left: 2em; } .tbd:after { content: 'Needs research.'; color: gray; font-weight: normal; font-size: 120%; } .pass { background-color:greenyellow; padding: 0 4px; border-radius: 2px; } .fail { padding: 0 4px; color: white; background-color: crimson; border-radius: 2px; } .partial { background-color: orange; padding: 0 4px; color: white; } .reviewme:after { content: "Needs review"; margin-left: 2em; background-color: crimson; color: white; font-size: 80%; padding: .2em .4em; border-radius: .2em; } .subhead { display: block; font-weight: bold; } .ghLink { margin-block-start: 0; float: right; font-size: 90%; } .languageData { margin-block-start: -.2rem; font-style: italic; color: #aaa; font-size: 90%; margin-bottom: 4em; } .issueScore { display: none; color: #ddd; } </style> <style id="respec-mainstyle"> @keyframes pop{ 0%{transform:scale(1,1)} 25%{transform:scale(1.25,1.25);opacity:.75} 100%{transform:scale(1,1)} } a.internalDFN{color:inherit;border-bottom:1px solid #99c;text-decoration:none} a.externalDFN{color:inherit;border-bottom:1px dotted #ccc;text-decoration:none} a.bibref{text-decoration:none} .respec-offending-element:target{animation:pop .25s ease-in-out 0s 1} .respec-offending-element,a[href].respec-offending-element{text-decoration:red wavy underline} @supports not (text-decoration:red wavy underline){ .respec-offending-element:not(pre){display:inline-block} .respec-offending-element{background:url(data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs=) bottom repeat-x} } #references :target{background:#eaf3ff;animation:pop .4s ease-in-out 0s 1} cite .bibref{font-style:normal} a[href].orcid{padding-left:4px;padding-right:4px} a[href].orcid>svg{margin-bottom:-2px} ol.tof,ul.tof{list-style:none outside none} .caption{margin-top:.5em;font-style:italic} #issue-summary>ul{column-count:2} #issue-summary li{list-style:none;display:inline-block} details.respec-tests-details{margin-left:1em;display:inline-block;vertical-align:top} details.respec-tests-details>*{padding-right:2em} details.respec-tests-details[open]{z-index:999999;position:absolute;border:thin solid #cad3e2;border-radius:.3em;background-color:#fff;padding-bottom:.5em} details.respec-tests-details[open]>summary{border-bottom:thin solid #cad3e2;padding-left:1em;margin-bottom:1em;line-height:2em} details.respec-tests-details>ul{width:100%;margin-top:-.3em} details.respec-tests-details>li{padding-left:1em} .self-link:hover{opacity:1;text-decoration:none;background-color:transparent} aside.example .marker>a.self-link{color:inherit} .header-wrapper{display:flex;align-items:baseline} :is(h2,h3,h4,h5,h6):not(#toc>h2,#abstract>h2,#sotd>h2,.head>h2){position:relative;left:-.5em} :is(h2,h3,h4,h5,h6):not(#toch2)+a.self-link{color:inherit;order:-1;position:relative;left:-1.1em;font-size:1rem;opacity:.5} :is(h2,h3,h4,h5,h6)+a.self-link::before{content:"§";text-decoration:none;color:var(--heading-text)} :is(h2,h3)+a.self-link{top:-.2em} :is(h4,h5,h6)+a.self-link::before{color:#000} @media (max-width:767px){ dd{margin-left:0} } @media print{ .removeOnSave{display:none} } </style> <meta name="color-scheme" content="light"> <meta name="description" content="This document describes and prioritises gaps for the support of the N’Ko script on the Web and in eBooks. In particular, it is concerned with text layout. It checks that needed features are supported in W3C specifications, such as HTML and CSS and those relating to digital publications. It also checks whether the features have been implemented in browsers and ereaders."> <link rel="canonical" href="https://www.w3.org/TR/nkoo-gap/"> <style> .hljs{--base:#fafafa;--mono-1:#383a42;--mono-2:#686b77;--mono-3:#717277;--hue-1:#0b76c5;--hue-2:#336ae3;--hue-3:#a626a4;--hue-4:#42803c;--hue-5:#ca4706;--hue-5-2:#c91243;--hue-6:#986801;--hue-6-2:#9a6a01} @media (prefers-color-scheme:dark){ .hljs{--base:#282c34;--mono-1:#abb2bf;--mono-2:#818896;--mono-3:#5c6370;--hue-1:#56b6c2;--hue-2:#61aeee;--hue-3:#c678dd;--hue-4:#98c379;--hue-5:#e06c75;--hue-5-2:#be5046;--hue-6:#d19a66;--hue-6-2:#e6c07b} } .hljs{display:block;overflow-x:auto;padding:.5em;color:#383a42;color:var(--mono-1,#383a42);background:#fafafa;background:var(--base,#fafafa)} .hljs-comment,.hljs-quote{color:#717277;color:var(--mono-3,#717277);font-style:italic} .hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4;color:var(--hue-3,#a626a4)} .hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#ca4706;color:var(--hue-5,#ca4706);font-weight:700} .hljs-literal{color:#0b76c5;color:var(--hue-1,#0b76c5)} .hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#42803c;color:var(--hue-4,#42803c)} .hljs-built_in,.hljs-class .hljs-title{color:#9a6a01;color:var(--hue-6-2,#9a6a01)} .hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801;color:var(--hue-6,#986801)} .hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#336ae3;color:var(--hue-2,#336ae3)} .hljs-emphasis{font-style:italic} .hljs-strong{font-weight:700} .hljs-link{text-decoration:underline} </style> <style> var{position:relative;cursor:pointer} var[data-type]::after,var[data-type]::before{position:absolute;left:50%;top:-6px;opacity:0;transition:opacity .4s;pointer-events:none} var[data-type]::before{content:"";transform:translateX(-50%);border-width:4px 6px 0 6px;border-style:solid;border-color:transparent;border-top-color:#222} var[data-type]::after{content:attr(data-type);transform:translateX(-50%) translateY(-100%);background:#222;text-align:center;font-family:"Dank Mono","Fira Code",monospace;font-style:normal;padding:6px;border-radius:3px;color:#daca88;text-indent:0;font-weight:400} var[data-type]:hover::after,var[data-type]:hover::before{opacity:1} </style> <script id="initialUserConfig" type="application/json">{ "specStatus": "DNOTE", "noRecTrack": true, "shortName": "nkoo-gap", "copyrightStart": "2020", "edDraftURI": "https://w3c.github.io/afrlreq/gap-analysis/nkoo-gap", "editors": [ { "name": "Richard Ishida", "mailto": "ishida@w3.org", "company": "W3C", "w3cid": 3439, "url": "mailto:ishida@w3.org" } ], "group": "i18n", "github": "w3c/afrlreq", "preProcess": [ null, null ], "postProcess": [ null ], "langs": [ "N’Ko" ], "langTags": [ "nqo" ], "gapDocPath": "https://www.w3.org/TR/nkoo-gap/", "publishDate": "2024-09-20", "publishISODate": "2024-09-20T00:00:00.000Z", "generatedSubtitle": "W3C Group Draft Note 20 September 2024" }</script> <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2021/W3C-DNOTE"></head> <body class="h-entry informative"><div class="head"> <p class="logos"><a class="logo" href="https://www.w3.org/"><img crossorigin="" alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a></p> <h1 id="title" class="title">N’Ko Gap Analysis</h1> <p id="w3c-state"><a href="https://www.w3.org/standards/types#DNOTE">W3C Group Draft Note</a> <time class="dt-published" datetime="2024-09-20">20 September 2024</time></p> <details open=""> <summary>More details about this document</summary> <dl> <dt>This version:</dt><dd> <a class="u-url" href="https://www.w3.org/TR/2024/DNOTE-nkoo-gap-20240920/">https://www.w3.org/TR/2024/DNOTE-nkoo-gap-20240920/</a> </dd> <dt>Latest published version:</dt><dd> <a href="https://www.w3.org/TR/nkoo-gap/">https://www.w3.org/TR/nkoo-gap/</a> </dd> <dt>Latest editor's draft:</dt><dd><a href="https://w3c.github.io/afrlreq/gap-analysis/nkoo-gap">https://w3c.github.io/afrlreq/gap-analysis/nkoo-gap</a></dd> <dt>History:</dt><dd> <a href="https://www.w3.org/standards/history/nkoo-gap/">https://www.w3.org/standards/history/nkoo-gap/</a> </dd><dd> <a href="https://github.com/w3c/afrlreq/commits/">Commit history</a> </dd> <dt>Editor:</dt><dd class="editor p-author h-card vcard" data-editor-id="3439"> <a class="ed_mailto u-email email p-name" href="mailto:ishida@w3.org">Richard Ishida</a> (<span class="p-org org h-org">W3C</span>) </dd> <dt>Feedback:</dt><dd> <a href="https://github.com/w3c/afrlreq/">GitHub w3c/afrlreq</a> (<a href="https://github.com/w3c/afrlreq/pulls/">pull requests</a>, <a href="https://github.com/w3c/afrlreq/issues/new/choose">new issue</a>, <a href="https://github.com/w3c/afrlreq/issues/">open issues</a>) </dd> </dl> </details> <p class="copyright"> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2020-2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a rel="license" href="https://www.w3.org/copyright/software-license-2023/" title="W3C Software and Document Notice and License">permissive document license</a> rules apply. </p> <hr title="Separator for header"> </div> <section id="abstract" class="introductory"><h2>Abstract</h2> <p>This document describes and prioritises gaps for the support of the N’Ko script on the Web and in eBooks. In particular, it is concerned with text layout. It checks that needed features are supported in <abbr title="World Wide Web Consortium">W3C</abbr> specifications, such as HTML and CSS and those relating to digital publications. It also checks whether the features have been implemented in browsers and ereaders.</p> </section> <div id="sotd" class="introductory"><h2>Status of This Document</h2><p><em>This section describes the status of this document at the time of its publication. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at https://www.w3.org/TR/.</em></p> <p>This document describes and prioritises gaps for the support of the N’Ko script on the Web and in eBooks. In particular, it is concerned with text layout. It checks that needed features are supported in <abbr title="World Wide Web Consortium">W3C</abbr> specifications, in particular HTML and CSS and those relating to digital publications. It also checks whether the features have been implemented in browsers and ereaders. It is linked to from the <a href="https://www.w3.org/International/typography/gap-analysis/language-matrix.html">language matrix</a> that tracks Web support for many languages.</p> <p>The editor's draft of this document is being developed in the GitHub repository <a href="https://w3c.github.io/afrlreq/">African Language Enablement (afrlreq)</a>, with contributors from the <abbr title="World Wide Web Consortium">W3C</abbr> <a href="https://www.w3.org/International/i18n-activity/i18n-ig/">Internationalization Interest Group</a>. It is published by the <a href="https://www.w3.org/International/i18n-activity/i18n-wg/">Internationalization Working Group</a>. The end target for this document is a Working Group Note.</p> <p> This document was published by the <a href="https://www.w3.org/groups/wg/i18n-core">Internationalization Working Group</a> as a Group Draft Note using the <a href="https://www.w3.org/policies/process/20231103/#recs-and-notes">Note track</a>. </p><p>Group Draft Notes are not endorsed by <abbr title="World Wide Web Consortium">W3C</abbr> nor its Members. </p><p> This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. </p><p data-deliverer="32113"> The <a href="https://www.w3.org/policies/patent-policy/"><abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a> does not carry any licensing requirements or commitments on this document. </p><p> This document is governed by the <a id="w3c_process_revision" href="https://www.w3.org/policies/process/20231103/">03 November 2023 <abbr title="World Wide Web Consortium">W3C</abbr> Process Document</a>. </p></div><nav id="toc"><h2 class="introductory" id="table-of-contents">Table of Contents</h2><ol class="toc"><li class="tocline"><a class="tocxref" href="#abstract">Abstract</a></li><li class="tocline"><a class="tocxref" href="#h_introduction"><bdi class="secno">1. </bdi>Introduction</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#contributors"><bdi class="secno">1.1 </bdi>Contributors</a></li><li class="tocline"><a class="tocxref" href="#about"><bdi class="secno">1.2 </bdi>About this document</a></li><li class="tocline"><a class="tocxref" href="#prioritization"><bdi class="secno">1.3 </bdi>Prioritization</a></li></ol></li><li class="tocline"><a class="tocxref" href="#direction"><bdi class="secno">2. </bdi>Text direction</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#writing_mode"><bdi class="secno">2.1 </bdi>Writing mode</a></li><li class="tocline"><a class="tocxref" href="#bidi_text"><bdi class="secno">2.2 </bdi>Bidirectional text</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_shaping"><bdi class="secno">3. </bdi>Glyph shaping & positioning</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#fonts"><bdi class="secno">3.1 </bdi>Fonts & font styles</a></li><li class="tocline"><a class="tocxref" href="#glyphs"><bdi class="secno">3.2 </bdi>Context-based shaping and positioning</a></li><li class="tocline"><a class="tocxref" href="#letterforms"><bdi class="secno">3.3 </bdi>Letterform slopes, weights, & italics</a></li><li class="tocline"><a class="tocxref" href="#cursive"><bdi class="secno">3.4 </bdi>Cursive text</a></li><li class="tocline"><a class="tocxref" href="#transforms"><bdi class="secno">3.5 </bdi>Case & other character transforms</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_units"><bdi class="secno">4. </bdi>Typographic units</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#encoding"><bdi class="secno">4.1 </bdi>Characters & encoding</a></li><li class="tocline"><a class="tocxref" href="#segmentation"><bdi class="secno">4.2 </bdi>Grapheme/word segmentation & selection</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_inline"><bdi class="secno">5. </bdi>Punctuation & inline features</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#punctuation_etc"><bdi class="secno">5.1 </bdi>Phrase & section boundaries</a></li><li class="tocline"><a class="tocxref" href="#quotations"><bdi class="secno">5.2 </bdi>Quotations & citations</a></li><li class="tocline"><a class="tocxref" href="#emphasis"><bdi class="secno">5.3 </bdi>Emphasis & highlighting</a></li><li class="tocline"><a class="tocxref" href="#abbrev"><bdi class="secno">5.4 </bdi>Abbreviation, ellipsis & repetition</a></li><li class="tocline"><a class="tocxref" href="#inline_notes"><bdi class="secno">5.5 </bdi>Inline notes & annotations</a></li><li class="tocline"><a class="tocxref" href="#text_decoration"><bdi class="secno">5.6 </bdi>Text decoration & other inline features</a></li><li class="tocline"><a class="tocxref" href="#data_formats"><bdi class="secno">5.7 </bdi>Data formats & numbers</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_lines_and_paragraphs"><bdi class="secno">6. </bdi>Line and paragraph layout</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#line_breaking"><bdi class="secno">6.1 </bdi>Line breaking & hyphenation</a></li><li class="tocline"><a class="tocxref" href="#justification"><bdi class="secno">6.2 </bdi>Text alignment & justification</a></li><li class="tocline"><a class="tocxref" href="#spacing"><bdi class="secno">6.3 </bdi>Text spacing</a></li><li class="tocline"><a class="tocxref" href="#baselines"><bdi class="secno">6.4 </bdi>Baselines, line-height, etc</a></li><li class="tocline"><a class="tocxref" href="#lists"><bdi class="secno">6.5 </bdi>Lists, counters, etc.</a></li><li class="tocline"><a class="tocxref" href="#initials"><bdi class="secno">6.6 </bdi>Styling initials</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_pages"><bdi class="secno">7. </bdi>Page & book layout</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#page_layout"><bdi class="secno">7.1 </bdi>General page layout & progression</a></li><li class="tocline"><a class="tocxref" href="#grids_tables"><bdi class="secno">7.2 </bdi>Grids & tables</a></li><li class="tocline"><a class="tocxref" href="#footnotes_etc"><bdi class="secno">7.3 </bdi>Footnotes, endnotes, etc.</a></li><li class="tocline"><a class="tocxref" href="#headers_footers"><bdi class="secno">7.4 </bdi>Page headers, footers, etc.</a></li><li class="tocline"><a class="tocxref" href="#interaction"><bdi class="secno">7.5 </bdi>Forms & user interaction</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_other"><bdi class="secno">8. </bdi>Other</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#culturespecific"><bdi class="secno">8.1 </bdi>Culture-specific features</a></li><li class="tocline"><a class="tocxref" href="#other"><bdi class="secno">8.2 </bdi>What else?</a></li></ol></li></ol></nav> <section id="h_introduction"><div class="header-wrapper"><h2 id="x1-introduction"><bdi class="secno">1. </bdi>Introduction</h2><a class="self-link" href="#h_introduction" aria-label="Permalink for Section 1."></a></div> <section id="contributors"><div class="header-wrapper"><h3 id="x1-1-contributors"><bdi class="secno">1.1 </bdi>Contributors</h3><a class="self-link" href="#contributors" aria-label="Permalink for Section 1.1"></a></div> <p>The original version of this document was created by Richard Ishida.</p> <p data-lang="en">Other contributors can be found in the <a href="https://github.com/w3c/afrlreq/graphs/contributors">GitHub contributors list</a>.</p> </section> <section id="about"><div class="header-wrapper"><h3 id="x1-2-about-this-document"><bdi class="secno">1.2 </bdi>About this document</h3><a class="self-link" href="#about" aria-label="Permalink for Section 1.2"></a></div> <p>The <abbr title="World Wide Web Consortium">W3C</abbr> needs to make sure that the needs of scripts and languages around the world are built in to technologies such as HTML, CSS, SVG, etc. so that Web pages and eBooks can look and behave as people expect around the world.</p> <p>This page documents difficulties that people encounter when trying to use languages written in the N’Ko script on the Web.</p> <p>Having identified an issue, it investigates the current status with regards to web specifications and implementations by user agents (browsers, e-readers, etc.), and attempts to prioritise the severity of the issue for web users.</p> <p>A summary of this report and others can be found as part of the <a href="https://www.w3.org/International/typography/gap-analysis/language-matrix.html" style="font-size: 140%;">Language Matrix</a>.</p> </section> <section id="prioritization"><div class="header-wrapper"><h3 id="x1-3-prioritization"><bdi class="secno">1.3 </bdi>Prioritization</h3><a class="self-link" href="#prioritization" aria-label="Permalink for Section 1.3"></a></div> <p>This document not only describes gaps, it also attempts to prioritise them in terms of the impact on the local user. The prioritisation is indicated by colour.</p> <p>Key:</p> <ul style="list-style-type: none;"> <li class="ok"></li> <li class="na"></li> <li class="advanced"></li> <li class="basic"></li> <li class="broken"></li> <li class="tbd"></li> </ul> <p>It is important to note that these colours do not indicate to what extent a particular feature is broken. They indicate the impact of a broken or missing feature on the content author or end user.</p> <p>Basic styling is the level that would be generally accepted as sufficient for most Web pages. Advanced level support would include additional features one might expect to include in ebooks or other advanced typographic formats. There may be features of a script or language that are not supported on the Web, but that are not generally regarded as necessary (usually archaic or obscure features). In this case, the feature can be described here, but the status should be marked as OK.</p> <p>The decision as to what priority level is assigned to a described gap is down to the experts doing the gap analysis. It may not always be straightforward to decide. If a given section in this document refers to more than one feature that is broken, each with different impacts on Web users, the priority for the section should be the lowest denominator.</p> <p>A cell can be scored as OK if the feature in question is specified in an appropriate specification, and is supported by user agents. 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 major browsers or applications.) </p> </section> </section> <section id="direction"><div class="header-wrapper"><h2 id="x2-text-direction"><bdi class="secno">2. </bdi>Text direction</h2><a class="self-link" href="#direction" aria-label="Permalink for Section 2."></a></div> <p>See also General page layout & progression for features such as column layout, page turning direction, etc. that are affected by text direction.</p> <section id="writing_mode" class="advanced"><div class="header-wrapper"><h3 id="x2-1-writing-mode"><bdi class="secno">2.1 </bdi>Writing mode</h3><a class="self-link" href="#writing_mode" aria-label="Permalink for Section 2.1"></a></div> <p id="prompt-writing_mode" class="status_prompt promptStub">In what direction does text flow along a line and across a page? (See the Bidirectional text section if the basic direction is right-to-left.) If the script uses vertically oriented text, what are the requirements? What about if you mix vertical text with scripts that are normally only horizontal? Do you need a switch to use different characters in vertical vs. horizontal text? Does the browser support short runs of horizontal text in vertical lines (tate-chu-yoko in Japanese) as expected? Is the orientation of characters and the directional ordering of characters supported as needed?</p> <div id="insert-writing_mode"><section id="issue11_writing_mode"> <div class="header-wrapper"><h4 id="x11-vertical-text-in-spines-etc">#11 Vertical text in spines, etc.</h4><a class="self-link" href="#issue11_writing_mode" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/11" class="issueLink advancedIssue">GitHub issue #11</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is applicable to most languages.</i></p><p>Vertical text may occur for special effects (the spine of a book, table column headings, etc). Typographically, it is simply horizontal text that is rotated. There is no way to do this effectively until browsers support the new CSS properties.</p><p><b class="meta">For more details, see <a href="https://github.com/w3c/eurlreq/issues/11">this GitHub issue</a>, which is being used to track this gap. Please add any discussion there, and not to this issue.</b></p> </section> </div> </section> <section id="bidi_text" class="basic"><div class="header-wrapper"><h3 id="x2-2-bidirectional-text"><bdi class="secno">2.2 </bdi>Bidirectional text</h3><a class="self-link" href="#bidi_text" aria-label="Permalink for Section 2.2"></a></div> <p id="prompt-bidi_text" class="status_prompt promptStub">If the general inline direction is right-to-left, are there any issues when handling that? Where the inline direction of text is mixed, is this bidirectional text adequately supported? What about numbers and expressions? Do the Unicode bidi controls and HTML markup provide the support needed? Is isolation of directional runs problematic?</p> <div id="insert-bidi_text"><section id="issue23_bidi_text"> <div class="header-wrapper"><h4 id="x23-dir-lacks-wide-support">#23 :dir lacks wide support</h4><a class="self-link" href="#issue23_bidi_text" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/23" class="issueLink basicIssue">GitHub issue #23</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">1</span></p><p><i class="meta">This issue is applicable to all languages with RTL orthographies.</i></p><p>Style sheets need to add special rules for RTL styles if they are not supported by logical properties or values.</p><p>One approach is to create a second style sheet which, when pulled into an HTML page, overrides styles in the main style sheet with settings for RTL text. This approach is not ideal because it requires maintaining the styles in two separate locations, which can therefore get out of synch, and it requires explicit addition of a call to the second style sheet in every page that will support RTL text.</p><p>The <code translate="no">:dir()</code> pseudo-class avoids these issues by allowing the content author to include the RTL variations in the same style sheet as the others. However, it is not yet supported by all major browser engines.</p><p></p><p> <b class="meta">For more details, see <a href="https://github.com/w3c/alreq/issues/256">this GitHub issue</a>, which is being used to track this gap. Please add any discussion there, and not to this issue.</b> </p> </section> <section id="issue16_bidi_text"> <div class="header-wrapper"><h4 id="x16-need-support-for-dirname-attribute">#16 Need support for dirname attribute</h4><a class="self-link" href="#issue16_bidi_text" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/16" class="issueLink okIssue">GitHub issue #16</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">3</span></p><p><i class="meta">This issue is common to all RTL scripts.</i></p><p>When strings are passed around, some applications don't receive or use information about the appropriate base direction to use for those strings when they are rendered as part of a page.</p><p>This can lead to text being incorrectly aligned, and to text within a sentence or paragraph being incorrectly ordered. Some of this can be addressed by using heuristics to detect the direction first-strongly directional character in the string, but some strings can fail such heuristics.</p><p>HTML's <code translate="no">dirname</code> attribute, which is supposed to pass information with form data about direction of the text isn't fully interoperable across major browser engines.</p><p></p><div class="header-wrapper"><h5 id="fixed"> FIXED ! </h5><a class="self-link" href="#issue16_bidi_text" aria-label="Permalink for this Section"></a></div> <b class="meta">This gap is now fixed. For details, see <a href="https://github.com/w3c/alreq/issues/216">this GitHub issue</a>.</b> <p></p> </section> <section id="issue10_bidi_text"> <div class="header-wrapper"><h4 id="x10-support-for-isolating-formatting-characters-lacking-in-some-browsers">#10 Support for isolating formatting characters lacking in some browsers</h4><a class="self-link" href="#issue10_bidi_text" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/10" class="issueLink okIssue">GitHub issue #10</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">3</span></p><p><i class="meta">This issue is common to all RTL scripts.</i></p><p>For support of bidirectional text in plain text, the Unicode Standard provides a number of formatting characters, which include RLI, LRI, PDI and FSI. See an explanation of <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls.en">how these work</a>.</p><p>Note that <em>the Unicode Standard recommends</em> the use of RLI/LRI...PDI rather than the former RLE/LRE...PDF, because the newer code points directionally isolate the text they surround from that around it. This is important for producing bidirectional text. Although markup should be used most of the time in HTML pages, there are parts of an HTML document that don't support markup, such as the <code translate="no">title</code> element and <code translate="no">title</code>, <code translate="no">alt</code>, and other attributes. These characters can be necessary for managing inline runs of such text.</p><p> </p><div class="header-wrapper"><h5 id="the-gap"> The Gap: </h5><a class="self-link" href="#issue10_bidi_text" aria-label="Permalink for this Section"></a></div>The RLI, LRI, FSI, PDI characters still don't produce the necessary behaviour in all major web browser engines.<p></p><p><span class="pass">Gecko</span> and <span class="pass">Blink</span> support these characters. <span class="fail">Webkit</span> doesn't.</p><p> </p><div class="header-wrapper"><h5 id="spec-status"> Spec status: </h5><a class="self-link" href="#issue10_bidi_text" aria-label="Permalink for this Section"></a></div>This is an issue related to Unicode support, rather than <abbr title="World Wide Web Consortium">W3C</abbr> specs.<p></p><p><a href="https://html.spec.whatwg.org/multipage/dom.html#requirements-relating-to-the-bidirectional-algorithm">html</a> mentions that text content may contain these characters.</p><p> </p><div class="header-wrapper"><h5 id="tests-results"> Tests & results: </h5><a class="self-link" href="#issue10_bidi_text" aria-label="Permalink for this Section"></a></div><i>i18n test suite</i>, <a href="https://www.w3.org/International/i18n-tests/results/bidi-algorithm#rli_etc">Isolating formatting characters</a><p></p><p> </p><div class="header-wrapper"><h5 id="action-taken"> Action taken: </h5><a class="self-link" href="#issue10_bidi_text" aria-label="Permalink for this Section"></a></div><a href="https://bugs.webkit.org/show_bug.cgi?id=130823">Webkit</a> (2014)<p></p><p> </p><div class="header-wrapper"><h5 id="outcomes"> Outcomes: </h5><a class="self-link" href="#issue10_bidi_text" aria-label="Permalink for this Section"></a></div><strong>WebKit now supports the required behaviour for these formatting characters. This means that they can be used interoperably on all major web browsers.</strong><p></p><p></p><p></p><div class="header-wrapper"><h5 id="priority"> Priority </h5><a class="self-link" href="#issue10_bidi_text" aria-label="Permalink for this Section"></a></div>These characters control fundamental behaviours for support of RTL scripts so priority is set as Basic.<p></p> </section> <section id="issue8_bidi_text"> <div class="header-wrapper"><h4 id="x8-logical-css-keyword-support-needed">#8 Logical CSS keyword support needed</h4><a class="self-link" href="#issue8_bidi_text" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/8" class="issueLink basicIssue">GitHub issue #8</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">1</span></p><p><i class="meta">This issue is common to all RTL scripts.</i></p><p>Adoption of logical keywords such as <code translate="no">-start</code> and <code translate="no">-end</code>, rather than <code translate="no">-left</code> and <code translate="no">-right</code> needs to be completed.</p><p>For margins, padding, block size, border colour, width & style, logical keywords such as <code translate="no">margin-inline-start</code> or <code translate="no">margin-block-end</code> are widely supported by major browsers in their simplest forms (such as those just mentioned). However, logical properties are not well supported in shorthands such as <code translate="no">margin-block</code> or <code translate="no">margin-inline</code> or the <code translate="no">margin</code> property. The lack of support for shorthands is significant, since they are expected to have high use.</p><p><b class="meta">For more details, see <a href="https://github.com/w3c/alreq/issues/217">this GitHub issue</a>, which is being used to track this gap. Please add any discussion there, and not to this issue.</b></p> </section> </div> </section> </section> <section id="h_shaping"><div class="header-wrapper"><h2 id="x3-glyph-shaping-positioning"><bdi class="secno">3. </bdi>Glyph shaping & positioning</h2><a class="self-link" href="#h_shaping" aria-label="Permalink for Section 3."></a></div> <section id="fonts" class="basic"><div class="header-wrapper"><h3 id="x3-1-fonts-font-styles"><bdi class="secno">3.1 </bdi>Fonts & font styles</h3><a class="self-link" href="#fonts" aria-label="Permalink for Section 3.1"></a></div> <p id="prompt-fonts" class="status_prompt promptStub">Do the standard fallback fonts used in browsers (eg. serif, sans-serif, cursive, etc.) match expectations? Are special font or OpenType features needed for this script that are not available?</p> <div id="insert-fonts"><section id="issue35_fonts"> <div class="header-wrapper"><h4 id="x35-n-ko-lack-of-font-support-for-non-joined-style-and-bold-text">#35 N'Ko: Lack of font support for non-joined style and bold text</h4><a class="self-link" href="#issue35_fonts" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/35" class="issueLink basicIssue">GitHub issue #35</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo</span> <span class="issueScore">1</span></p><p><i class="meta">This issue is applicable to N'Ko.</i></p><p>Letters in N'Ko text are normally joined (ie. 'cursive'), but instances can also be readily found of unjoined text, particularly in headings. Here is an example.</p><p><img src="images/e2aab123-07ab-467d-b0e4-862841a56871.png" width="300" alt="Unjoined header"></p><p>Note also that the heading text is bold. The text shown was achieved using legacy fonts that are not Unicode compatible.</p><p>For more information, see the language enablement requirements <a href="https://w3c.github.io/afrlreq/nko/#writing_styles">here</a> and <a href="https://w3c.github.io/afrlreq/nko/#noncursive">here</a>.</p><p>Discussion thread: <a href="https://github.com/w3c/afrlreq/issues/29">Non-joined fonts in N'Ko</a></p><p></p><p></p><div class="header-wrapper"><h5 id="the-gap-0"> The Gap: </h5><a class="self-link" href="#issue35_fonts" aria-label="Permalink for this Section"></a></div>There are only three Unicode compliant fonts in use, Noto Sans N'ko, Ebrima, and Kigelia, and none of them provide for unjoined text.<p></p><p>Bold font faces are available for Ebrima and Kigelia, but not for Noto.</p><p>It is possible to use CSS to make a font show unjoined letters, if the OpenType features are available. Simply add something like this to your style sheet.</p><p><code translate="no">.unjoined { font-feature-settings: "init" 0, "medi" 0, "fina" 0, "isol" 1; }</code></p><p>But that's a little complicated for most people, and doesn't help those using Word, etc.</p><p></p><p> </p><div class="header-wrapper"><h5 id="priority-0"> Priority: </h5><a class="self-link" href="#issue35_fonts" aria-label="Permalink for this Section"></a></div>Bold, unjoined headings are a regular feature of N'Ko text, so it is problematic not to be able to produce them with the Noto font, and may even delay the migration of some users to Unicode.<p></p><p></p><p></p><div class="header-wrapper"><h5 id="tests-results-0"> Tests & results: </h5><a class="self-link" href="#issue35_fonts" aria-label="Permalink for this Section"></a></div><i>Interactive test</i>, <a href="https://github.com/w3c/character_phrase_tests/issues/57">Exploratory test: N’Ko headings can be rendered unjoined and bolded.</a><p></p><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-0"> Action taken: </h5><a class="self-link" href="#issue35_fonts" aria-label="Permalink for this Section"></a></div>This does not need to be fixed in <abbr title="World Wide Web Consortium">W3C</abbr> specs or in browsers. Font developers need to provide appropriate fonts.<p></p><p><a href="https://github.com/notofonts/nko/issues/9">Noto</a></p><p></p><p></p><div class="header-wrapper"><h5 id="outcomes-0"> Outcomes: </h5><a class="self-link" href="#issue35_fonts" aria-label="Permalink for this Section"></a></div><strong><a href="https://notofonts.github.io/#nko">Noto Unjoined and Unjoined Bold fonts</a> are now available.</strong> <p></p> </section> <section id="issue19_fonts"> <div class="header-wrapper"><h4 id="x19-glyphs-for-characters-in-other-blocks-incorrectly-falling-back-to-system-font">#19 Glyphs for characters in other blocks incorrectly falling back to system font</h4><a class="self-link" href="#issue19_fonts" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/19" class="issueLink advancedIssue">GitHub issue #19</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is applicable to Adlam and N'Ko.</i></p><p>When text contains a punctuation mark such as an Arabic question mark, the glyph displayed should be that contained in the Adlam or N'Ko font, if it contains one.</p><p></p><p></p><div class="header-wrapper"><h5 id="the-gap-1"> The Gap: </h5><a class="self-link" href="#issue19_fonts" aria-label="Permalink for this Section"></a></div> At least one browser on desktop and mobile render the Arabic question mark (and perhaps other punctuation) using a fallback font despite the font containing the appropriate glyph.<p></p><p>Example in N'Ko: </p><div dir="rtl"><p></p><p><img src="images/107946946-9e2ec500-6f89-11eb-83bc-0af7e9a34ca1.png" alt="Incorrect question mark glyph"></p><p></p></div><p></p><p>This was tested with the Noto Sans NKo font. In <span class="fail">Gecko</span> and <span class="fail">Blink</span> the question mark falls back to a different font.</p><p>It may be related to a script itemization issue where Adlam or N'Ko is not properly recognized. A request was made to the Unicode Consortium to fix the <a href="https://www.unicode.org/Public/15.0.0/ucd/ScriptExtensions.txt">Script Extensions table</a>.</p><p>Other characters from the Arabic and Devanagari script blocks exhibit the same behaviour. For example, a danda used in Limbu, or a tatweel used in Syriac.</p><p> More: </p><ul><li> <a href="https://github.com/w3c/afrlreq/issues/18">GitHub issue</a> </li> </ul><p></p><p></p><div class="header-wrapper"><h5 id="tests-results-1"> Tests & results: </h5><a class="self-link" href="#issue19_fonts" aria-label="Permalink for this Section"></a></div> <ul><li> <i>Interactive test</i>, <a href="https://github.com/w3c/character_phrase_tests/issues/54">If an N'Ko font contains an Arabic question mark, the glyph rendered should be from that font, and not fall back to an another font.</a><br> </li> </ul><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-1"> Action taken: </h5><a class="self-link" href="#issue19_fonts" aria-label="Permalink for this Section"></a></div><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1834316">Gecko</a><p></p><p></p><p></p><div class="header-wrapper"><h5 id="outcomes-1"> Outcomes </h5><a class="self-link" href="#issue19_fonts" aria-label="Permalink for this Section"></a></div>The Unicode Consortium has fixed the <a href="https://www.unicode.org/Public/15.0.0/ucd/ScriptExtensions.txt">script extensions table</a>.<p></p><p>Gecko is implementing a fix.</p><p></p><p></p><div class="header-wrapper"><h5 id="priority-1"> Priority: </h5><a class="self-link" href="#issue19_fonts" aria-label="Permalink for this Section"></a></div>A question mark is visible, just not in the correct font. So marking as advanced. <p></p> </section> </div> </section> <section id="glyphs" class="ok"><div class="header-wrapper"><h3 id="x3-2-context-based-shaping-and-positioning"><bdi class="secno">3.2 </bdi>Context-based shaping and positioning</h3><a class="self-link" href="#glyphs" aria-label="Permalink for Section 3.2"></a></div> <p id="prompt-glyphs" class="status_prompt promptStub">Does the script in question require additional user control features to support alterations to the position or shape of glyphs, for example adjusting the distance between the base text and diacritics, or changing the glyphs used in a systematic way? Do you need to be able to compose/decompose conjuncts, or show characters that are otherwise hidden, etc?</p> <div id="insert-glyphs"><section id="issue37_glyphs"> <div class="header-wrapper"><h4 id="x37-n-ko-tone-marks-should-all-be-at-the-same-height">#37 N'Ko tone marks should all be at the same height</h4><a class="self-link" href="#issue37_glyphs" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/37" class="issueLink okIssue">GitHub issue #37</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo</span> <span class="issueScore">3</span></p><p><i class="meta">This issue is applicable to N’Ko.</i></p><p>The World Organization for the Development of N'Ko prefers that all tone marks should appear at the same height above the baseline, rather than changing height according to the height of the base character to which they are attached. This image shows the preferred behaviour.</p><p><img src="images/d272eb2d-8d00-4ec8-830b-38e1d233c0d3.svg" width="200" alt="ߊ߬ߟߎ߬"></p><p>More: </p><ul><li> <a href="https://www.w3.org/TR/nkoo-lreq/#context">N'Ko Layout Requirements, Context-based shaping & positioning</a> </li> </ul><p></p><p></p><div class="header-wrapper"><h5 id="the-gap-2"> The GAP </h5><a class="self-link" href="#issue37_glyphs" aria-label="Permalink for this Section"></a></div> The Noto Sans NKo font varies the height of the tone mark according to what it rests on. (The other major N'Ko Unicode fonts, Ebrima, Conakry, and Kigelia place tones at the same height.)<p></p><p>More: </p><ul><li> <a href="https://github.com/w3c/afrlreq/issues/30"> N'ko Context-based shaping & positioning: Diacritic placement #30 </a> </li> </ul><p></p><p></p><p></p><p></p><div class="header-wrapper"><h5 id="tests-results-2"> Tests & results </h5><a class="self-link" href="#issue37_glyphs" aria-label="Permalink for this Section"></a></div> <a href="r12a.github.io/pickers/nko/index.html?text=%DF%8A%DF%AC%DF%9F%DF%8E%DF%AC">Character app test</a>. Install the latest Noto Sans Nko font. Open the page and select Noto Sans NKo from the 'Current font' pulldown. Test passes if both tone marks are at the same height.<p></p><p></p><p> </p><div class="header-wrapper"><h5 id="action-taken-2"> Action taken </h5><a class="self-link" href="#issue37_glyphs" aria-label="Permalink for this Section"></a></div><i>Issue</i>, <a href="https://github.com/notofonts/nko/issues/7">Noto</a> <p></p><p></p><p></p><p></p><div class="header-wrapper"><h5 id="outcomes-2"> Outcomes </h5><a class="self-link" href="#issue37_glyphs" aria-label="Permalink for this Section"></a></div><strong>The <a href="https://notofonts.github.io/#nko">latest release of the Noto N'Ko fonts</a> now set above marks at a constant height. This means that all major N'Ko fonts now behave as expected.</strong><p></p><p></p><p> </p><div class="header-wrapper"><h5 id="priority-2"> Priority </h5><a class="self-link" href="#issue37_glyphs" aria-label="Permalink for this Section"></a></div>Although this is the preference, the text is still readable, so this is marked as Advanced. <p></p> </section> </div> </section> <section id="letterforms" class="basic"><div class="header-wrapper"><h3 id="x3-3-letterform-slopes-weights-italics"><bdi class="secno">3.3 </bdi>Letterform slopes, weights, & italics</h3><a class="self-link" href="#letterforms" aria-label="Permalink for Section 3.3"></a></div> <p id="prompt-letterforms" class="status_prompt promptStub">This covers ways of modifying the glyphs, such as for italicisation, bolding, oblique, etc. Do italic fonts lean in the right direction? Is synthesised italicisation problematic? Are there other problems relating to bolding or italicisation - perhaps relating to generalised assumptions of applicability?</p> <div id="insert-letterforms"><section id="issue17_letterforms"> <div class="header-wrapper"><h4 id="x17-it-should-be-possible-to-slant-glyphs-to-the-left-for-italics-oblique">#17 It should be possible to slant glyphs to the left for italics/oblique</h4><a class="self-link" href="#issue17_letterforms" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/17" class="issueLink basicIssue">GitHub issue #17</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo</span> <span class="issueScore">1</span></p><p><i class="meta">This issue is applicable to Arabic/Persian, Hebrew, & N'Ko.</i></p><p>Typography for N’Ko is still at an early stage of development, but when JamraPatel reached out to communities to see if an Italic typeface would be beneficial, they expressed a desire to have one. Over the past few years, the need to be able to set more complex copy has increased as well. Since neither script had any precedent for a drawn italic typeface, JamraPatel asked the community how they would like to see it drawn. The preference was for N'ko to have a leftward lean. To JamraPatel's knowledge, their typeface has the first drawn italicized N'ko.</p><p><img src="images/105521403-bf2a3000-5cd3-11eb-9050-2db229bbff6c.png" alt="nko_italics"></p><p>The following is a photo of an Arabic newspaper letterhead. See the oblique text in the middle line.</p><p><img src="images/40caeadb-0918-4eea-844e-6ce0606532e8.jpg" width="415" alt=""></p><p> More: </p><ul><li> <a href="https://w3c.github.io/afrlreq/nko/#fontstyle">N'Ko requirements doc</a> </li> <li> <a href="https://github.com/w3c/afrlreq/issues/3#issuecomment-512911833">GH issue</a> </li> </ul><p></p><p> </p><div class="header-wrapper"><h5 id="priority-3"> Priority </h5><a class="self-link" href="#issue17_letterforms" aria-label="Permalink for this Section"></a></div>Marking this as basic priority, given that incorrect synthesis is likely to occur often.<p></p><p> </p><div class="header-wrapper"><h5 id="the-gap-3"> The Gap </h5><a class="self-link" href="#issue17_letterforms" aria-label="Permalink for this Section"></a></div> If a font is applied to create italicised or oblique text, there should be no problem here. But such font styles are sometimes achieved using font-synthesis, in which case the correct lean needs to be applied. <p></p><p>CSS provides for 'negative oblique' values of the font-style property, which can be used to achieve this. Set font-style to the desired value, such as -14deg and set font-synthesis-style to auto. <span class="pass">Gecko</span> supports that value, but <span class="fail">Blink</span> and <span class="fail">WebKit</span> do not.</p><p>However, there is a problem with the CSS approach because it suggests that if an italic font face is available for the font in use, then the font should be used rather than applying the oblique synthesis. (And this is what browsers appear to do.) In most cases, currently, this will result in right-leaning, italic glyphs (which may also have different shapes to oblique glyphs) rather than the specified left-leaning synthesized oblique or fallback to an oblique font face.</p><p>The following diagram shows the result of the second interactive test below, where no <code translate="no">font-family</code> property is specified, and <code translate="no">font-style:oblique -14deg</code> is applied to all lines. There is only one N'Ko font on the system and the system has no associated italic font file. The font set in browser preferences for Arabic text is also unaccompanied on the system by an italic font file. The Hebrew and Ukrainian texts are both represented by fonts for which an italic font file is also present on the system. The directive to apply -14 degree oblique to the latter two is overridden, and the text leans the wrong way. (And the letterforms for the cyrillic text are very different from those that would be produced by synthesising the oblique on the regular font.)</p><p> <img src="images/a59a3edf-1403-4638-b4cd-b6247d999352.png" width="545" alt="Result of applying oblique to 4 scripts."></p><p></p><p></p><div class="header-wrapper"><h5 id="tests"> Tests </h5><a class="self-link" href="#issue17_letterforms" aria-label="Permalink for this Section"></a></div><i>interactive test:</i> <a href="https://github.com/w3c/glyph_character_tests/issues/8">It is possible to make synthetic oblique slant letterforms to the left.</a><p></p><p><i>interactive test:</i> <a href="https://github.com/w3c/glyph_character_tests/issues/10"> It is possible to slant glyphs to the left when the system has an italic font face.</a></p><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-3"> Action taken </h5><a class="self-link" href="#issue17_letterforms" aria-label="Permalink for this Section"></a></div>CSS issue: <a href="https://github.com/w3c/csswg-drafts/issues/8914">(css-fonts) It should be possible to slant glyphs to the left for italics/oblique #8914</a><p></p><p>Browser bug reports: <a href="https://bugs.webkit.org/show_bug.cgi?id=257743">WebKit</a> • <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1451754">Blink</a></p><p></p><p> </p><div class="header-wrapper"><h5 id="outcomes-3"> Outcomes </h5><a class="self-link" href="#issue17_letterforms" aria-label="Permalink for this Section"></a></div>tbd <p></p> </section> </div> </section> <section id="cursive" class="advanced"><div class="header-wrapper"><h3 id="x3-4-cursive-text"><bdi class="secno">3.4 </bdi>Cursive text</h3><a class="self-link" href="#cursive" aria-label="Permalink for Section 3.4"></a></div> <p id="prompt-cursive" class="status_prompt promptStub">If this script is cursive (eg. Arabic, N’Ko, Syriac, etc), are there problems or needed features related to the handling of cursive text? Do cursive links break if parts of a word are marked up or styled? Do Unicode joiner and non-joiner characters behave as expected?</p> <div id="insert-cursive"><section id="issue15_cursive"> <div class="header-wrapper"><h4 id="x15-text-stroke-cuts-joining-glyphs-apart">#15 Text stroke cuts joining glyphs apart</h4><a class="self-link" href="#issue15_cursive" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/15" class="issueLink advancedIssue">GitHub issue #15</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is likely to apply to all cursive script text.</i></p><p>When text stroke effects are applied to cursive text, they wrap around the joining part of the glyphs, and interrupt the cursive flow. </p><p>This example shows the typical result for Adlam.</p><p><img src="images/105515529-b2560e00-5ccc-11eb-8cab-96dc7d3cabb5.png" alt="Screenshot 2021-01-22 at 16 12 12"></p><p>And a similar result for N'Ko.</p><p><img src="images/108030678-87d74680-7027-11eb-8cbd-7c4c91f467a3.png" alt="Screenshot 2021-02-16 at 07 20 44"></p><p> <b class="meta">For more details, see <a href="https://github.com/w3c/alreq/issues/220">this GitHub issue</a>, which is being used to track this gap. Please add any discussion there, and not to this issue.</b></p> </section> <section id="issue14_cursive"> <div class="header-wrapper"><h4 id="x14-text-opacity-shows-glyph-overlap">#14 Text opacity shows glyph overlap</h4><a class="self-link" href="#issue14_cursive" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/14" class="issueLink advancedIssue">GitHub issue #14</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is likely to apply to all cursive script text.</i></p><p>Text in 'cursive' writing systems is joined by overlapping glyphs with the appropriate joining forms. If those glyphs are made opaque, the joins should not become apparent. For example, N'Ko should look like this:</p><p><img src="images/151993426-e38985f6-7e46-4d99-82eb-cdb4434862af.png" alt="Screenshot 2022-02-01 at 15 02 18"></p><p> </p><div class="header-wrapper"><h5 id="the-gap-4"> The GAP </h5><a class="self-link" href="#issue14_cursive" aria-label="Permalink for this Section"></a></div> When opacity is applied to text, some browsers produce dark patches where the cursive glyphs overlap. Here is an example in the Adlam script.<p></p><p><img src="images/105513100-d106d580-5cc9-11eb-9e9f-846339dbb5fb.png" alt="Screenshot 2021-01-22 at 15 52 10"></p><p>And here is an N'Ko example.</p><p><img src="images/108040758-9a587c80-7035-11eb-8754-e49f4f528f6b.png" alt="Screenshot 2021-02-16 at 09 01 14"></p><p><span class="fail">Gecko</span> and <span class="fail">Blink</span> browsers show the unwanted overlaps. <span class="partial">WebKit</span> works as expected for Arabic, Devanagari, Syriac & N'Ko, but not for Adlam (Fulah), Mongolian, or Hanifi Rohingya.</p><p></p><p></p><div class="header-wrapper"><h5 id="tests-0"> Tests </h5><a class="self-link" href="#issue14_cursive" aria-label="Permalink for this Section"></a></div><i>Interactive test</i>, <a href="https://github.com/w3c/character_phrase_tests/issues/40">Applying opacity to cursive text doesn't produce dark patches where glyphs overlap</a><p></p><p><i>I18n test suite</i>, <a href="https://w3c.github.io/i18n-tests/results/cursive#text_opacity">Text opacity</a><br> Contains similar tests for Arabic and Mongolian text, with the same results, except that WebKit browsers don't display Mongolian as cursive text, so the test is moot in that case.</p><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-4"> Action taken: </h5><a class="self-link" href="#issue14_cursive" aria-label="Permalink for this Section"></a></div><i>Issue</i>, <a href="https://github.com/w3c/csswg-drafts/issues/5139">Add note for text opacity applied to cursive scripts</a> Closed.<p></p><p>Browser bug reports:<br> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1752568">Gecko</a> • <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1292040">Blink</a> • <a href="https://bugs.webkit.org/show_bug.cgi?id=257746">WebKit</a></p><p></p><p></p><div class="header-wrapper"><h5 id="outcomes-4"> Outcomes: </h5><a class="self-link" href="#issue14_cursive" aria-label="Permalink for this Section"></a></div> 2020-07-27: <a href="https://drafts.csswg.org/css-color-4/#transparency">css-color</a> was updated to clarify that opacity should be applied to a whole element, not to individual letters, so that this shouldn't happen.<p></p><p></p><p></p><div class="header-wrapper"><h5 id="priority-4"> Priority: </h5><a class="self-link" href="#issue14_cursive" aria-label="Permalink for this Section"></a></div>Marking as advanced, since this is a decorative feature.<p></p><p> </p> </section> <section id="issue12_cursive"> <div class="header-wrapper"><h4 id="x12-inline-elements-break-cursive-shaping">#12 Inline elements break cursive shaping</h4><a class="self-link" href="#issue12_cursive" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/12" class="issueLink advancedIssue">GitHub issue #12</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo ff</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is applicable to text in all cursive scripts.</i></p><p>When elements surround part of a cursive run of text, and apply styling, the results often break the cursive joins. (See the results of trying to colour individual letters in the illustration below – as expected above, unsuccessful below.)</p><p><img src="images/105504414-a6b01a80-5cbf-11eb-9414-8c753335d892.png" alt="Screenshot 2021-01-22 at 14 39 11"></p><p><img src="images/105504167-5a64da80-5cbf-11eb-9702-5477486c66c1.png" alt="Screenshot 2021-01-22 at 14 36 42"></p><p> <b class="meta">For more details, see <a href="https://github.com/w3c/alreq/issues/222">this GitHub issue</a>, which is being used to track this gap. Please add any discussion there, and not to this issue.</b></p> </section> </div> </section> <section id="transforms" class="ok"><div class="header-wrapper"><h3 id="x3-5-case-other-character-transforms"><bdi class="secno">3.5 </bdi>Case & other character transforms</h3><a class="self-link" href="#transforms" aria-label="Permalink for Section 3.5"></a></div> <p id="prompt-transforms" class="status_prompt promptStub">Does your script need special text transforms that are not supported? Does your script convert letters to uppercase, capitalised and lowercase alternatives according to your typographic needs? Do you need to to convert between half-width and full-width presentation forms?</p> <div id="insert-transforms"></div> </section> </section> <section id="h_units"><div class="header-wrapper"><h2 id="x4-typographic-units"><bdi class="secno">4. </bdi>Typographic units</h2><a class="self-link" href="#h_units" aria-label="Permalink for Section 4."></a></div> <section id="encoding" class="ok"><div class="header-wrapper"><h3 id="x4-1-characters-encoding"><bdi class="secno">4.1 </bdi>Characters & encoding</h3><a class="self-link" href="#encoding" aria-label="Permalink for Section 4.1"></a></div> <p id="prompt-encoding" class="status_prompt promptStub">Are there any character repertoire issues preventing use of this script on the Web? Do variation selectors need attention? Are there any other encoding-related issues?</p> <div id="insert-encoding"><section id="issue36_encoding"> <div class="header-wrapper"><h4 id="x36-lack-of-clarity-on-how-to-encode-n-ko-te-kerende">#36 Lack of clarity on how to encode N'Ko te-kerende</h4><a class="self-link" href="#issue36_encoding" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/36" class="issueLink okIssue">GitHub issue #36</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo</span> <span class="issueScore">3</span></p><p><i class="meta">This issue is applicable to N'Ko.</i></p><p>Certain constructs in N'Ko text mean 'each and every ....', and they appear with dash on the baseline with spaces either side. For example: <img src="images/5f6fa5df-cc88-44c1-87f0-e4420d96b870.png" width="444" alt="Screenshot 2023-05-16 at 17 51 06"></p><p>This is also used in other locations where we might use a dash in Latin text.</p><p>The question is what is the appropriate character for the te-kerende and other similar looking uses.</p><p>More: </p><ul><li> https://w3c.github.io/afrlreq/nko/#tekerende </li> <li> https://github.com/w3c/afrlreq/issues/28 </li> <li> https://github.com/unicode-org/sah/issues/274 (not generally accessible) </li> </ul><p></p><p></p><div class="header-wrapper"><h5 id="the-gap-5"> The GAP </h5><a class="self-link" href="#issue36_encoding" aria-label="Permalink for this Section"></a></div>Research showed that users are using <span class="codepoint" translate="no"><bdi lang="nqo" dir="rtl">ߺ</bdi> <span class="uname">U+07FA NKO LAJANYALAN</span></span> with spaces either side for this. However, that character's main stated role in the Unicode Standard is to act like the Arabic tatweel and extend the baseline while joining the characters either side.<p></p><p>This approach works in all browsers.</p><p>See an <a href="http://cormand.huma-num.fr/maninkabiblio/periodiques/silabosoona5.pdf">example</a> page 3, col 2 (from the right), below the picture.</p><p>The Unicode Standard doesn't provide any advice on this topic. The original proposal included a request for a te-kerende character, but it was not adopted.</p><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-5"> Action taken </h5><a class="self-link" href="#issue36_encoding" aria-label="Permalink for this Section"></a></div>The question was raised at a Unicode Script Ad Hoc meeting.<p></p><p></p><p></p><div class="header-wrapper"><h5 id="outcomes-5"> Outcomes </h5><a class="self-link" href="#issue36_encoding" aria-label="Permalink for this Section"></a></div>The Unicode Script Ad Hoc committee considered the matter and agreed that the te-kerende should be represented using <code translate="no"><space><lajanyalan><space></code>. <p></p><p></p><p></p><div class="header-wrapper"><h5 id="priority-5"> Priority </h5><a class="self-link" href="#issue36_encoding" aria-label="Permalink for this Section"></a></div>This is already a de facto standard<p></p><p></p><p> </p> </section> </div> </section> <section id="segmentation" class="ok"><div class="header-wrapper"><h3 id="x4-2-grapheme-word-segmentation-selection"><bdi class="secno">4.2 </bdi>Grapheme/word segmentation & selection</h3><a class="self-link" href="#segmentation" aria-label="Permalink for Section 4.2"></a></div> <p id="prompt-segmentation" class="status_prompt promptStub">This is about how text is divided into graphemes, words, sentences, etc., and behaviour associated with that. Do Unicode grapheme clusters appropriately segment character units for your script? When you double- or triple-click on the text, is the expected range of characters highlighted? When you move through the text with the cursor, or backspace, etc. do you see the expected behaviour? (Some of the answers to these questions may be picker up in other sections, such as line-breaking, or initial-letter styling.)</p> <div id="insert-segmentation"><section id="issue36_segmentation"> <div class="header-wrapper"><h4 id="x36-lack-of-clarity-on-how-to-encode-n-ko-te-kerende-0">#36 Lack of clarity on how to encode N'Ko te-kerende</h4><a class="self-link" href="#issue36_segmentation" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/36" class="issueLink okIssue">GitHub issue #36</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo</span> <span class="issueScore">3</span></p><p><i class="meta">This issue is applicable to N'Ko.</i></p><p>Certain constructs in N'Ko text mean 'each and every ....', and they appear with dash on the baseline with spaces either side. For example: <img src="images/5f6fa5df-cc88-44c1-87f0-e4420d96b870.png" width="444" alt="Screenshot 2023-05-16 at 17 51 06"></p><p>This is also used in other locations where we might use a dash in Latin text.</p><p>The question is what is the appropriate character for the te-kerende and other similar looking uses.</p><p>More: </p><ul><li> https://w3c.github.io/afrlreq/nko/#tekerende </li> <li> https://github.com/w3c/afrlreq/issues/28 </li> <li> https://github.com/unicode-org/sah/issues/274 (not generally accessible) </li> </ul><p></p><p></p><div class="header-wrapper"><h5 id="the-gap-6"> The GAP </h5><a class="self-link" href="#issue36_segmentation" aria-label="Permalink for this Section"></a></div>Research showed that users are using <span class="codepoint" translate="no"><bdi lang="nqo" dir="rtl">ߺ</bdi> <span class="uname">U+07FA NKO LAJANYALAN</span></span> with spaces either side for this. However, that character's main stated role in the Unicode Standard is to act like the Arabic tatweel and extend the baseline while joining the characters either side.<p></p><p>This approach works in all browsers.</p><p>See an <a href="http://cormand.huma-num.fr/maninkabiblio/periodiques/silabosoona5.pdf">example</a> page 3, col 2 (from the right), below the picture.</p><p>The Unicode Standard doesn't provide any advice on this topic. The original proposal included a request for a te-kerende character, but it was not adopted.</p><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-6"> Action taken </h5><a class="self-link" href="#issue36_segmentation" aria-label="Permalink for this Section"></a></div>The question was raised at a Unicode Script Ad Hoc meeting.<p></p><p></p><p></p><div class="header-wrapper"><h5 id="outcomes-6"> Outcomes </h5><a class="self-link" href="#issue36_segmentation" aria-label="Permalink for this Section"></a></div>The Unicode Script Ad Hoc committee considered the matter and agreed that the te-kerende should be represented using <code translate="no"><space><lajanyalan><space></code>. <p></p><p></p><p></p><div class="header-wrapper"><h5 id="priority-6"> Priority </h5><a class="self-link" href="#issue36_segmentation" aria-label="Permalink for this Section"></a></div>This is already a de facto standard<p></p><p></p><p> </p> </section> </div> </section> </section> <section id="h_inline"><div class="header-wrapper"><h2 id="x5-punctuation-inline-features"><bdi class="secno">5. </bdi>Punctuation & inline features</h2><a class="self-link" href="#h_inline" aria-label="Permalink for Section 5."></a></div> <section id="punctuation_etc" class="ok"><div class="header-wrapper"><h3 id="x5-1-phrase-section-boundaries"><bdi class="secno">5.1 </bdi>Phrase & section boundaries</h3><a class="self-link" href="#punctuation_etc" aria-label="Permalink for Section 5.1"></a></div> <p id="prompt-punctuation_etc" class="status_prompt promptStub">Are there specific problems related to punctuation or the interaction of the text with punctuation (for example separation of punctuation from previous text, but allowing no line break between)? Are there issues related to handling of abbreviation, ellipsis, or iteration? Are there problems related to bracketing information or demarcating things such as proper nouns, etc?</p> <div id="insert-punctuation_etc"></div> </section> <section id="quotations" class="ok"><div class="header-wrapper"><h3 id="x5-2-quotations-citations"><bdi class="secno">5.2 </bdi>Quotations & citations</h3><a class="self-link" href="#quotations" aria-label="Permalink for Section 5.2"></a></div> <p id="prompt-quotations" class="status_prompt promptStub">Are there any issues when dealing with quotations marks, especially when nested? Should block quotes be indented or handled specially?</p> <div id="insert-quotations"></div> </section> <section id="emphasis" class="tbd"><div class="header-wrapper"><h3 id="x5-3-emphasis-highlighting"><bdi class="secno">5.3 </bdi>Emphasis & highlighting</h3><a class="self-link" href="#emphasis" aria-label="Permalink for Section 5.3"></a></div> <p id="prompt-emphasis" class="status_prompt promptStub">How are emphasis and highlighting achieved? If lines or marks are drawn alongside, over or through the text, do they need to be a special distance from the text itself? Is it important to skip characters when underlining, etc? How do things change for vertically set text?</p> <div id="insert-emphasis"></div> </section> <section id="abbrev" class="tbd"><div class="header-wrapper"><h3 id="x5-4-abbreviation-ellipsis-repetition"><bdi class="secno">5.4 </bdi>Abbreviation, ellipsis & repetition</h3><a class="self-link" href="#abbrev" aria-label="Permalink for Section 5.4"></a></div> <p id="prompt-abbrev" class="status_prompt promptStub">What characters or other methods are used to indicate abbreviation, ellipsis & repetition?</p> <div id="insert-abbrev"></div> </section> <section id="inline_notes" class="tbd"><div class="header-wrapper"><h3 id="x5-5-inline-notes-annotations"><bdi class="secno">5.5 </bdi>Inline notes & annotations</h3><a class="self-link" href="#inline_notes" aria-label="Permalink for Section 5.5"></a></div> <p id="prompt-inline_notes" class="status_prompt promptStub">The ruby spec currently specifies an initial subset of requirements for fine-tuning the typography of phonetic and semantic annotations of East Asian text, including furigana, pinyin and zhuyin fuhao systems. Is is adequate for what it sets out to do? What other controls will be needed in the future? What about other types of inline annotation, such as warichu? (For referent-type notes such as footnotes, see below.)</p> <div id="insert-inline_notes"></div> </section> <section id="text_decoration" class="ok"><div class="header-wrapper"><h3 id="x5-6-text-decoration-other-inline-features"><bdi class="secno">5.6 </bdi>Text decoration & other inline features</h3><a class="self-link" href="#text_decoration" aria-label="Permalink for Section 5.6"></a></div> <p id="prompt-text_decoration" class="status_prompt promptStub">This is about ways of marking text (see also specific sections dedicated to quotations and inline notes/annotations). Is it possible to express emphasis or highlight content as expected? Bold, italic and under-/over-lines are not always appropriate, and some scripts have their own unique ways of doing things, that are not in the Western tradition at all. Text delimiters mark certain items or sections off from the main text, such as book names in Chinese, quotations, head markers in Tibetan, etc, and often involve the use of punctuation. Is there any behaviour that isn't well supported, such as overlines for numeric digits in Syriac? Are there issues about the positioning or use of underlines? Some aspects related to the drawing of lines alongside or through text involve local typographic considerations. Do underlines need to be broken in special ways for this script? Do you need support for additional line shapes or widths? Does the distance or position of the lines relative to the text need to vary in ways that are not achievable? Are lines correctly drawn relative to vertical text? </p> <div id="insert-text_decoration"></div> </section> <section id="data_formats" class="ok"><div class="header-wrapper"><h3 id="x5-7-data-formats-numbers"><bdi class="secno">5.7 </bdi>Data formats & numbers</h3><a class="self-link" href="#data_formats" aria-label="Permalink for Section 5.7"></a></div> <p id="prompt-data_formats" class="status_prompt promptStub">If the script has its own set of number digits, are there any issues in how they are used? Does the script or language use special format patterns that are problematic (eg. 12,34,000 in India)? What about date/time formats and selection - and are non-Gregorian calendars needed? Do percent signs and other symbols associated with number work correctly, and do numbers need special decorations, (like in Ethiopic or Syriac)? How about the management of personal names, addresses, etc. in web pages: are there issues?</p> <div id="insert-data_formats"></div> </section> </section> <section id="h_lines_and_paragraphs"><div class="header-wrapper"><h2 id="x6-line-and-paragraph-layout"><bdi class="secno">6. </bdi>Line and paragraph layout</h2><a class="self-link" href="#h_lines_and_paragraphs" aria-label="Permalink for Section 6."></a></div> <section id="line_breaking" class="tbd"><div class="header-wrapper"><h3 id="x6-1-line-breaking-hyphenation"><bdi class="secno">6.1 </bdi>Line breaking & hyphenation</h3><a class="self-link" href="#line_breaking" aria-label="Permalink for Section 6.1"></a></div> <p id="prompt-line_breaking" class="status_prompt promptStub">Does the browser capture the rules about the way text in your script wraps when it hits the end of a line? Does line-breaking wrap whole 'words' at a time, or characters, or something else (such as syllables in Tibetan and Javanese)? What characters should not appear at the end or start of a line, and what should be done to prevent that?</p> <div id="insert-line_breaking"></div> </section> <section id="justification" class="tbd"><div class="header-wrapper"><h3 id="x6-2-text-alignment-justification"><bdi class="secno">6.2 </bdi>Text alignment & justification</h3><a class="self-link" href="#justification" aria-label="Permalink for Section 6.2"></a></div> <p id="prompt-justification" class="status_prompt promptStub">When text in a paragraph needs to have flush lines down both sides, does it follow the rules for your script? Does the script need assistance to conform to a grid pattern? Does your script allow punctuation to hang outside the text box at the start or end of a line? Where adjustments are need to make a line flush, how is that done? Do you shrink/stretch space between words and/or letters? Are word baselines stretched, as in Arabic? What about paragraph indents, or the need for logical alignment keywords, such as start/end, rather than left/right?</p> <div id="insert-justification"></div> </section> <section id="spacing" class="tbd"><div class="header-wrapper"><h3 id="x6-3-text-spacing"><bdi class="secno">6.3 </bdi>Text spacing</h3><a class="self-link" href="#spacing" aria-label="Permalink for Section 6.3"></a></div> <p id="prompt-spacing" class="status_prompt promptStub">Some scripts create emphasis or other effects by spacing out the words, letters or syllables in a word. Are there requirements for this script/language that are unsupported? (For justification related spacing, see below.)</p> <div id="insert-spacing"></div> </section> <section id="baselines" class="ok"><div class="header-wrapper"><h3 id="x6-4-baselines-line-height-etc"><bdi class="secno">6.4 </bdi>Baselines, line-height, etc</h3><a class="self-link" href="#baselines" aria-label="Permalink for Section 6.4"></a></div> <p id="prompt-baselines" class="status_prompt promptStub">Does the browser support requirements for baseline alignment between mixed scripts and in general?</p> <div id="insert-baselines"></div> </section> <section id="lists" class="ok"><div class="header-wrapper"><h3 id="x6-5-lists-counters-etc"><bdi class="secno">6.5 </bdi>Lists, counters, etc.</h3><a class="self-link" href="#lists" aria-label="Permalink for Section 6.5"></a></div> <p id="prompt-lists" class="status_prompt promptStub">The CSS Counter Styles specification describes a limited set of simple and complex styles for counters to be used in list numbering, chapter heading numbering, etc.The rules plus more counter styles (totalling around 120 for over 30 scripts) are listed in the document <a href="https://www.w3.org/TR/predefined-counter-styles/">Ready-made Counter Styles</a>. Do these cover your needs? Are the details correct? Are there other aspects related to counters and lists that need to be addressed?</p> <div id="insert-lists"><section id="issue40_lists"> <div class="header-wrapper"><h4 id="x40-n-ko-counter-styles-not-available-fixed">#40 N’Ko counter styles not available — FIXED !</h4><a class="self-link" href="#issue40_lists" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/afrlreq/issues/40" class="issueLink okIssue">GitHub issue #40</a></p><p class="languageData">Languages: <span class="relevantLanguages">nqo</span> <span class="issueScore">3</span></p><p><i class="meta">This issue is applicable to languages using N'Ko and Adlam orthographies.</i></p><p>It must be possible for authors using the N'Ko orthography to create list and other counters using native digits.</p><p>This requires browser support for customised counter styles, since no browser supports N'Ko or Adlam counters natively.</p><p>More: </p><ul><li> <a href="https://www.w3.org/TR/nkoo-lreq/#h_counters">N’Ko Layout Requirements, Counters</a> </li> </ul><p></p><p></p><p> </p><div class="header-wrapper"><h5 id="fixed-0"> FIXED ! </h5><a class="self-link" href="#issue40_lists" aria-label="Permalink for this Section"></a></div> <b class="meta">This gap is now fixed. For more details, see <a href="https://github.com/w3c/iip/issues/93">this GitHub issue</a>, which is being used to track this gap. Please add any discussion there, and not to this issue.</b><p></p> </section> </div> </section> <section id="initials" class="tbd"><div class="header-wrapper"><h3 id="x6-6-styling-initials"><bdi class="secno">6.6 </bdi>Styling initials</h3><a class="self-link" href="#initials" aria-label="Permalink for Section 6.6"></a></div> <p id="prompt-initials" class="status_prompt promptStub">Does the browser or ereader correctly handle special styling of the initial letter of a line or paragraph, such as for drop caps or similar? How about the size relationship between the large letter and the lines alongide? where does the large letter anchor relative to the lines alongside? is it normal to include initial quote marks in the large letter? is the large letter really a syllable? etc. Are all of these things working as expected?</p> <div id="insert-initials"></div> </section> </section> <section id="h_pages"><div class="header-wrapper"><h2 id="x7-page-book-layout"><bdi class="secno">7. </bdi>Page & book layout</h2><a class="self-link" href="#h_pages" aria-label="Permalink for Section 7."></a></div> <section id="page_layout" class="ok"><div class="header-wrapper"><h3 id="x7-1-general-page-layout-progression"><bdi class="secno">7.1 </bdi>General page layout & progression</h3><a class="self-link" href="#page_layout" aria-label="Permalink for Section 7.1"></a></div> <p id="prompt-page_layout" class="status_prompt promptStub">How are the main text area and ancilliary areas positioned and defined? Are there any special requirements here, such as dimensions in characters for the Japanese kihon hanmen? The book cover for scripts that are read right-to-left scripts is on the right of the spine, rather than the left. Is that provided for? When content can flow vertically and to the left or right, how do you specify the location of objects, text, etc. relative to the flow? For example, keywords 'left' and 'right' are likely to need to be reversed for pages written in English and page written in Arabic. Do tables and grid layouts work as expected? How do columns work in vertical text? Can you mix block of vertical and horizontal text correctly? Does text scroll in the expected direction? Other topics that belong here include any local requirements for things such as printer marks, tables of contents and indexes.</p> <div id="insert-page-layout"></div> </section> <section id="grids_tables" class="ok"><div class="header-wrapper"><h3 id="x7-2-grids-tables"><bdi class="secno">7.2 </bdi>Grids & tables</h3><a class="self-link" href="#grids_tables" aria-label="Permalink for Section 7.2"></a></div> <p id="prompt-grids_tables" class="status_prompt promptStub">Does the script have special requirements for character grids or tables?</p> <div id="insert-grids_tables"></div> </section> <section id="footnotes_etc" class="ok"><div class="header-wrapper"><h3 id="x7-3-footnotes-endnotes-etc"><bdi class="secno">7.3 </bdi>Footnotes, endnotes, etc.</h3><a class="self-link" href="#footnotes_etc" aria-label="Permalink for Section 7.3"></a></div> <p id="prompt-footnotes_etc" class="status_prompt promptStub">Does your script have special requirements for footnotes, endnotes or other necessary annotations of this kind in the way needed for your culture? (There is a section above for purely inline annotations, such as ruby or warichu. This section is more about annotation systems that separate the reference marks and the content of the notes.)</p> <div id="insert-footnotes_etc"></div> </section> <section id="headers_footers" class="ok"><div class="header-wrapper"><h3 id="x7-4-page-headers-footers-etc"><bdi class="secno">7.4 </bdi>Page headers, footers, etc.</h3><a class="self-link" href="#headers_footers" aria-label="Permalink for Section 7.4"></a></div> <p id="prompt-headers_footers" class="status_prompt promptStub">Are there special conventions for page numbering, or the way that running headers and the like are handled?</p> <div id="insert-headers_footers"></div> </section> <section id="interaction" class="ok"><div class="header-wrapper"><h3 id="x7-5-forms-user-interaction"><bdi class="secno">7.5 </bdi>Forms & user interaction</h3><a class="self-link" href="#interaction" aria-label="Permalink for Section 7.5"></a></div> <p id="prompt-interaction" class="status_prompt promptStub">Are vertical form controls well supported? In right-to-left scripts, is it possible to set the base direction for a form field? Is the scroll bar on the correct side? etc.</p> <div id="insert-interaction"></div> </section> </section> <section id="h_other"><div class="header-wrapper"><h2 id="x8-other"><bdi class="secno">8. </bdi>Other</h2><a class="self-link" href="#h_other" aria-label="Permalink for Section 8."></a></div> <section id="culturespecific" class="tbd"><div class="header-wrapper"><h3 id="x8-1-culture-specific-features"><bdi class="secno">8.1 </bdi>Culture-specific features</h3><a class="self-link" href="#culturespecific" aria-label="Permalink for Section 8.1"></a></div> <p class="status_prompt">Sometimes a script or language does things that are not common outside of its sphere of influence. This is a loose bag of additional items that weren't previously mentioned. This section may also be relevant for observations related to locale formats (such as number, date, currency, format support).</p> <div id="insert-culturespecific"></div> </section> <section id="other" class="tbd"><div class="header-wrapper"><h3 id="x8-2-what-else"><bdi class="secno">8.2 </bdi>What else?</h3><a class="self-link" href="#other" aria-label="Permalink for Section 8.2"></a></div> <p class="status_prompt">There are many other CSS modules which may need review for script-specific requirements, not to mention the SVG, HTML, Speech, MathML and other specifications. What else is likely to cause problems for worldwide deployment of the Web, and what requirements need to be addressed to make the Web function well locally?</p> <div id="insert-other"></div> </section> </section> <details id="summaryStats"> <summary style="margin-top:4em; cursor: pointer;" onclick="setUpSummary(); printSummary(true)">Show summary</summary> <pre id="summaryPlaceholder" style="white-space: pre-wrap;"></pre> </details> <script> if (window.location.href.includes('/TR/')) document.getElementById('summaryStats').style.display = 'none' </script> <p role="navigation" id="back-to-top"> <a href="#title"><abbr title="Back to Top">↑</abbr></a> </p><script id="respec-dfn-panel">(() => { // @ts-check if (document.respec) { document.respec.ready.then(setupPanel); } else { setupPanel(); } function setupPanel() { const listener = panelListener(); document.body.addEventListener("keydown", listener); document.body.addEventListener("click", listener); } function panelListener() { /** @type {HTMLElement} */ let panel = null; return event => { const { target, type } = event; if (!(target instanceof HTMLElement)) return; // For keys, we only care about Enter key to activate the panel // otherwise it's activated via a click. if (type === "keydown" && event.key !== "Enter") return; const action = deriveAction(event); switch (action) { case "show": { hidePanel(panel); /** @type {HTMLElement} */ const dfn = target.closest("dfn, .index-term"); panel = document.getElementById(`dfn-panel-for-${dfn.id}`); const coords = deriveCoordinates(event); displayPanel(dfn, panel, coords); break; } case "dock": { panel.style.left = null; panel.style.top = null; panel.classList.add("docked"); break; } case "hide": { hidePanel(panel); panel = null; break; } } }; } /** * @param {MouseEvent|KeyboardEvent} event */ function deriveCoordinates(event) { const target = /** @type HTMLElement */ (event.target); // We prevent synthetic AT clicks from putting // the dialog in a weird place. The AT events sometimes // lack coordinates, so they have clientX/Y = 0 const rect = target.getBoundingClientRect(); if ( event instanceof MouseEvent && event.clientX >= rect.left && event.clientY >= rect.top ) { // The event probably happened inside the bounding rect... return { x: event.clientX, y: event.clientY }; } // Offset to the middle of the element const x = rect.x + rect.width / 2; // Placed at the bottom of the element const y = rect.y + rect.height; return { x, y }; } /** * @param {Event} event */ function deriveAction(event) { const target = /** @type {HTMLElement} */ (event.target); const hitALink = !!target.closest("a"); if (target.closest("dfn:not([data-cite]), .index-term")) { return hitALink ? "none" : "show"; } if (target.closest(".dfn-panel")) { if (hitALink) { return target.classList.contains("self-link") ? "hide" : "dock"; } const panel = target.closest(".dfn-panel"); return panel.classList.contains("docked") ? "hide" : "none"; } if (document.querySelector(".dfn-panel:not([hidden])")) { return "hide"; } return "none"; } /** * @param {HTMLElement} dfn * @param {HTMLElement} panel * @param {{ x: number, y: number }} clickPosition */ function displayPanel(dfn, panel, { x, y }) { panel.hidden = false; // distance (px) between edge of panel and the pointing triangle (caret) const MARGIN = 20; const dfnRects = dfn.getClientRects(); // Find the `top` offset when the `dfn` can be spread across multiple lines let closestTop = 0; let minDiff = Infinity; for (const rect of dfnRects) { const { top, bottom } = rect; const diffFromClickY = Math.abs((top + bottom) / 2 - y); if (diffFromClickY < minDiff) { minDiff = diffFromClickY; closestTop = top; } } const top = window.scrollY + closestTop + dfnRects[0].height; const left = x - MARGIN; panel.style.left = `${left}px`; panel.style.top = `${top}px`; // Find if the panel is flowing out of the window const panelRect = panel.getBoundingClientRect(); const SCREEN_WIDTH = Math.min(window.innerWidth, window.screen.width); if (panelRect.right > SCREEN_WIDTH) { const newLeft = Math.max(MARGIN, x + MARGIN - panelRect.width); const newCaretOffset = left - newLeft; panel.style.left = `${newLeft}px`; /** @type {HTMLElement} */ const caret = panel.querySelector(".caret"); caret.style.left = `${newCaretOffset}px`; } // As it's a dialog, we trap focus. // TODO: when <dialog> becomes a implemented, we should really // use that. trapFocus(panel, dfn); } /** * @param {HTMLElement} panel * @param {HTMLElement} dfn * @returns */ function trapFocus(panel, dfn) { /** @type NodeListOf<HTMLAnchorElement> elements */ const anchors = panel.querySelectorAll("a[href]"); // No need to trap focus if (!anchors.length) return; // Move focus to first anchor element const first = anchors.item(0); first.focus(); const trapListener = createTrapListener(anchors, panel, dfn); panel.addEventListener("keydown", trapListener); // Hiding the panel releases the trap const mo = new MutationObserver(records => { const [record] = records; const target = /** @type HTMLElement */ (record.target); if (target.hidden) { panel.removeEventListener("keydown", trapListener); mo.disconnect(); } }); mo.observe(panel, { attributes: true, attributeFilter: ["hidden"] }); } /** * * @param {NodeListOf<HTMLAnchorElement>} anchors * @param {HTMLElement} panel * @param {HTMLElement} dfn * @returns */ function createTrapListener(anchors, panel, dfn) { const lastIndex = anchors.length - 1; let currentIndex = 0; return event => { switch (event.key) { // Hitting "Tab" traps us in a nice loop around elements. case "Tab": { event.preventDefault(); currentIndex += event.shiftKey ? -1 : +1; if (currentIndex < 0) { currentIndex = lastIndex; } else if (currentIndex > lastIndex) { currentIndex = 0; } anchors.item(currentIndex).focus(); break; } // Hitting "Enter" on an anchor releases the trap. case "Enter": hidePanel(panel); break; // Hitting "Escape" returns focus to dfn. case "Escape": hidePanel(panel); dfn.focus(); return; } }; } /** @param {HTMLElement} panel */ function hidePanel(panel) { if (!panel) return; panel.hidden = true; panel.classList.remove("docked"); } })()</script><script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script></body></html>