Add results for cursive section

gap-analysis/index.html

@@ -84,7 +84,7 @@
     </div>
   </div>
 
-  <section id="h_introduction">
+<section id="h_introduction">
     <h2>Introduction</h2>
 <p>The W3C needs to make sure that the text layout and typographic needs of scripts and languages around the world are built in to technologies such as HTML, CSS, SVG, etc. so that Web pages and eBooks can look and behave as people expect around the world.</p>
 
@@ -113,7 +113,7 @@ <h3>Prioritization</h3>
         <li class="basic"></li>
         <li class="broken"></li>
         <li class="tbd"></li>
-        </ul>
+    </ul>
 
     <p>It is important to note that these colours do not indicate to what extent a particular features is broken. They indicate the impact of a broken or missing feature on the content author or end user.</p>
     <p>Basic styling is the level that would be generally accepted as sufficient for most Web pages. Advanced level support would include additional features one might expect to include in ebooks or other advanced typographic formats. There may be features of a script or language that are not supported on the Web, but that are not generally regarded as necessary (usually archaic or obscure features). In this case, the feature can be described here, but the status should be marked as OK.</p>
@@ -182,8 +182,34 @@ <h3>Cursive text</h3>
         </figcaption>
     </figure>
 
-    <p><a href="https://www.w3.org/TR/alreq/#h_letterhighlights">Arabic Layout Requirement</a> document includes a section dedicated to this topic.</p>
-
+<p><a href="https://www.w3.org/TR/alreq/#h_letterhighlights">Arabic Layout Requirement</a> document includes a section dedicated to this topic.</p>
+
+<section id="cursive_shadow">
+<h4>Text shadow works as expected</h4>
+<p>The <code class="kw" translate="no">text-shadow</code> property in CSS doesn't disrupt  the flow of cursive text in <span class="pass">any major browser</span>. See a  <a href="https://w3c.github.io/i18n-tests/results/cursive#text_shadow"> test</a>.</p>
+<p><img src="images/text-shadow.png" alt=""></p>
+</section>
+
+<section id="cursive_stroke">
+<h4>Text stroke cuts joining glyphs apart</h4>
+<p>The property <code class="kw" translate="no">text-stroke</code> is not yet  in CSS, but has been implemented in major browsers under the name <code class="kw" translate="no">-webkit-text-stroke</code>. In <span class="fail">all major browsers</span>,  the stroke around the text interrupts the cursive flow. See a <a href="https://w3c.github.io/i18n-tests/results/cursive#text_stroke">test</a>.</p>
+<p><img src="images/text-stroke.png" alt=""></p>
+</section>
+
+<section id="cursive_opacity">
+<h4>Text opacity shows glyph overlap</h4>
+<p>When opacity is applied to text,  <span class="fail">Firefox</span> and <span class="fail">Chrome</span> produce dark patches where the cursive glyphs overlap, but <span class="pass">Safari</span> and <span class="pass">Edge</span> don't. See the <a href="https://w3c.github.io/i18n-tests/results/cursive#text_opacity">test</a>.</p>
+<p><img src="images/text-opacity.png" alt=""></p>
+</section>
+
+<section id="cursive_style">
+<h4>Inline elements break cursive shaping</h4><p>When elements surround part of a cursive run of text, and apply styling, the results often break the cursive joins.</p>
+<p><img src="images/shaping-1.png" alt=""> <img src="images/shaping-2.png" alt=""></p>
+<p>The expected behaviour is <a href="https://github.com/w3c/csswg-drafts/issues/698">not yet fully confirmed</a> by the CSS spec, and will probably depend on the type of styling that is applied, but there is a level of agreement that something like just colouring a letter shouldn't break the shaping.  <span class="pass">Firefox</span> and <span class="pass">Edge</span> allow you to put a <code class="kw" translate="no">span</code> around a medial letter to colour it without breaking the cursive joins. <span class="fail">Chrome</span> and <span class="fail">Safari</span>, however, break the shaping sequence. (See the results just above – successful on the left, unsuccessful on the right.) See the <a href="https://w3c.github.io/i18n-tests/results/css-text-shaping">tests and results</a> for a range of different styling effects.</p>
+</section>
+
+
+
 </section>
 
 
@@ -345,7 +371,7 @@ <h3>Justification</h3>
     <p>A basic implementation must provide at least one of these strategies for adequate  justification results. Advanced implementations should provide users with the necessary means to control the selection of strategies, adjustment of their attributes, and the priority with which they are being applied. </p>
     <p>Currently, CSS specifications do not provide these advanced features, but recommend that the implementations  select the justification strategy appropriate to the text. </p>
     <p><a href="https://w3c.github.io/alreq/#h_justification">Arabic Layout Requirement</a> document includes a section dedicated to this topic.</p>
-    </section>
+</section>
 
 
 
@@ -365,7 +391,7 @@ <h3>Initial letter styling</h3>
 
 
     <p>Although initial letter styling is not an innate feature of the Arabic script, there have been occurences of its usage noted. However, the specifications and guidelines for composition of these decorative elements are undefined or insubstantial; for example, which of the joining forms of letters is to be used or how the joining behaviour is treated accross the boundary between the styled initial letter and rest of the paragraph.</p>
-    </section>
+</section>
 
 
 
@@ -404,7 +430,7 @@ <h3>Bidirectional layout</h3>
 
 
     <p>There needs to be wider adoption of logical keywords such as start and end, rather than left and right.</p>
-    </section>
+</section>
 
 
 
@@ -415,7 +441,7 @@ <h3>Vertical text</h3>
 
 
     <p>We need to clarify whether there is a particular requirement for handling arabic text specially in vertical lines, such as upright glyphs. We are also waiting on implementation of sideways values of writing-modes in order to be able to effectively use arabic text in vertical arrangements (such as book spines, table headings, etc), but that is not a problem specific to arabic.</p>
-    </section>
+</section>
 
 
 
@@ -425,7 +451,7 @@ <h3>Notes, footnotes, etc.</h3>
 
 
     <p></p>
-    </section>
+</section>
 
 
 
@@ -435,7 +461,7 @@ <h3>Page numbering, running headers, etc.</h3>
 
 
     <p></p>
-    </section>
+</section>
 
 
 
@@ -445,7 +471,7 @@ <h3>Other page layout &amp; pagination features</h3>
 
 
     <p></p>
-    </section>
+</section>
 </section>
 
 
@@ -463,7 +489,7 @@ <h3>Culture-specific features</h3>
 
 
     <p></p>
-    </section>
+</section>
 
 
 
@@ -473,7 +499,7 @@ <h3>What else?</h3>
 
 
     <p></p>
-    </section>
+</section>
 
 </section>
 
@@ -545,6 +571,6 @@ <h2>Acknowledgements</h2>
     <p class="acknowledgement">This Person, That Person, etc</p>
 
     <p data-lang="en">Please find the latest info of the contributors at the <a href="https://github.com/w3c/hlreq/graphs/contributors">GitHub contributors list</a>.</p>
-  </section>
+</section>
 </body>
 </html>