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>Lao Script Resources</title> <style> /* High level style sheet for i18n respec docs */ /* COLOR */ :root { --code-color: #A52A2A; } /* DARK MODE */ @media (prefers-color-scheme: dark) { :root { --code-color: rgb(215 99 99); } } /* HEADINGS */ h2 { margin-top: 3em; margin-bottom: 0em; } .head h2, #abstract h2, #sotd h2 { margin-top: 0; } h3 { margin-top: 3em; } h4 { font-size: 100%; font-weight: normal; color: #005a9c; margin-top: 2em; } .leadin { font-weight: bold; } /* CHANGE MARKUP */ ins { background-color: #99FF99; text-decoration: none; } del { display: inline; color: silver; } /* FIGURES */ figure { margin-bottom: 2em; text-align: center; } figcaption { text-align: center; margin: 0.5em 2em; font-style: italic; font-size: 90%; } .figno:after { content: ':\00A0 '; } /* LINKS */ a.termref:link { color:#C60; text-decoration:none; border-bottom: 1px dotted #FC0; } a.termref:hover { color:#C60; text-decoration:none; border-bottom: 1px dotted #FC0; } a.termref:visited { color:#C60; text-decoration:none; border-bottom: 1px dotted #FC0; } a.termref:active { color:#C60; text-decoration:none; border-bottom: 1px dotted #FC0; } /* INLINE MARKUP */ .qterm:before, .qchar:before { content: "'"; } .qterm:after, .qchar:after { content: "'"; } .quote:before { content: '"'; } .quote:after { content: '"'; } code { color: var(--code-color); font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; font-size: 100%; } samp, kbd { font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; font-size: 100%; } /* TRANSCRIPTIONS */ .ipa { font-family: ExtendedLatinWF, doulosipa,"Gentium Plus", "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica", sans-serif; font-size: 110%; font-feature-settings: "ss05" 1; } .ipa:before { content: '⌈'; font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; margin-right: 1.5px; margin-left: 0.2em; color: #aaa; } .ipa:after { content: '⌋'; font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; margin-right: 0.2em; margin-left: 1.5px; color: #aaa; } .transc { font-family: ExtendedLatinWF, "Gentium Plus", Gentium, "Lucida Sans Unicode", "Lucida Grande", 'lucida sans', "helvetica neue", sans-serif; font-size: 1.1em; font-style: italic; font-weight: 300; font-feature-settings: "ss05" 1; } .transc:before { content: '<'; font-family: ExtendedLatinWF; margin-right: 1.5px; margin-left: 0.2em; color: #aaa; font-style: italic; } .transc:after { content: '>'; font-family: ExtendedLatinWF; margin-right: 0.2em; margin-left: 1.5px; color: #aaa; font-style: italic; } .meaning { letter-spacing: 0.02em; } .meaning:before { content: '‘'; } .meaning:after { content: '’'; } .name { font-style: italic; font-feature-settings: "ss05" 1; } .uname { text-transform: uppercase; font-size: 85%; letter-spacing:0.03em; } .prompt { font-style: italic; color: #aaa; font-size: 90%; margin-bottom: 4em; } /* LREQ DOC STYLES */ .prompts, .status_prompt { font-style: italic; color: #999; font-size: 90%; } dl.reslinks { /* border-block-end: 1px solid #ccc; */ margin-block-end: 3em; } .reslinks dt { font-size: 80%; } .reslinks dd { font-size: 90%; } .reslinks a[href] { color: darkorange; } .reslinks a[href]:visited { color: darkorange; } .variable.empty[href], .variable.empty[href]:visited { color: gray; font-style: italic; text-decoration: none; } #linkWarning { margin-inline: 2.5%; background-color: antiquewhite; border-radius: 1em; font-size: 90%; padding: 1em; z-index: 2000; } #closeLinkWarning { float:right; font-size:120%; margin-inline:1em; cursor:pointer; color: #999; } </style> <link rel="stylesheet" href="local.css"> <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 points to resources for the layout and presentation of text in languages that use the Lao script. The target audience includes developers of Web standards and technologies, such as HTML, CSS, Mobile Web, Digital Publications, and Unicode, as well as implementers of web browsers, ebook readers, and other applications that need to render Lao text."> <link rel="canonical" href="https://www.w3.org/TR/laoo-lreq/"> <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": "laoo-lreq", "copyrightStart": "2019", "edDraftURI": "https://w3c.github.io/sealreq/lao/", "editors": [ { "name": "Richard Ishida", "company": "W3C", "w3cid": 3439 } ], "group": "i18n", "github": "w3c/sealreq", "preProcess": [ null, null ], "postProcess": [ null ], "publishDate": "2024-11-14", "publishISODate": "2024-11-14T00:00:00.000Z", "generatedSubtitle": "W3C Group Draft Note 14 November 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">Lao Script Resources</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-11-14">14 November 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-laoo-lreq-20241114/">https://www.w3.org/TR/2024/DNOTE-laoo-lreq-20241114/</a> </dd> <dt>Latest published version:</dt><dd> <a href="https://www.w3.org/TR/laoo-lreq/">https://www.w3.org/TR/laoo-lreq/</a> </dd> <dt>Latest editor's draft:</dt><dd><a href="https://w3c.github.io/sealreq/lao/">https://w3c.github.io/sealreq/lao/</a></dd> <dt>History:</dt><dd> <a href="https://www.w3.org/standards/history/laoo-lreq/">https://www.w3.org/standards/history/laoo-lreq/</a> </dd><dd> <a href="https://github.com/w3c/sealreq/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/sealreq/">GitHub w3c/sealreq</a> (<a href="https://github.com/w3c/sealreq/pulls/">pull requests</a>, <a href="https://github.com/w3c/sealreq/issues/new/choose">new issue</a>, <a href="https://github.com/w3c/sealreq/issues/">open issues</a>) </dd> </dl> </details> <p class="copyright"> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2019-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 points to resources for the layout and presentation of text in languages that use the Lao script. The target audience includes developers of Web standards and technologies, such as HTML, CSS, Mobile Web, Digital Publications, and Unicode, as well as implementers of web browsers, ebook readers, and other applications that need to render Lao text.</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 points to resources for Lao script layout and text support on the Web and in eBooks. These requirements provide information for Web technologies such as CSS, HTML and digital publications about how to support languages written using the Lao script. The information here is developed in conjunction with a <a href="https://www.w3.org/TR/laoo-lreq/">document that summarises gaps</a> where the Web fails to adequately support the Lao script.</p> <p>The editor's draft of this document is being developed in the GitHub repository <a href="https://w3c.github.io/sealreq/">Southeast Asian (sealreq)</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>To make it easier to track comments, please raise separate issues or emails for each comment, and point to the section you are commenting on using a URL.</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="#h_acknowledgements"><bdi class="secno">1.1 </bdi>Contributors</a></li><li class="tocline"><a class="tocxref" href="#h_about_this_document"><bdi class="secno">1.2 </bdi>About this document</a></li><li class="tocline"><a class="tocxref" href="#h_gap_analysis"><bdi class="secno">1.3 </bdi>Gap analysis</a></li><li class="tocline"><a class="tocxref" href="#h_info_requests"><bdi class="secno">1.4 </bdi>Related resources</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_script_overview"><bdi class="secno">2. </bdi>Lao Script Overview</a></li><li class="tocline"><a class="tocxref" href="#h_all_topics"><bdi class="secno">3. </bdi>All topics</a></li><li class="tocline"><a class="tocxref" href="#h_direction"><bdi class="secno">4. </bdi>Text direction</a></li><li class="tocline"><a class="tocxref" href="#h_shaping"><bdi class="secno">5. </bdi>Glyph shaping & positioning</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#fonts"><bdi class="secno">5.1 </bdi>Fonts & font styles</a></li><li class="tocline"><a class="tocxref" href="#glyphs"><bdi class="secno">5.2 </bdi>Context-based shaping & positioning</a></li><li class="tocline"><a class="tocxref" href="#cursive"><bdi class="secno">5.3 </bdi>Cursive text</a></li><li class="tocline"><a class="tocxref" href="#letterforms"><bdi class="secno">5.4 </bdi>Letterform slopes, weights, & italics</a></li><li class="tocline"><a class="tocxref" href="#transforms"><bdi class="secno">5.5 </bdi>Case & other character transforms</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_segmentation"><bdi class="secno">6. </bdi>Typographic units</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#encoding"><bdi class="secno">6.1 </bdi>Characters & encoding</a></li><li class="tocline"><a class="tocxref" href="#segmentation"><bdi class="secno">6.2 </bdi>Grapheme/word segmentation & selection</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_inline"><bdi class="secno">7. </bdi>Punctuation & inline features</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#punctuation_etc"><bdi class="secno">7.1 </bdi>Phrase & section boundaries</a></li><li class="tocline"><a class="tocxref" href="#quotations"><bdi class="secno">7.2 </bdi>Quotations & citations</a></li><li class="tocline"><a class="tocxref" href="#emphasis"><bdi class="secno">7.3 </bdi>Emphasis & highlighting</a></li><li class="tocline"><a class="tocxref" href="#abbrev"><bdi class="secno">7.4 </bdi>Abbreviation, ellipsis & repetition</a></li><li class="tocline"><a class="tocxref" href="#inline_notes"><bdi class="secno">7.5 </bdi>Inline notes & annotations</a></li><li class="tocline"><a class="tocxref" href="#text_decoration"><bdi class="secno">7.6 </bdi>Other text decoration & inline features</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_para"><bdi class="secno">8. </bdi>Line & paragraph layout</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#line_breaking"><bdi class="secno">8.1 </bdi>Line breaking & hyphenation</a></li><li class="tocline"><a class="tocxref" href="#justification"><bdi class="secno">8.2 </bdi>Text alignment & justification</a></li><li class="tocline"><a class="tocxref" href="#spacing"><bdi class="secno">8.3 </bdi>Text spacing</a></li><li class="tocline"><a class="tocxref" href="#baselines"><bdi class="secno">8.4 </bdi>Baselines, line height, etc.</a></li><li class="tocline"><a class="tocxref" href="#lists"><bdi class="secno">8.5 </bdi>Lists, counters, etc.</a></li><li class="tocline"><a class="tocxref" href="#initials"><bdi class="secno">8.6 </bdi>Styling initials</a></li></ol></li><li class="tocline"><a class="tocxref" href="#h_page"><bdi class="secno">9. </bdi>Page & book layout</a><ol class="toc"><li class="tocline"><a class="tocxref" href="#page_layout"><bdi class="secno">9.1 </bdi>General page layout & progression</a></li><li class="tocline"><a class="tocxref" href="#grids_tables"><bdi class="secno">9.2 </bdi>Grids & tables</a></li><li class="tocline"><a class="tocxref" href="#footnotes_etc"><bdi class="secno">9.3 </bdi>Footnotes, endnotes, etc</a></li><li class="tocline"><a class="tocxref" href="#headers_footers"><bdi class="secno">9.4 </bdi>Page headers, footers, etc</a></li><li class="tocline"><a class="tocxref" href="#interaction"><bdi class="secno">9.5 </bdi>Forms & user interaction</a></li></ol></li></ol></nav> <div id="linkWarning"> <p>Some links on this page point to repositories or pages to which information will be added over time. Initially, the link may produce no results, but as issues, tests, etc. are created they will show up.</p> <p>Links that have a gray color led to no content the last time this document was updated. They are still live, however, since relevant content could be added at any time. When the document is updated, links that now point to results will have their live colour restored.</p> </div> <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="h_acknowledgements"><div class="header-wrapper"><h3 id="x1-1-contributors"><bdi class="secno">1.1 </bdi>Contributors</h3><a class="self-link" href="#h_acknowledgements" aria-label="Permalink for Section 1.1"></a></div> <p>This document was created by Richard Ishida.</p> <p>The following people contributed information that was used in preparing this document (in alphabetic order): Anousak Anthony Souphavanh, Arthit Suriyawongkul, Ben Mitchell, James Clarke, John Durdin, Martin Hosken, and Norbert Lindenberg as members of the <abbr title="World Wide Web Consortium">W3C</abbr>'s <a href="https://w3c.github.io/sealreq/home">Southeast Asian Language Enablement</a> community.</p> <p data-lang="en">See also the <a href="https://github.com/w3c/sealreq/graphs/contributors">GitHub contributors list</a> for the Southeast Asian Language Enablement project, and the <a href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo">discussions related to the Lao script</a>.</p> </section> <section id="h_about_this_document"><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="#h_about_this_document" aria-label="Permalink for Section 1.2"></a></div> <p>This document points to resources for Lao script layout and text support on the Web and in eBooks. These resources provide information for developers of Web technologies such as CSS, HTML and digital publications, and for application developers, about how to support languages written using the Lao script. They include requirements, tests, GitHub discussions, type samples, and more,</p> <p>The document focuses on typographic layout issues. For a deeper understanding of the Lao script and how it works see <cite>Southeast Asian Orthography Notes</cite>, which includes topics such as: <a href="https://r12a.github.io/scripts/laoo/lo.html#phonology">Phonology</a>, <a href="https://r12a.github.io/scripts/laoo/lo.html#vowels">Vowels</a>, <a href="https://r12a.github.io/scripts/laoo/lo.html#consonants">Consonants</a>, <a href="https://r12a.github.io/scripts/laoo/lo.html#encoding">Encoding choices</a>, and <a href="https://r12a.github.io/scripts/laoo/lo.html#numbers">Numbers</a>. </p> </section> <section id="h_gap_analysis"><div class="header-wrapper"><h3 id="x1-3-gap-analysis"><bdi class="secno">1.3 </bdi>Gap analysis</h3><a class="self-link" href="#h_gap_analysis" aria-label="Permalink for Section 1.3"></a></div> <p>This document should be used alongside a separate document, <a href="https://www.w3.org/TR/laoo-lreq/"><cite>Lao Gap Analysis</cite></a>, which describes gaps in language support for users of the Lao script, and prioritises and describes the impact of those gaps on the user.</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%3Alaoo%22" target="_blank">Filter for Lao script items</a>)</p> </section> <section id="h_info_requests"><div class="header-wrapper"><h3 id="x1-4-related-resources"><bdi class="secno">1.4 </bdi>Related resources</h3><a class="self-link" href="#h_info_requests" aria-label="Permalink for Section 1.4"></a></div> <p>The document <a href="https://www.w3.org/TR/typography/"><cite>Language enablement index</cite></a> points to this document and others, and provides a central location for developers and implementers to find information related to various scripts.</p> <p>The <abbr title="World Wide Web Consortium">W3C</abbr> also has a repository with discussion threads related to the Lao script, including requests from developers to the user community for information about how scripts/languages work, and a notification system that tracks issues in <abbr title="World Wide Web Consortium">W3C</abbr> working groups related to the Lao script. See a list of <a target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3Aquestion+">unresolved questions</a> for Lao experts. Each section below points to related discussions. See also the <a href="https://w3c.github.io/sealreq/home">repository home page</a>.</p> </section> </section> <section id="h_script_overview"><div class="header-wrapper"><h2 id="x2-lao-script-overview"><bdi class="secno">2. </bdi>Lao Script Overview</h2><a class="self-link" href="#h_script_overview" aria-label="Permalink for Section 2."></a></div> <p>The Lao orthography is an <a class="termref" href="https://www.w3.org/TR/i18n-glossary/#dfn-inherent-vowel">alphabet</a>. This means that both consonants and vowels are indicated.</p> <p>Lao text runs left to right in horizontal lines. Spaces separate phrases, rather than words. There is no case distinction.</p> <p>Each <a class="termref" href="https://r12a.github.io/scripts/glossary/index.html#onset">onset</a> consonant is associated with a high, mid, or low class related to tone. Tone is indicated by a combination of the consonant class, the syllable type (live/dead), plus any tone mark.</p> <p>No conjuncts are used for consonant clusters, except for one subjoined consonant, used in combination only with HA.</p> <p>Syllable-initial clusters and syllable-final consonant sounds are all written with ordinary consonant letters. However, because all vowels are written, it is not difficult to algorithmically detect syllable boundaries.</p> <p>Unlike its close relative, Thai, the Lao orthography is an alphabet and has no <a class="termref" href="https://www.w3.org/TR/i18n-glossary//#dfn-inherent-vowel">inherent vowel</a>, but it still represents vowels using vowel signs (including combining marks, dedicated vowel letters, and a couple of repurposed consonants).</p> <p>Vowels in Lao are written with a mixture of combining characters and ordinary spacing characters. Lao uses <em>visual placement</em>: only the vowel components that appear above or below the consonant are combining marks; the others are ordinary spacing characters that are typed <em>in the order seen</em>. There are <a class="termref" href="https://www.w3.org/TR/i18n-glossary/#dfn-pre-base">pre-base vowel glyphs</a>. In principle, there are no single-character <a class="termref" href="https://www.w3.org/TR/i18n-glossary/#dfn-circumgraph">circumgraphs</a> in Lao text, but a single vowel or diphthong is frequently made up of multiple components.</p> <p>There are no <a class="termref" href="https://www.w3.org/TR/i18n-glossary/#dfn-independent-vowel">independent vowels</a>, and <a class="termref" href="https://www.w3.org/TR/i18n-glossary/#dfn-standalone-vowel">standalone vowel sounds</a> are written using vowel signs applied to <span class="codepoint noindex" translate="no"><span lang="th">ອ</span> <span class="uname">U+0EAD LETTER O</span></span>.</p> <p>Lao has a large number of <a class="termref" href="https://www.w3.org/TR/i18n-glossary/#dfn-composite-vowel">multipart vowels</a> (including diphthongs) made from dedicated vowel characters and from consonants. Composite vowels can involve up to 4 glyphs (plus a tone mark), and glyphs can surround the base consonant(s) on up to 3 sides.</p> <p>Vowels are often written differently when they appear in a closed vs. open syllable.</p> <p>Lao has native digits, and they are commonly used.</p> </section> <section id="all-topics"><div class="header-wrapper"><h2 id="h_all_topics"><bdi class="secno">3. </bdi>All topics</h2><a class="self-link" href="#h_all_topics" aria-label="Permalink for Section 3."></a></div> <aside class="prompts">Links reveal all results, regardless of topic, for certain issues, tests, and samples. </aside> <dl class="reslinks"> <dt>GitHub discussions</dt> <dd> <ul> <li><a target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Aquestion+is%3Aopen">Open requests for information</a></li> <li><a target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo">All Lao issues in the sealreq repo</a></li> <li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=is%3Aissue+label%3Asealreq">All Southeast Asian issues in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Type samples</dt> <dd> <ul> <li><a target="_blank" href="https://github.com/w3c/type-samples/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo"><abbr title="World Wide Web Consortium">W3C</abbr> type samples</a></li> <li><a target="_blank" href="https://github.com/r12a/typesamples/issues?q=is%3Aopen+label%3As.laoo">r12a type samples</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-writing_mode"> <li><a target="_blank" href="https://github.com/w3c/text_direction_tests/issues?q=is%3Aissue+label%3As%3Alaoo">Text direction</a> • <a target="_blank" href="https://github.com/w3c/glyph_character_tests/issues?q=is%3Aissue+label%3As%3Alaoo">Glyphs & characters</a> • <a target="_blank" href="https://github.com/w3c/character_phrase_tests/issues?q=is%3Aissue+label%3As%3Alaoo">Punctuation & inline</a> • <a target="_blank" href="https://github.com/w3c/line_paragraph_tests/issues?q=is%3Aissue+label%3As%3Alaoo">Lines & paragraphs</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical" target="_blank">CSS Writing Modes: Vertical text</a></li><li><a href="https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html" target="_blank">CSS Writing Modes: Horizontal in vertical</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/">Lao</a></li> </ul> </dd> </dl> </section> <section id="h_direction"><div class="header-wrapper"><h2 id="x4-text-direction"><bdi class="secno">4. </bdi>Text direction</h2><a class="self-link" href="#h_direction" aria-label="Permalink for Section 4."></a></div> <p>Lao is written horizontally, left to right.</p> </section> <section id="h_shaping"><div class="header-wrapper"><h2 id="x5-glyph-shaping-positioning"><bdi class="secno">5. </bdi>Glyph shaping & positioning</h2><a class="self-link" href="#h_shaping" aria-label="Permalink for Section 5."></a></div> <section id="fonts"><div class="header-wrapper"><h3 id="x5-1-fonts-font-styles"><bdi class="secno">5.1 </bdi>Fonts & font styles</h3><a class="self-link" href="#fonts" aria-label="Permalink for Section 5.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">5.4 </bdi>Letterform slopes, weights, & italics</a>.</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><a target="_blank" href="https://r12a.github.io/scripts/fontlist/index.html?script=laoo">List of system fonts</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Afonts+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Afonts">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Afonts">Southeast Asian issues in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-fonts"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-fonts.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/glyph_character_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3AFonts">Exploratory/interactive test repo</a></li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#fonts">Fonts & font styles</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-fonts"> <li><cite>CSS Fonts</cite>:   <a href="https://drafts.csswg.org/css-fonts/" target="_blank">All</a></li></ul> </dd> </dl> </section> <section id="glyphs"><div class="header-wrapper"><h3 id="x5-2-context-based-shaping-positioning"><bdi class="secno">5.2 </bdi>Context-based shaping & positioning</h3><a class="self-link" href="#glyphs" aria-label="Permalink for Section 5.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">5.3 </bdi>Cursive text</a>.</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#context">Context-based shaping & positioning</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Aglyphs+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aglyphs">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Aglyphs">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-glyphs"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd> <dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#glyphs">Glyph shaping & positioning</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-glyphs"> </ul> </dd> </dl> </section> <section id="cursive"><div class="header-wrapper"><h3 id="x5-3-cursive-text"><bdi class="secno">5.3 </bdi>Cursive text</h3><a class="self-link" href="#cursive" aria-label="Permalink for Section 5.3"></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> <p>Not applicable.</p> </section> <section id="letterforms"><div class="header-wrapper"><h3 id="x5-4-letterform-slopes-weights-italics"><bdi class="secno">5.4 </bdi>Letterform slopes, weights, & italics</h3><a class="self-link" href="#letterforms" aria-label="Permalink for Section 5.4"></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">5.1 </bdi>Fonts & font styles</a>.</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#fontstyle">Letterform slopes, weights, & italics</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Aletterforms+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aletterforms">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Aletterforms">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-letterforms"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-letterforms.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/glyph_character_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aletterforms">Exploratory/interactive test repo</a></li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#letterforms">Letterform slopes, weights, & italics</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-letterforms"> <li><cite>CSS Fonts</cite>:   <a href="https://drafts.csswg.org/css-fonts/#font-style-prop" target="_blank">Font style: the font-style property</a></li><li><cite>CSS Fonts</cite>:   <a href="https://drafts.csswg.org/css-fonts/#font-weight-prop" target="_blank">Font weight: the font-weight property</a></li></ul> </dd> </dl> </section> <section id="transforms"><div class="header-wrapper"><h3 id="x5-5-case-other-character-transforms"><bdi class="secno">5.5 </bdi>Case & other character transforms</h3><a class="self-link" href="#transforms" aria-label="Permalink for Section 5.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> <p>Not applicable.</p> </section> </section> <section id="h_segmentation"><div class="header-wrapper"><h2 id="x6-typographic-units"><bdi class="secno">6. </bdi>Typographic units</h2><a class="self-link" href="#h_segmentation" aria-label="Permalink for Section 6."></a></div> <section id="encoding"><div class="header-wrapper"><h3 id="x6-1-characters-encoding"><bdi class="secno">6.1 </bdi>Characters & encoding</h3><a class="self-link" href="#encoding" aria-label="Permalink for Section 6.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes:</cite> <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#vowels" class="external">Vowels</a> • <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#consonants" class="external">Consonants</a></li> <li><a target="_blank" href="https://r12a.github.io/app-charuse/index.html?language=lo">Character usage</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aencoding+label%3Aquestion">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aencoding">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Aencoding">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-encoding"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#encoding">Characters & encoding</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-encoding"> </ul> </dd> </dl> </section> <section id="segmentation"><div class="header-wrapper"><h3 id="x6-2-grapheme-word-segmentation-selection"><bdi class="secno">6.2 </bdi>Grapheme/word segmentation & selection</h3><a class="self-link" href="#segmentation" aria-label="Permalink for Section 6.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">8.1 </bdi>Line breaking & hyphenation</a>, or <a href="#initials" data-matched-text="[[[#initials]]]" class="sec-ref"><bdi class="secno">8.6 </bdi>Styling initials</a>.)</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes:</cite> <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#word" class="external">Word boundaries</a> • <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#graphemes" class="external">Graphemes</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Asegmentation+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Asegmentation">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Asegmentation">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-segmentation"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-grapheme-word-segmentation.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/glyph_character_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Asegmentation">Exploratory/interactive test repo</a></li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#segmentation">Grapheme/word segmentation & selection</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-segmentation"> </ul> </dd> </dl> </section> </section> <section id="h_inline"><div class="header-wrapper"><h2 id="x7-punctuation-inline-features"><bdi class="secno">7. </bdi>Punctuation & inline features</h2><a class="self-link" href="#h_inline" aria-label="Permalink for Section 7."></a></div> <section id="punctuation_etc"><div class="header-wrapper"><h3 id="x7-1-phrase-section-boundaries"><bdi class="secno">7.1 </bdi>Phrase & section boundaries</h3><a class="self-link" href="#punctuation_etc" aria-label="Permalink for Section 7.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">7.2 </bdi>Quotations & citations</a>, and <a href="#abbrev" data-matched-text="[[[#abbrev]]]" class="sec-ref"><bdi class="secno">7.4 </bdi>Abbreviation, ellipsis & repetition</a>.</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes:</cite> <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#phrase" class="external">Phrase & section boundaries</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Apunctuation_etc+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Apunctuation_etc">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Apunctuation_etc">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-punctuation_etc"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#punctuation_etc">Phrase & section boundaries</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-punctuation_etc"> </ul> </dd> </dl> </section> <section id="quotations"><div class="header-wrapper"><h3 id="x7-2-quotations-citations"><bdi class="secno">7.2 </bdi>Quotations & citations</h3><a class="self-link" href="#quotations" aria-label="Permalink for Section 7.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#quotations" class="external">Quotations & citations</a></li> <li><cite>Wikipedia</cite>: <a target="_blank" href="https://en.wikipedia.org/wiki/Quotation_mark" class="external">Quotation mark</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Aquotations+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aquotations">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Aquotations">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-quotations"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-quotations.html#laoo">Exploratory/interactive test results</a> </li><li><a class="variable empty" target="_blank" href="https://github.com/w3c/character_phrase_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aquotations">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/the-q-element.html" target="_blank">The q element</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#quotations">Quotations & citations</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-quotations"> <li><cite>HTML5</cite>:   <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-q-element" target="_blank">The q element</a></li><li><cite>HTML5</cite>:   <a href="https://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element" target="_blank">The blockquote element</a></li><li><cite>CSS3 Generated and Replaced Content</cite>:   <a href="https://www.w3.org/TR/css-content-3/#quotes" target="_blank">Specifying quotes with the 'quotes' property</a></li></ul> </dd> </dl> </section> <section id="emphasis"><div class="header-wrapper"><h3 id="x7-3-emphasis-highlighting"><bdi class="secno">7.3 </bdi>Emphasis & highlighting</h3><a class="self-link" href="#emphasis" aria-label="Permalink for Section 7.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li>tbd</li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Aemphasis+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aemphasis">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Aemphasis">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-emphasis"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-emphasis.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/character_phrase_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aemphasis">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/emphasis-marks" target="_blank">CSS3 Text decoration, emphasis marks</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#emphasis">Emphasis & highlighting</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-emphasis"> <li><cite>CSS3 Text Decoration</cite>:   <a href="https://drafts.csswg.org/css-text-decor-3/#emphasis-marks" target="_blank">Emphasis Marks</a></li></ul> </dd> </dl> </section> <section id="abbrev"><div class="header-wrapper"><h3 id="x7-4-abbreviation-ellipsis-repetition"><bdi class="secno">7.4 </bdi>Abbreviation, ellipsis & repetition</h3><a class="self-link" href="#abbrev" aria-label="Permalink for Section 7.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#abbrev" class="external">Abbreviation, ellipsis & repetition</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%abbrev+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aabbrev">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%abbrev">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-abbrev"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#abbrev">Abbreviation, ellipsis & repetition</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-abbrev"> </ul> </dd> </dl> </section> <section id="inline_notes"><div class="header-wrapper"><h3 id="x7-5-inline-notes-annotations"><bdi class="secno">7.5 </bdi>Inline notes & annotations</h3><a class="self-link" href="#inline_notes" aria-label="Permalink for Section 7.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">9.3 </bdi>Footnotes, endnotes, etc</a>.</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li>tbd</li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Ainline_notes+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Ainline_notes">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Ainline_notes">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-inline_notes"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-inline-notes-annotations.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/character_phrase_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3AInline_notes">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/ruby-html" target="_blank">HTML5: The ruby element and its children</a></li><li><a href="https://w3c.github.io/i18n-tests/results/css-ruby" target="_blank">CSS Ruby</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#inline_notes">Inline notes & annotations</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-inline_notes"> <li><cite>HTML5</cite>:   <a href="https://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element" target="_blank">The ruby element</a></li><li><cite>HTML5</cite>:   <a href="https://www.w3.org/TR/html5/textlevel-semantics.html#the-sub-and-sup-elements" target="_blank">The sub and sup elements</a></li><li><cite>HTML5</cite>:   <a href="https://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element" target="_blank">The blockquote element</a></li></ul> </dd> </dl> </section> <section id="text_decoration"><div class="header-wrapper"><h3 id="x7-6-other-text-decoration-inline-features"><bdi class="secno">7.6 </bdi>Other text decoration & inline features</h3><a class="self-link" href="#text_decoration" aria-label="Permalink for Section 7.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li>tbd</li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Atext_decoration+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Atext_decoration">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=label%3Asealreq+label%3Ai%3Atext_decoration">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-text_decoration"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-text-decoration.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/character_phrase_tests/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Atext_decoration">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/line-decoration" target="_blank">CSS3 Text decoration, Line decoration</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#text_decoration">Text decoration & other inline features</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-text_decoration"> <li><cite>CSS3 Text Decoration</cite>:   <a href="https://drafts.csswg.org/css-text-decor-3/#line-decoration" target="_blank">Line Decoration: Underline, Overline, and Strike-Through</a></li></ul> </dd> </dl> </section> </section> <section id="h_para"><div class="header-wrapper"><h2 id="x8-line-paragraph-layout"><bdi class="secno">8. </bdi>Line & paragraph layout</h2><a class="self-link" href="#h_para" aria-label="Permalink for Section 8."></a></div> <section id="line_breaking"><div class="header-wrapper"><h3 id="x8-1-line-breaking-hyphenation"><bdi class="secno">8.1 </bdi>Line breaking & hyphenation</h3><a class="self-link" href="#line_breaking" aria-label="Permalink for Section 8.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> <dl class="reslinks"> <dt>Requirements</dt> <dd class="reqs"> <ul> <li><cite> Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#linebreak">Line breaking & hyphenation</a></li> <li><a target="_blank" href="https://www.w3.org/International/articles/typography/linebreak">Approaches to line-breaking</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd class="gh_discussions"> <ul> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Aquestion+label%3Ai%3Aline_breaking+">Open requests for information</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aline_breaking">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Aline-breaking">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-line_breaking"> <li><a class="variable" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-line-breaking.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/line_paragraph_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aline_breaking">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/line-breaking" target="_blank">CSS Text: Line breaking</a></li><li><a href="https://w3c.github.io/i18n-tests/results/line-breaks-glwj" target="_blank">CSS Text: Non-tailorable line breaking</a></li><li><a href="https://w3c.github.io/i18n-tests/results/word-break" target="_blank">CSS Text: Word-break</a></li><li><a href="https://w3c.github.io/i18n-tests/results/hyphens" target="_blank">CSS Text: Hyphens</a></li></ul> </dd> <dt>Gap analysis</dt> <dd class="gap_analysis"> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#line_breaking"> Line breaking</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-line_breaking"> <li><cite>CSS Text</cite>:   <a href="https://drafts.csswg.org/css-text-3/#line-breaking" target="_blank">Line Breaking and Word Boundaries</a></li><li><cite>CSS Text</cite>:   <a href="https://drafts.csswg.org/css-text-3/#hyphenation" target="_blank">Hyphenation: the hyphens property</a></li></ul> </dd> </dl> </section> <section id="justification"><div class="header-wrapper"><h3 id="x8-2-text-alignment-justification"><bdi class="secno">8.2 </bdi>Text alignment & justification</h3><a class="self-link" href="#justification" aria-label="Permalink for Section 8.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite> Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#justification">Text alignment & justification</a></li> <li><a target="_blank" href="https://www.w3.org/International/articles/typography/justification">Approaches to full justification</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Aquestion+label%3Ai%3Ajustification+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Ajustification">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Ajustification">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-justification"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-text-alignment-justification.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/line_paragraph_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Ajustification">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/text-align" target="_blank">CSS3 Text: text-align, text-align-last, text-justify</a></li><li><a href="https://w3c.github.io/i18n-tests/results/exploring-justify-space" target="_blank">Exploratory tests: Justification & letter-spacing</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#justification">Text alignment & justification</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-justification"> <li><cite>CSS Text</cite>:   <a href="https://drafts.csswg.org/css-text-3/#justification" target="_blank">Alignment and Justification</a></li><li><cite>CSS Text</cite>:   <a href="https://drafts.csswg.org/css-text-3/#edge-effects" target="_blank">Edge effects</a></li></ul> </dd> </dl> </section> <section id="spacing"><div class="header-wrapper"><h3 id="x8-3-text-spacing"><bdi class="secno">8.3 </bdi>Text spacing</h3><a class="self-link" href="#spacing" aria-label="Permalink for Section 8.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">8.2 </bdi>Text alignment & justification</a>.)</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li>tbd</li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Aquestion+label%3Ai%3Aspacing">Open requests for information</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aspacing">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Aspacing">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-spacing"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-letter-spacing.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/line_paragraph_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aspacing">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/exploring-justify-space" target="_blank">Exploratory tests: Justification & letter-spacing</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#spacing">Letter spacing</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-spacing"> <li><cite>CSS Text</cite>:   <a href="https://drafts.csswg.org/css-text-3/#spacing" target="_blank">Spacing</a></li></ul> </dd> </dl> </section> <section id="baselines"><div class="header-wrapper"><h3 id="x8-4-baselines-line-height-etc"><bdi class="secno">8.4 </bdi>Baselines, line height, etc.</h3><a class="self-link" href="#baselines" aria-label="Permalink for Section 8.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite> Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#baselines">Baselines, line height, etc.</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Abaselines+label%3Aquestion+">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Abaselines">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Abaselines">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-baselines"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#baselines">Baselines, line-height, etc</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-baselines"> <li><cite>CSS Writing Modes</cite>:   <a href="https://drafts.csswg.org/css-writing-modes-3/#inline-alignment" target="_blank">Inline-level Alignment</a></li><li><cite>CSS Inline Layout</cite>:   <a href="https://drafts.csswg.org/css-inline/#line-height-property" target="_blank">Line Spacing: the line-height property</a></li><li><cite></cite>:   <a href="https://drafts.csswg.org/css-line-grid/" target="_blank">CSS Line Grid</a></li></ul> </dd> </dl> </section> <section id="lists"><div class="header-wrapper"><h3 id="x8-5-lists-counters-etc"><bdi class="secno">8.5 </bdi>Lists, counters, etc.</h3><a class="self-link" href="#lists" aria-label="Permalink for Section 8.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite> Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#lists">Counters, lists, etc</a></li> <li><cite> Ready-made Counter Styles</cite>: <a target="_blank" href="https://www.w3.org/TR/predefined-counter-styles/#lao-styles">Lao</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Aquestion+label%3Ai%3Alists">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Alists">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Alists">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-lists"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-lists-counters-etc.html#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/line_paragraph_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Alists">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/counter-styles" target="_blank">CSS Counter Styles</a></li><li><a href="https://w3c.github.io/i18n-tests/results/predefined-counter-styles" target="_blank">CSS3 Counter Styles, predefined styles</a></li><li><a href="https://w3c.github.io/i18n-tests/results/custom-counter-styles" target="_blank">Custom counter styles</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#lists"> Lists, counters, etc</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-lists"> <li><cite>CSS Counter Styles</cite>:   <a href="https://drafts.csswg.org/css-counter-styles/#the-counter-style-rule" target="_blank">Defining Custom Counter Styles: the @counter-style rule</a></li><li><cite>CSS Counter Styles</cite>:   <a href="https://drafts.csswg.org/css-counter-styles/#predefined-counters" target="_blank">Simple Predefined Counter Styles</a></li><li><cite>CSS Counter Styles</cite>:   <a href="https://drafts.csswg.org/css-counter-styles/#complex-predefined-counters" target="_blank">Complex Predefined Counter Styles</a></li></ul> </dd> </dl> </section> <section id="initials"><div class="header-wrapper"><h3 id="x8-6-styling-initials"><bdi class="secno">8.6 </bdi>Styling initials</h3><a class="self-link" href="#initials" aria-label="Permalink for Section 8.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li><cite>Lao Orthography Notes</cite>: <a target="_blank" href="https://r12a.github.io/scripts/laoo/lo.html#initials">Styling initials</a></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Aquestion+label%3Ai%3Ainitials">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Ainitials">All Lao issues on this topic in the sealreq repo</a></li><li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Asealreq+label%3Ai%3Ainitials">Southeast Asian issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-initials"> <li><a class="variable empty" target="_blank" href="https://www.w3.org/International/i18n-tests/results/int-styling-initials#laoo">Exploratory/interactive test results</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/line_paragraph_tests/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Ainitials">Exploratory/interactive test repo</a></li> <li><a href="https://w3c.github.io/i18n-tests/results/first-letter-pseudo#latin" target="_blank">CSS3 Selectors: first-letter</a></li><li><a href="https://github.com/w3c/i18n-tests/wiki/Test-script-for-::first-letter" target="_blank">Interactive test: ::first-letter</a></li></ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#initials">Styling initials</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-initials"> <li><cite>CSS Selectors</cite>:   <a href="https://www.w3.org/TR/selectors-3/#first-letter" target="_blank">The ::first-letter pseudo-element</a></li><li><cite>CSS3 Inline Layout</cite>:   <a href="https://drafts.csswg.org/css-inline/#initial-letter-styling" target="_blank">Initial Letters</a></li></ul> </dd> </dl> </section> </section> <section id="h_page"><div class="header-wrapper"><h2 id="x9-page-book-layout"><bdi class="secno">9. </bdi>Page & book layout</h2><a class="self-link" href="#h_page" aria-label="Permalink for Section 9."></a></div> <section id="page_layout"><div class="header-wrapper"><h3 id="x9-1-general-page-layout-progression"><bdi class="secno">9.1 </bdi>General page layout & progression</h3><a class="self-link" href="#page_layout" aria-label="Permalink for Section 9.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">9.2 </bdi>Grids & tables</a>.</p> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Aquestion+is%3Aopen+label%3Ai%3Apage_layout">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Apage_layout">All Lao issues on this topic in the sealreq repo</a></li><li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Ascript-laoo+label%3Ai%3Apage_layout">Lao issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Type samples</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/type-samples/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Apage_layout"><abbr title="World Wide Web Consortium">W3C</abbr> type samples</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/r12a/typesamples/issues?q=is%3Aopen+label%3As.laoo+label%3Ah.generallayout">r12a type samples</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-page_layout"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#page_layout">General page layout & progression</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-page_layout"> </ul> </dd> </dl> </section> <section id="grids_tables"><div class="header-wrapper"><h3 id="x9-2-grids-tables"><bdi class="secno">9.2 </bdi>Grids & tables</h3><a class="self-link" href="#grids_tables" aria-label="Permalink for Section 9.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Aquestion+is%3Aopen+label%3Ai%3Agrids_tables">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Agrids_tables">All Lao issues on this topic in the sealreq repo</a></li><li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Ascript-laoo+label%3Ai%3Agrids_tables">Lao issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Type samples</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/type-samples/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Agrids_tables"><abbr title="World Wide Web Consortium">W3C</abbr> type samples</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/r12a/typesamples/issues?q=is%3Aopen+label%3As.laoo+label%3Ah.grids">r12a type samples</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-grids_tables"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#grids_tables">Grids & tables</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-grids_tables"> </ul> </dd> </dl> </section> <section id="footnotes_etc"><div class="header-wrapper"><h3 id="x9-3-footnotes-endnotes-etc"><bdi class="secno">9.3 </bdi>Footnotes, endnotes, etc</h3><a class="self-link" href="#footnotes_etc" aria-label="Permalink for Section 9.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">7.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Aquestion+is%3Aopen+label%3Ai%3Afootnotes_etc">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Afootnotes_etc">All Lao issues on this topic in the sealreq repo</a></li><li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Ascript-laoo+label%3Ai%3Afootnotes_etc">Lao issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Type samples</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/type-samples/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Afootnotes_etc"><abbr title="World Wide Web Consortium">W3C</abbr> type samples</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/r12a/typesamples/issues?q=is%3Aopen+label%3As.laoo+label%3Ah.footnotes_etc">r12a type samples</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-footnotes_etc"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#footnotes_etc">Footnotes, endnotes, etc</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-footnotes_etc"> </ul> </dd> </dl> </section> <section id="headers_footers"><div class="header-wrapper"><h3 id="x9-4-page-headers-footers-etc"><bdi class="secno">9.4 </bdi>Page headers, footers, etc</h3><a class="self-link" href="#headers_footers" aria-label="Permalink for Section 9.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Aquestion+is%3Aopen+label%3Ai%3Aheaders_footers">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Aheaders_footers">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Ascript-laoo+label%3Ai%3Aheaders_footers">Lao issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Type samples</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/type-samples/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Aheaders_footers"><abbr title="World Wide Web Consortium">W3C</abbr> type samples</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/r12a/typesamples/issues?q=is%3Aopen+label%3As.laoo+label%3Ah.headers">r12a type samples</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-headers_footers"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#headers_footers">Page headers, footers, etc</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-headers_footers"> </ul> </dd> </dl> </section> <section id="interaction"><div class="header-wrapper"><h3 id="x9-5-forms-user-interaction"><bdi class="secno">9.5 </bdi>Forms & user interaction</h3><a class="self-link" href="#interaction" aria-label="Permalink for Section 9.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> <dl class="reslinks"> <dt>Requirements</dt> <dd> <ul> <li></li> </ul> </dd> <dt>GitHub discussions</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Aquestion+is%3Aopen+label%3Ai%3Ainteraction">Open requests for information</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/sealreq/issues?q=is%3Aissue+label%3As%3Alaoo+label%3Ai%3Ainteraction">All Lao issues on this topic in the sealreq repo</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/i18n-activity/issues?q=+label%3Ascript-laoo+label%3Ai%3Ainteraction">Lao issues on this topic in <abbr title="World Wide Web Consortium">W3C</abbr> specs</a></li> </ul> </dd> <dt>Type samples</dt> <dd> <ul> <li><a class="variable empty" target="_blank" href="https://github.com/w3c/type-samples/issues?q=is%3Aissue+is%3Aopen+label%3As%3Alaoo+label%3Ai%3Ainteraction"><abbr title="World Wide Web Consortium">W3C</abbr> type samples</a></li> <li><a class="variable empty" target="_blank" href="https://github.com/r12a/typesamples/issues?q=is%3Aopen+label%3As.laoo+label%3Ah.interaction">r12a type samples</a></li> </ul> </dd> <dt>Tests</dt> <dd> <ul id="tests-interaction"> <li>Exploratory/interactive test results (tbc)</li> <li>Exploratory/interactive test repo (tbc)</li> </ul> </dd><dt>Gap analysis</dt> <dd> <ul class="linkList"> <li><a target="_blank" href="https://www.w3.org/TR/laoo-gap/#interaction">Forms & user interaction</a></li> </ul> </dd> <dt>Specification links</dt> <dd class="le_index"> <ul class="linkList" id="specs-interaction"> </ul> </dd> </dl> </section> </section> <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>