CINXE.COM

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="generator" content="ReSpec 35.2.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>Gujarati 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 Gujarati 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/gujr-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": "gujr-gap", "copyrightStart": "2018", "edDraftURI": "https://w3c.github.io/iip/gap-analysis/gujr-gap", "editors": [ { "name": "Richard Ishida", "company": "W3C", "w3cid": 3439 } ], "github": "w3c/iip", "group": "i18n", "preProcess": [ null, null ], "postProcess": [ null ], "langs": [ "Gujarati" ], "langTags": [ "gu" ], "gapDocPath": "https://www.w3.org/TR/gujr-gap/", "publishDate": "2025-02-14", "publishISODate": "2025-02-14T00:00:00.000Z", "generatedSubtitle": "W3C Group Draft Note 14 February 2025" }</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">Gujarati 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="2025-02-14">14 February 2025</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/2025/DNOTE-gujr-gap-20250214/">https://www.w3.org/TR/2025/DNOTE-gujr-gap-20250214/</a> </dd> <dt>Latest published version:</dt><dd> <a href="https://www.w3.org/TR/gujr-gap/">https://www.w3.org/TR/gujr-gap/</a> </dd> <dt>Latest editor's draft:</dt><dd><a href="https://w3c.github.io/iip/gap-analysis/gujr-gap">https://w3c.github.io/iip/gap-analysis/gujr-gap</a></dd> <dt>History:</dt><dd> <a href="https://www.w3.org/standards/history/gujr-gap/">https://www.w3.org/standards/history/gujr-gap/</a> </dd><dd> <a href="https://github.com/w3c/iip/commits/">Commit history</a> </dd> <dt>Editor:</dt><dd class="editor p-author h-card vcard" data-editor-id="3439"> <span class="p-name fn">Richard Ishida</span> (<span class="p-org org h-org">W3C</span>) </dd> <dt>Feedback:</dt><dd> <a href="https://github.com/w3c/iip/">GitHub w3c/iip</a> (<a href="https://github.com/w3c/iip/pulls/">pull requests</a>, <a href="https://github.com/w3c/iip/issues/new/choose">new issue</a>, <a href="https://github.com/w3c/iip/issues/">open issues</a>) </dd> </dl> </details> <p class="copyright"> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2018-2025 <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 Gujarati 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 Gujarati 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/iip/home">Indian Language Enablement (ilreq)</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><li class="tocline"><a class="tocxref" href="#related"><bdi class="secno">1.4 </bdi>Related information</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>Vertical text</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>This document was created by Richard Ishida.</p> <p data-lang="en">See also the <a href="https://github.com/w3c/iip/graphs/contributors">GitHub contributors list</a> for the Indian Language Enablement project, and the <a href="https://github.com/w3c/iip/issues?q=is%3Aissue+label%3As%3Agujr">discussions related to the Gujarati script</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 Gujarati 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> </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 id="related"><div class="header-wrapper"><h3 id="x1-4-related-information"><bdi class="secno">1.4 </bdi>Related information</h3><a class="self-link" href="#related" aria-label="Permalink for Section 1.4"></a></div> <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" target="_blank">Language Matrix</a>.</p> <p>Gap reports are brought to the attention of spec and browser implementers, and are tracked via the <a href="https://github.com/orgs/w3c/projects/95" target="_blank">Gap Analysis Pipeline</a>. (<a href="https://github.com/orgs/w3c/projects/95/views/1?filterQuery=label%3A%22s%3Agujr%22" target="_blank">Filter for Gujarati script items</a>)</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-vertical-text"><bdi class="secno">2.1 </bdi>Vertical text</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? (If the basic direction is right-to-left see <a href="#bidi_text" data-matched-text="[[[#bidi_text]]]" class="sec-ref"><bdi class="secno">2.2 </bdi>Bidirectional text</a>.) 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="issue70_writing_mode"> <div class="header-wrapper"><h4 id="x70-upright-text-in-vertical-lines-doesn-t-segment-correctly">#70 Upright text in vertical lines doesn't segment correctly</h4><a class="self-link" href="#issue70_writing_mode" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/70" class="issueLink advancedIssue">GitHub issue #70</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu pa</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is applicable to many Indian languages.</i> When upright characters appear in vertical lines of text, browsers need to tailor grapheme cluster rules so that full orthographic syllables represented as conjuncts, are kept together. See requirements at: <a href="https://w3c.github.io/ilreq/#h_vertical_arrangements_of_characters">Indic Layout Requirements</a>, but add to those the points made in <a href="https://www.w3.org/International/questions/qa-indic-graphemes.en">Typographic character units in complex scripts</a>. </p><div class="header-wrapper"><h5 id="the-gap"> The GAP </h5><a class="self-link" href="#issue70_writing_mode" aria-label="Permalink for this Section"></a></div><span class="fail">Gecko</span> appears to segment on grapheme clusters. <span class="partial">Blink</span>, and <span class="partial">Webkit</span> keep conjuncts together. But all engines have problems with vowel-signs, especially but not only pre-base vowel-signs. <div class="header-wrapper"><h5 id="priority"> Priority </h5><a class="self-link" href="#issue70_writing_mode" aria-label="Permalink for this Section"></a></div>Marked as advanced, since vertical text is not a common use case. In writing sytems like modern Tamil, it is even less common, since conjuncts are rarely used. <div class="header-wrapper"><h5 id="tests"> Tests </h5><a class="self-link" href="#issue70_writing_mode" aria-label="Permalink for this Section"></a></div><i>Interactive test</i>, <a href="https://github.com/w3c/text_direction_tests/issues/10">When devanagari characters are rendered upright in vertical text, orthographic syllables containing conjuncts are kept together</a><br> <div class="header-wrapper"><h5 id="action-taken"> Action taken </h5><a class="self-link" href="#issue70_writing_mode" aria-label="Permalink for this Section"></a></div><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1829071">Gecko</a> • <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1434892">Blink</a> • <a href="https://bugs.webkit.org/show_bug.cgi?id=255710">Webkit</a> <div class="header-wrapper"><h5 id="outcomes"> Outcomes </h5><a class="self-link" href="#issue70_writing_mode" aria-label="Permalink for this Section"></a></div>tbd <p></p> </section> </div> </section> <section id="bidi_text" class="na"><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"></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="ok"><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">How are fonts grouped into recognisable writing styles? How is each writing style used? Do the standard fallback fonts used in browsers (eg. serif, sans-serif, cursive, etc.) match expectations? Or are additional generic font styles needed? Are special font or OpenType features needed for this script that are not available? What other general, font-related issues arise? The font styles described here refer to alternative types of writing style, such as naskh vs nastaliq; for oblique, italic, and weights see instead <a href="#letterforms" data-matched-text="[[[#letterforms]]]" class="sec-ref"><bdi class="secno">3.3 </bdi>Letterform slopes, weights, & italics</a>.</p> <div id="insert-fonts"></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">If context-sensitive rendering support is needed to shape combinations of letters or position certain glyphs relative to others, is this adequately provided for? 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 ligatures, or show characters that are otherwise hidden, etc? If text is cursive, see the separate section <a href="#cursive" data-matched-text="[[[#cursive]]]" class="sec-ref"><bdi class="secno">3.4 </bdi>Cursive text</a>.</p> <div id="insert-glyphs"></div> </section> <section id="letterforms" class="ok"><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 for a range of text, such as for italicisation, bolding, oblique, etc. Are italicisation, bolding, oblique, etc relevant? Do italic fonts lean in the right direction? Is synthesised italicisation or oblique problematic? Are there other problems relating to bolding or italicisation - perhaps relating to generalised assumptions of applicability? For alternative writing/font styles, see <a href="#fonts" data-matched-text="[[[#fonts]]]" class="sec-ref"><bdi class="secno">3.1 </bdi>Fonts & font styles</a>.</p> <div id="insert-letterforms"></div> </section> <section id="cursive" class="na"><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 (ie. letters are generally joined up, like in 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"></div> </section> <section id="transforms" class="na"><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? For example, do you need to to convert between half-width and full-width presentation forms? Does your script convert letters to uppercase, capitalised and lowercase alternatives according to your typographic needs? How about other transforms?</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">Most languages are now supported by Unicode, but there are still occasional issues. In particular, there may be issues related to ordering of characters, or competing encodings (as in Myanmar), or standardisation of variation selectors or the encoding model (as in Mongolian). 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"></div> </section> <section id="segmentation" class="basic"><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. Are there special requirements for the following operations: forwards/backwards deletion, cursor movement & selection, character counts, searching & matching, text insertion, line-breaking, justification, case conversions, sorting? Are words separated by spaces, or other characters? Are there special requirements when double-clicking or triple-clicking on the text? Are words hyphenated? (Some of the answers to these questions may be picked up in other sections, such as <a href="#line_breaking" data-matched-text="[[[#line_breaking]]]" class="sec-ref"><bdi class="secno">6.1 </bdi>Line breaking & hyphenation</a>, or <a href="#initials" data-matched-text="[[[#initials]]]" class="sec-ref"><bdi class="secno">6.6 </bdi>Styling initials</a>.)</p> <div id="insert-segmentation"><section id="issue89_segmentation"> <div class="header-wrapper"><h4 id="x89-spans-around-partial-orthographic-syllables-can-t-be-styled">#89 Spans around partial orthographic syllables can't be styled </h4><a class="self-link" href="#issue89_segmentation" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/89" class="issueLink advancedIssue">GitHub issue #89</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu pa</span> <span class="issueScore">2</span></p><p>If you try to style part of a syllable by putting a span around the characters you want to style, the overall shape of the syllable is broken. Here are a number of examples: </p><ol><li> Devanagari. If you put a span around the first two characters of the 3-character syllable स्तिठड (eg. in order to color or otherwise style it), the i vowel-sign no longer appears at the start of the word, but looks like it modifies the next character (ठ). </li> <li> Gujarati. If you put a span around the ન્ડ two characters of the 3-character syllable ન્ડિ in ઇન્ડિય (eg. in order to color or otherwise style it), the i vowel-sign no longer appears at the start of the word, but looks like it modifies the next character (ય). </li> <li> Bengali. If you put a span around the ব first character of the two character syllable বি in বিভাগের (eg. in order to color or otherwise style it), the vowel-sign no longer appears at the start of the word, but looks like incorrect inputting at the wrong place. </li> <li> Tamil. If you put a span around the ம first character of the two character syllable மொ in மொழி (eg. in order to color or otherwise style it), the half part of o vowel-sign no longer appears at the start of the word, but looks like incorrect inputting at the wrong place. </li> </ol> Apparently this requirement is a bit difficult to cater to as it requires the knowledge to be transferred by the font to the rendering engine about which part of the glyph is attributed to which code-point in storage. However, if it can be achieved, nothing like it. <p></p> </section> <section id="issue88_segmentation"> <div class="header-wrapper"><h4 id="x88-dandas-are-wrapped-alone-to-the-beginning-of-a-line">#88 Dandas are wrapped alone to the beginning of a line</h4><a class="self-link" href="#issue88_segmentation" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/88" class="issueLink basicIssue">GitHub issue #88</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi gu</span> <span class="issueScore">1</span></p><p>When the Devanagari phrase separator । U+0964 DEVANAGARI DANDA (called purna viram in Hindi) or ॥ U+0965 DEVANAGARI DOUBLE DANDA (deergh viram in Hindi) are used, some browsers select them with the preceding word on double-click, while in other browsers they are selected separately. The properties of purna viram and deergh viram should be the same as the properties of FullStop or other punctuation marks, and a new line should not begin with purna viram and deergh viram.</p> </section> <section id="issue87_segmentation"> <div class="header-wrapper"><h4 id="x87-grapheme-clusters-fail-to-represent-syllabic-conjuncts-in-bengali-devanagari-and-gujarati-fixed">#87 Grapheme clusters fail to represent syllabic conjuncts in Bengali, Devanagari, and Gujarati — FIXED !</h4><a class="self-link" href="#issue87_segmentation" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/87" class="issueLink okIssue">GitHub issue #87</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn gu</span> <span class="issueScore">3</span></p><p><i class="meta">This issue is applicable to most languages with conjunct forms that involve a virama.</i></p><p>Many scripts descended from Brahmi indicate clusters of consonant sounds by merging or stacking the glyphs of the consonants involved in one way or another. These scripts are abugidas, and each consonant character represents a consonant sound and an inherent vowel sound. The merging of glyphs indicates that the inherent vowel sound is dropped between the consonants. In Unicode text, this merging is usually accomplished using a special character between the consonants, which is typically called a virama or 'vowel-killer'.</p><p>When operations such as line breaking, cursor movement, vertical text rendering, deletion, hyphenation, etc are applied to the text these conjuncts must not be split apart. (Line-break opportunities in these scripts usually occur at inter-word spaces, but when a very long word doesn't entirely fit on a line or the CSS <code translate="no">word-break</code> property is set to <code translate="no">break-all</code>, or the CSS <code translate="no">line-break</code> property is set to <code translate="no">anywhere</code>, conjuncts should be kept together.)</p><p>A <a href="file:///Users/ishida/Sites/scripts/glossary/index.html#grapheme">grapheme</a> is a user-perceived unit of text. Text operations that use graphemes as a unit of text include line-breaking, forwards deletion, cursor movement & selection, character counts, text spacing, text insertion, justification, case conversions, and sorting. The Unicode Standard uses generalised rules to define '<a href="https://www.w3.org/TR/i18n-glossary/#dfn-grapheme-cluster">grapheme clusters</a>', which approximate the likely grapheme boundaries in a writing system.</p><p>More: </p><ul><li> <a href="https://r12a.github.io/scripts/beng/bn.html#graphemes">Bengali graphemes</a></li> <li> <a href="https://r12a.github.io/scripts/deva/hi.html#graphemes">Devanagari graphemes</a></li> </ul><p></p><p></p><p></p><div class="header-wrapper"><h5 id="the-gap-0"> The GAP</h5><a class="self-link" href="#issue87_segmentation" aria-label="Permalink for this Section"></a></div> The Unicode concept of grapheme cluster up to Unicode 15.0 fails to represent syllabic conjuncts (plus vowels, etc) in scripts like Bengali, Devanagari, Gujurati, etc. This means that various editing operations, line breaking algorithms, vertical text, etc. are likely to break text at the wrong point.<p></p><p>The reason conjuncts are not kept together is that segmentation rules in Unicode start a new grapheme cluster after the virama.</p><p>CSS uses the concept of <a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">'typographic character unit'</a>, rather than grapheme cluster, in its specs, with the explanation that these cases are beyond the scope of the grapheme cluster concept and that implementations should provide appropriate support.</p><p>More: </p><ul><li> <a href="https://www.w3.org/International/questions/qa-indic-graphemes">Typographic character units in complex scripts</a></li> </ul><p></p><p></p><p> </p><div class="header-wrapper"><h5 id="priority-0"> Priority</h5><a class="self-link" href="#issue87_segmentation" aria-label="Permalink for this Section"></a></div>The impact of incorrectly segmenting text containing conjuncts is significant, affecting the correct handling of editing operations, line breaking algorithms, vertical text, etc. This is an issue with the priority of Basic.<p></p><p></p><p></p><p></p><div class="header-wrapper"><h5 id="tests-0"> Tests</h5><a class="self-link" href="#issue87_segmentation" aria-label="Permalink for this Section"></a></div> <ul><li> <a href="https://w3c.github.io/i18n-tests/results/first-letter-pseudo#deva_tailoring">Selectors 3, first-letter > Conjuncts & orthographic syllables</a></li> <li> <a href="https://github.com/w3c/line_paragraph_tests/issues/1">line-break:anywhere should not break conjuncts</a></li> <li> <a href="https://github.com/w3c/glyph_character_tests/issues/39">Extending highlighted text should not split conjuncts</a></li> </ul><p></p><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-0"> Action taken</h5><a class="self-link" href="#issue87_segmentation" aria-label="Permalink for this Section"></a></div>Discussions took place in the Unicode Script Ad Hoc committee, and a proposal was made by Norbert Lindenberg.<p></p><p>Unicode 15.1 introduced a change to <a href="https://www.unicode.org/reports/tr29/">Unicode® Standard Annex #29, Unicode Text Segmentation</a> that recognised consonants after a virama as a continuation of the grapheme cluster for certain scripts. The scripts affected by this change are those with <a href="https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5B%3AIndic_Conjunct_Break%3DLinker%3A%5D&g=&i=">Indic_Conjunct_Break (InCB)=Linker</a>. Those scripts are currently Bengali, Devanagari, Gujarati, Oriya, Telugu, and Malayalam. (The problem remains for several other scripts).</p><p>As long as applications support the latest rules for grapheme clusters, those scripts should keep conjuncts together.</p><p> </p><div class="header-wrapper"><h5 id="outcomes-0"> Outcomes</h5><a class="self-link" href="#issue87_segmentation" aria-label="Permalink for this Section"></a></div>The latest versions of the <span class="pass">Gecko</span>, <span class="pass">Blink</span>, and <span class="pass">Webkit</span> engines support the new rules for grapheme clusters for Bengali, Devanagari, and Gujarati.<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="tbd"><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">What characters are used to indicate the boundaries of phrases, sentences, and sections? What about other punctuation, such as dashes, connectors, separators, etc? Are there specific problems related to punctuation or the interaction of the text with punctuation (for example, punctuation that is separated from preceding text but must not be wrapped alone to the next line)? Are there problems related to bracketing information or demarcating things such as proper nouns, etc? Some of these topics have their own sections; see also <a href="#quotations" data-matched-text="[[[#quotations]]]" class="sec-ref"><bdi class="secno">5.2 </bdi>Quotations & citations</a>, and <a href="#abbrev" data-matched-text="[[[#abbrev]]]" class="sec-ref"><bdi class="secno">5.4 </bdi>Abbreviation, ellipsis & repetition</a>.</p> <div id="insert-punctuation_etc"></div> </section> <section id="quotations" class="tbd"><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">This is a subtopic of phrase & section boundaries that is worth handling separately. What characters are used to indicate quotations? Do quotations within quotations use different characters? What characters are used to indicate dialogue? Are the same mechanisms used to cite words, or for scare quotes, etc? What about citing book or article names? Are there any issues when dealing with quotations marks, especially when nested? Should block quotes be indented or handled specially? Do quotation marks take text direction into account appropriately?</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? Are there problems?</p> <div id="insert-abbrev"></div> </section> <section id="inline_notes" class="na"><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">What mechanisms, if any, are used to create *inline* notes and annotations? Are the appropriate methods for inline annotations supported for this script? 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? This section deals with <em>inline</em> annotation approaches. For annotation methods where a marker in the text points out to another part of the document see <a href="#footnotes_etc" data-matched-text="[[[#footnotes_etc]]]" class="sec-ref"><bdi class="secno">7.3 </bdi>Footnotes, endnotes, etc.</a>.</p> <div id="insert-inline_notes"></div> </section> <section id="text_decoration" class="basic"><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 section is a catch-all for inline features that don't fit under the previous sections. It can also be used to describe in one place a set of general requirements related to inline features when those features appear in more than one of the sections above. It covers characters or methods (eg. text decoration) that are used to convey information about a range of text. Are all needed forms of highlighting or marking of text available, such as wavy underlining, numeric overbars, etc. If lines 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? Are there other punctuation marks that were not covered in preceding sections? Are lines correctly drawn relative to vertical text?</p> <div id="insert-text_decoration"><section id="issue90_text_decoration"> <div class="header-wrapper"><h4 id="x90-underline-and-overline-need-to-clear-glyph-ascenders-and-descenders">#90 Underline and overline need to clear glyph ascenders and descenders</h4><a class="self-link" href="#issue90_text_decoration" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/90" class="issueLink basicIssue">GitHub issue #90</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu pa</span> <span class="issueScore">1</span></p><p>Indian language text has some signs called as Matras which sometimes join above the shirorekha or below the normal baseline. Applications should ensure that the underline and overline when getting rendered, should adaquetly be taken into consideration. Chrome browser seemed to be perfectly rendering the underline and overline feature by breaking the same where a matra occurs. Internet Explorer also handles it a bit differently by appropriately lowering or heightening the respective lines. </p> </section> </div> </section> <section id="data_formats" class="advanced"><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">Relevant here are formats related to number, currency, dates, personal names, addresses, and so forth. 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"><section id="issue91_data_formats"> <div class="header-wrapper"><h4 id="x91-data-formats-need-to-be-controllable-by-users">#91 Data formats need to be controllable by users</h4><a class="self-link" href="#issue91_data_formats" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/91" class="issueLink advancedIssue">GitHub issue #91</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu pa</span> <span class="issueScore">2</span></p><p>Generally Latin Numerals are acceptable in Devanagari text. Most of the user community identifies with them. However, there could be cases where certain web-pages would prefer to have numerals in Devanagari to cater to mono-lingual (mono-script rather) readers. This is particularly required for input types number and date. It would be useful if the input type values are augmented with the script mnemonics e.g. number_deva or date_deva instead of changing it for entire page through some locale setting. There could be cases where a user may require both kinds of numbering in the same web-page.</p> </section> </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="basic"><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? Is hyphenation used for your script, or something else? If hyphenation is used, does it work as expected? (Note, this is about line-end hyphenation when text is wrapped, rather than use of the hyphen and related characters as punctuation marks.)</p> <div id="insert-line_breaking"><section id="issue88_line_breaking"> <div class="header-wrapper"><h4 id="x88-dandas-are-wrapped-alone-to-the-beginning-of-a-line-0">#88 Dandas are wrapped alone to the beginning of a line</h4><a class="self-link" href="#issue88_line_breaking" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/88" class="issueLink basicIssue">GitHub issue #88</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi gu</span> <span class="issueScore">1</span></p><p>When the Devanagari phrase separator । U+0964 DEVANAGARI DANDA (called purna viram in Hindi) or ॥ U+0965 DEVANAGARI DOUBLE DANDA (deergh viram in Hindi) are used, some browsers select them with the preceding word on double-click, while in other browsers they are selected separately. The properties of purna viram and deergh viram should be the same as the properties of FullStop or other punctuation marks, and a new line should not begin with purna viram and deergh viram.</p> </section> </div> </section> <section id="justification" class="ok"><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? Does the script indent the first line of a paragraph?</p> <div id="insert-justification"></div> </section> <section id="spacing" class="advanced"><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">This section is concerned with spacing that is adjusted around and between characters on a line in ways other than attempts to fit text to a given width (ie. justification). 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? If spacing needs to be applied between letters and numbers, is that possible? What about space associated with punctuation, such as the gap before a colon in French? (For justification related spacing, see <a href="#justification" data-matched-text="[[[#justification]]]" class="sec-ref"><bdi class="secno">6.2 </bdi>Text alignment & justification</a>.)</p> <div id="insert-spacing"><section id="issue118_spacing"> <div class="header-wrapper"><h4 id="x118-browsers-apply-extraneous-spaces-when-letter-spacing">#118 Browsers apply extraneous spaces when letter-spacing</h4><a class="self-link" href="#issue118_spacing" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/118" class="issueLink advancedIssue">GitHub issue #118</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu pa</span> <span class="issueScore">2</span></p><p><i class="meta">This issue applies to all languages that use letter-spacing.</i> Currently browsers that apply letter-spacing do so by adding a space after every letter in the text that is tracked. This results in a superfluous space at the end of the range, which creates an inappropriate gap before the following text. Letter spacing at the end of a line makes the line look misaligned in justified or right-justified text. It also has implications for text that has other styling, such as an outline or a coloured background, at the same time as being stretched. <b class="meta">For more details, see <a href="https://github.com/w3c/eurlreq/issues/23">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="issue117_spacing"> <div class="header-wrapper"><h4 id="x117-letter-spacing-splits-conjuncts">#117 Letter-spacing splits conjuncts</h4><a class="self-link" href="#issue117_spacing" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/117" class="issueLink advancedIssue">GitHub issue #117</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is applicable to most languages that form conjuncts from consonant clusters using an invisible virama.</i> A consonant cluster that uses a conjunct (rather than visible virama) should not be split when letter-spacing is applied. </p><div class="header-wrapper"><h5 id="the-gap-1"> The GAP </h5><a class="self-link" href="#issue117_spacing" aria-label="Permalink for this Section"></a></div> Relying on grapheme clusters as the main segmentation approach fails for many Indic scripts because conjuncts are composed of multiple grapheme clusters, and should be kept together as a unit. For these situations it is necessary to tailor the segmentation algorithm, so that it recognises the whole consonant cluster plus any attached vowel-signs or combining characters as a single unit. For examples see <a href="https://www.w3.org/International/questions/qa-indic-graphemes">Typographic character units in complex scripts</a>. See also notes on segmentation for the following orthographies relevant to this project: <a href="https://r12a.github.io/scripts/deva/hi.html#graphemes">Hindi</a>, <a href="https://r12a.github.io/scripts/beng/bn.html#graphemes">Bangla</a>, <a href="https://r12a.github.io/scripts/guru/pa.html#graphemes">Punjabi</a>, <a href="https://r12a.github.io/scripts/taml/ta.html#graphemes">Tamil</a>. <a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">css-text-3</a> CSS uses the concept of <a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">'typographic character unit'</a>, rather than grapheme cluster, in its specs with the explanation that the cases just described go beyond the scope of the grapheme cluster concept and that implementations should provide appropriate support. The spec doesn't provide details about the support needed for each language. The Unicode Consortium made some attempts to address this issue, but it has so far not yielded results. CLDR now flags up a few scripts for which conjuncts are common. <div class="header-wrapper"><h5 id="priority-1"> Priority </h5><a class="self-link" href="#issue117_spacing" aria-label="Permalink for this Section"></a></div>Keeping conjuncts together is a pretty basic requirement. It is not possible to work around this problem. That said, letter-spacing is not relied on for essential content authoring, therefore the priority was set to advanced. <div class="header-wrapper"><h5 id="tests-results"> Tests & results </h5><a class="self-link" href="#issue117_spacing" aria-label="Permalink for this Section"></a></div> <i>Interactive test</i>, <a href="https://github.com/w3c/line_paragraph_tests/issues/73">When letter-spacing is applied to Devanagari the browser will not split conjuncts</a><br> <i>Interactive test</i>, <a href="https://github.com/w3c/line_paragraph_tests/issues/74">When letter-spacing is applied to Bengali the browser will not split conjuncts</a> <ul><li> <strong>Gecko:</strong> ❌ Most of the half-form conjuncts (which is the large majority of all conjuncts) have space inserted between the glyphs that make up the conjunct (ie. not split into consonants with visible viramas). Vertically-combined glyphs tend not to be split. </li> <li> <strong>Blink:</strong> ❌ Same as Gecko. </li> <li> <strong>Webkit:</strong> ❌ Same as Gecko. </li> </ul> <div class="header-wrapper"><h5 id="action-taken-1"> Action taken </h5><a class="self-link" href="#issue117_spacing" aria-label="Permalink for this Section"></a></div>tbd <div class="header-wrapper"><h5 id="outcomes-1"> Outcomes </h5><a class="self-link" href="#issue117_spacing" aria-label="Permalink for this Section"></a></div>tbd <p></p> </section> </div> </section> <section id="baselines" class="advanced"><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? Are there issues related to line height or inter-line spacing, etc.? Are the requirements for baseline or line height in vertical text covered?</p> <div id="insert-baselines"><section id="issue96_baselines"> <div class="header-wrapper"><h4 id="x96-differences-in-physical-size-for-fonts-affects-baseline-alignment">#96 Differences in physical size for fonts affects baseline alignment</h4><a class="self-link" href="#issue96_baselines" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/96" class="issueLink advancedIssue">GitHub issue #96</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn gu pa</span> <span class="issueScore">2</span></p><p><i class="meta">This issue is especially applicable to northern Indic scripts with a head line.</i> By and large, Indian scripts in browsers are rendered with default fonts provided by back-end Operating Systems. If there are major differences in physical size for a particular font size, which most of the times are, it shows the mixed-script text in an un-organized way. This obviously affects all the base-line attributes. Generally, Indian scripts that have joining line use the joining line as the baseline. Ideally, if a document contains both Devanagari and Gurmukhi text (such as <em>Mahan Khosh</em>), the text should be aligned at the joining line regardless of the script or font.</p> </section> </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">Are there list or other counter styles in use? If so, what is the format used and can that be achieved? Are the correct separators available for use after list counters? Are there other aspects related to counters and lists that need to be addressed? Are list counters handled correctly in vertical text?</p> <div id="insert-lists"><section id="issue110_lists"> <div class="header-wrapper"><h4 id="x110-user-defined-counters-needed-fixed">#110 User-defined counters needed — FIXED !</h4><a class="self-link" href="#issue110_lists" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/110" class="issueLink okIssue">GitHub issue #110</a></p><p class="languageData">Languages: <span class="relevantLanguages">gu</span> <span class="issueScore">3</span></p><p><i class="meta">Customisable counters are needed for many languages.</i> There is no way for users to create local counter styles that are not built in to the browser, and users also often want to tweak the counter style in some way (esp. the prefix/suffix). A <code class="kw" translate="no">gujarati</code> (numeric) counter style is supported by the 3 main browser engines, so there appear to be no issues here. However, the only prefix/suffix supported by browsers is the full stop. Others should be allowed, where the user wants. </p><div class="header-wrapper"><h5 id="fixed"> FIXED ! </h5><a class="self-link" href="#issue110_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> <section id="issue93_lists"> <div class="header-wrapper"><h4 id="x93-customised-counter-styles-are-unavailable-fixed">#93 Customised counter styles are unavailable — FIXED !</h4><a class="self-link" href="#issue93_lists" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/93" class="issueLink okIssue">GitHub issue #93</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu pa ks mr as mni</span> <span class="issueScore">3</span></p><p><i class="meta">Customisable counters are needed for many languages.</i></p><p> </p><p>Many orthographies use native digits or letters for counters, such as those used for list numbering or numbering chapter headings, etc. It needs to be possible to use these local conventions for counters.</p><p></p><p>Users also need to be able to adapt counter styles for a given context or create new ones where the browser doesn't have baked-in support. Often customisation needs are driven by the need to change the counter suffix for particular contexts, but in some cases the algorithms used for numbering can vary from author to author as well.</p><p></p><p>More: </p><ul><li> <a href="https://www.w3.org/International/ilreq/tamil/#h_counters">Tamil counters</a></li> <li> <a href="https://www.w3.org/International/afrlreq/nko/#h_counters">N'Ko counters</a></li> <li> <a href="https://www.w3.org/International/sealreq/thai/#h_counters">Thai counters</a></li> </ul> <p>These are just a few examples out of many.</p><p> </p><div class="header-wrapper"><h5 id="the-gap-2"> The GAP</h5><a class="self-link" href="#issue93_lists" aria-label="Permalink for this Section"></a></div> The major browser engines support a number of hard-coded counter styles. But when this gap was first reported only Gecko supported user defined counter styling. This meant that native counters were not available for a large number of languages, and the styles could not be tweaked by the author for special uses.<p></p><p></p><p><a href="https://w3c.github.io/predefined-counter-styles/">predefined-counter-styles</a> contains templates for counter styles that can be applied by users if the custom counter styles spec is supported.</p><p></p><p><a href="https://www.w3.org/TR/css-counter-styles-3/#simple-numeric">css-counter-styles-3</a> explicitly defines a number of local styles, and the other counter styles can be defined by users if the Counter Styles spec's generic mechanism for defining counter styles was implemented.</p><p></p><p></p><div class="header-wrapper"><h5 id="priority-2"> Priority</h5><a class="self-link" href="#issue93_lists" aria-label="Permalink for this Section"></a></div>The impact of the lack of support cited here is mitigated by the tendency to use western counters, so the impact could be marked as advanced. However native styles (at least the numeric) are widely used in non-Web content, and these features are likely to be widely used when implemented across all major browsers. Therefore the priority is set to basic.<p></p><p></p><p></p><div class="header-wrapper"><h5 id="tests-results-0"> Tests & results</h5><a class="self-link" href="#issue93_lists" aria-label="Permalink for this Section"></a></div><i>I18n test suite</i>, <a href="https://w3c.github.io/i18n-tests/results/custom-counter-styles">Predefined styles</a>.<br>Contains tests for the styles that are explicitly defined in the Counter Styles spec. <span class="pass">Gecko</span> and <span class="pass">Blink</span> provide good coverage. <span class="fail">Webkit</span> covers most styles with some gaps, but fails for CJK and Ethiopic styles. <p></p><p></p><p><i>I18n test suite</i>, <a href="https://w3c.github.io/i18n-tests/results/counter-styles#basics">Basic custom counter styles</a>.<br>The spec is essentially done, and <span class="pass">Gecko</span> and <span class="pass">Blink</span> have implemented it. No support from <span class="fail">Webkit</span>.</p><p></p><p></p><div class="header-wrapper"><h5 id="action-taken-2"> Action taken</h5><a class="self-link" href="#issue93_lists" aria-label="Permalink for this Section"></a></div> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=687225">Blink</a> • <a href="https://bugs.webkit.org/show_bug.cgi?id=167645">WebKit</a><p></p><p></p><p></p><div class="header-wrapper"><h5 id="outcomes-2"> Outcomes</h5><a class="self-link" href="#issue93_lists" aria-label="Permalink for this Section"></a></div> <b>Fixed !</b> <span class="pass">Gecko</span>, <span class="pass">Blink</span>, and <span class="pass">Webkit</span> latest browser versions now all support custom counter styles.<p></p><p></p><p>See <a href="https://caniuse.com/mdn-css_at-rules_counter-style_pad">Can I Use?</a> </p> </section> </div> </section> <section id="initials" class="basic"><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"><section id="issue111_initials"> <div class="header-wrapper"><h4 id="x111-conjuncts-are-not-selected-as-a-single-unit-when-styling-initials">#111 Conjuncts are not selected as a single unit when styling initials</h4><a class="self-link" href="#issue111_initials" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/111" class="issueLink basicIssue">GitHub issue #111</a></p><p class="languageData">Languages: <span class="relevantLanguages">gu</span> <span class="issueScore">1</span></p><p><i class="meta">This issue is applicable to most languages that form conjuncts from consonant clusters using an invisible virama.</i> Because of the problems associated with grapheme cluster boundaries (see above), first-letter selection in CSS doesn't work well for conjuncts. For example, chrome fails to style the whole conjunct in પ્રૌદ્યોગીકી when using ::first-letter in a selector, and styles only the પ્ instead of પ્રૌ. Similar is the case of Internet Explorer, it only styles પ. This is problematic for many words in a script such as Gujarati, and forces the content author to use explicit spans rather than the proper mechanism for selecting initial letter. <a href="https://w3c.github.io/ilreq/#h_indic_orthographic_syllable_boundaries">Indian Layout Requirements</a> provides a grammar for indian orthographic syllable boundaries which works for Gujarati, and CSS uses the concept of <a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">'typographic character unit'</a>, rather than grapheme cluster, in its specs with the explanation that these cases are beyond the scope of the grapheme cluster concept and that implementations should provide appropriate support. In addition, a modification to the concept of grapheme cluster is <a href="https://www.unicode.org/reports/tr29/proposed.html#Rule_Constraints">currently in development</a> at the Unicode Consortium, which is likely to resolve the problem for a script like Gujarati. In addition, the alignment of styled initial-letter character glyphs with the rest of the text is not clearly specified or implemented. <b class="meta">For more details, see <a href="https://github.com/w3c/iip/issues/94">this GitHub issue</a>, which is being used to track this gap.</b></p> </section> <section id="issue84_initials"> <div class="header-wrapper"><h4 id="x84-initial-letter-positioning-is-not-widely-available">#84 initial-letter positioning is not widely available</h4><a class="self-link" href="#issue84_initials" aria-label="Permalink for this Section"></a></div> <p class="ghLink"><a target="_blank" href="https://github.com/w3c/iip/issues/84" class="issueLink advancedIssue">GitHub issue #84</a></p><p class="languageData">Languages: <span class="relevantLanguages">hi bn ta gu pa</span> <span class="issueScore">2</span></p><p>Having selected the correct text for highlighting, it is important to ensure proper alignment of the baseline and height of the initial letter highlight relative to the other lines of text. This doesn't work well without help from the dedicated CSS properties, <code class="kw" translate="no">initial-letters</code> and the <code class="kw" translate="no">initial-letters-align</code>. Unfortunately, only Safari supports the first property, and it requires the -webkit prefix, so this is still an immature feature. Safari aligns the alphabetic baseline of the highlighted text with that on the specified number of lines. The relationship between the highlighted letters and the first line of the paragraph appears to be based on cap height, but is not clear. The requirements for that relationship are not yet really clear, despite the information in <a href="https://w3c.github.io/ilreq/#h_initial_letter_styling">Indian Layout Requirements</a>. The impact here is advanced, since it is mainly needed for advanced layouts.</p> </section> </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. See also <a href="#grids_tables" data-matched-text="[[[#grids_tables]]]" class="sec-ref"><bdi class="secno">7.2 </bdi>Grids & tables</a>.</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">As a subtopic of page layout, does the script have special requirements for character grids or for 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? (See <a href="#inline_notes" data-matched-text="[[[#inline_notes]]]" class="sec-ref"><bdi class="secno">5.5 </bdi>Inline notes & annotations</a> 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. Are there other aspects related to user interaction that need to be addressed?</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>