[css-text-decor-4][editorial] Fixed Bikeshed issues

Author: SebastianZ

css-text-decor-4/Overview.bs

@@ -15,10 +15,11 @@ Abstract: This module contains the features of CSS relating to text decoration,
 </pre>
 
 <pre class="link-defaults">
+spec:css-backgrounds-3; type:property; text:box-shadow
 spec:css-text-3; type:dfn; text:character
 spec:fill-stroke-3; type:property;
-    text: fill
-    text: stroke
+	text: fill
+	text: stroke
 </pre>
 
 <h2 id="intro">
@@ -153,7 +154,10 @@ Line Decoration: Underline, Overline, and Strike-Through</h2>
 		which the underline is propagated. The final line of text is fuchsia,
 		but the underline underneath it is still the blue underline from the
 		anonymous inline element.
-		<img src="images/underline-example.png" alt="Sample rendering of the above underline example">
+		<img src="images/underline-example.png"
+		     alt="Sample rendering of the above underline example"
+		     width="267"
+		     height="182">
 		This diagram shows the boxes involved in the example above. The
 		rounded aqua line represents the anonymous inline element wrapping
 		the inline contents of the paragraph element, the rounded blue line
@@ -167,7 +171,7 @@ Line Decoration: Underline, Overline, and Strike-Through</h2>
 		  span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; }
 		</pre>
 		<pre>
-                  &lt;div&gt;Help, help! &lt;span&gt;I am under a hat!&lt;/span&gt;&lt;/div&gt;
+			&lt;div&gt;Help, help! &lt;span&gt;I am under a hat!&lt;/span&gt;&lt;/div&gt;
 		</pre>
 		...the &lt;div&gt; is the [=decorating box=] for its underline (in black),
 		which is rendered uninterrupted through both the &lt;div&gt; and the &lt;span&gt;.
@@ -177,7 +181,10 @@ Line Decoration: Underline, Overline, and Strike-Through</h2>
 		overrides the blue text shadow on the &lt;div&gt;.
 		As a result, when the shadows are painted,
 		the shadow of the &lt;div&gt;’s underline is disjoint across the two elements.
-		<img src="images/underline-example-2.png" alt="Sample rendering of the above underline example">
+		<img src="images/underline-example-2.png"
+		     alt="Sample rendering of the above underline example"
+		     width="380"
+		     height="165">
 	</div>
 
 	Note: Line decorations are propagated through the box tree,
@@ -202,7 +209,7 @@ Text Decoration Lines: the 'text-decoration-line' property</h3>
 	This property,
 	which is a <a>sub-property</a> of the 'text-decoration' shorthand,
 	specifies what line decorations, if any, are added by the element.
-	Values other than ''text-decoration-line''
+	Values other than ''text-decoration-line/none''
 	cause the element to originate the indicated text decorations,
 	and to apply and propagate it as described [[#line-decoration|above]].
 
@@ -396,8 +403,8 @@ Determining the Position and Thickness of Line Decorations</h3>
 	The line decoration positions are then calculated
 	per line
 	as follows
-	(treating <a>over</a>-positioned underlines</a> as <a>over</a> lines
-	and <a>under</a>-positioned overlines</a> as <a>under</a> lines):
+	(treating <a>over</a>-positioned underlines as <a>over</a> lines
+	and <a>under</a>-positioned overlines as <a>under</a> lines):
 
 	<dl>
 		<dt><a>over</a> lines
@@ -465,7 +472,10 @@ Determining the Position and Thickness of Line Decorations</h3>
 		Using the same example, a line-through would in the second fragment,
 		instead of averaging the two font sizes,
 		split the line-through into two segments:
-		<p><img alt="" src="images/linethrough-averaging.gif">
+		<p><img alt=""
+		        src="images/linethrough-averaging.gif"
+		        width="354"
+				height="105">
 
 		In both cases, however, the superscript, due to the vertical-alignment shift,
 		has no effect on the position of the line.
@@ -559,11 +569,13 @@ Text Underline Position: the 'text-underline-position' property</h3>
 
 			<div class="figure">
 				<img title="text-underline-position: alphabetic"
-				    alt="In a typical Latin font, the underline is positioned slightly
-				         below the alphabetic baseline, leaving a gap between the line
-				         and the bottom of most Latin letters, but crossing through
-				         descenders such as the stem of a 'p'."
-				    src="images/underline-position-alphabetic.png" >
+				     alt="In a typical Latin font, the underline is positioned slightly
+				          below the alphabetic baseline, leaving a gap between the line
+				          and the bottom of most Latin letters, but crossing through
+				          descenders such as the stem of a 'p'."
+				     src="images/underline-position-alphabetic.png"
+				     width="231"
+				     height="61">
 				<p class="caption">A typical “alphabetic” underline is positioned just below the alphabetic baseline
 			</div>
 
@@ -585,7 +597,9 @@ Text Underline Position: the 'text-underline-position' property</h3>
 			  <img title="text-underline-position: under"
 			      alt="In a typical Latin font, the underline is far enough
 			           below the text that it does not cross the bottom of a 'g'."
-			      src="images/underline-position-under.png">
+			      src="images/underline-position-under.png"
+			      width="405"
+				  height="68">
 			  <p class="caption">''text-underline-position: under''
 			</div>
 			<div class="example">
@@ -628,13 +642,17 @@ Text Underline Position: the 'text-underline-position' property</h3>
 					<img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'
 					          places the underline on the left side of the text."
 					     title="text-underline-position: left"
-					     src="images/underline-position-left.png">
+					     src="images/underline-position-left.png"
+						 width="40"
+						 height="168">
 
 				<td>
 					<img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'
 					          places the underline on the right side of the text."
 					     title="text-underline-position: right"
-					     src="images/underline-position-right.png">
+					     src="images/underline-position-right.png"
+						 width="40"
+						 height="168">
 
 			<tr>
 				<td>''text-underline-position/left''
@@ -774,10 +792,14 @@ Text Decoration Line Uniformity</h3>
 
 	<div class="figure">
 		<img src="images/underline-single.png"
-		        alt="A single underline drawn under varying font sizes and vertical positions must be a single line.">
+		        alt="A single underline drawn under varying font sizes and vertical positions must be a single line."
+				width="125"
+				height="81">
 		   vs.
 		   <img src="images/underline-broken.png"
-		        alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect.">
+		        alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect."
+				width="120"
+				height="80">
 		<p class="caption">Correct and incorrect rendering of <code>&lt;u>A&lt;sup>B&lt;/sup>&lt;big>C&lt;/big>D&lt;/u></code>
 	</div>
 
@@ -794,8 +816,8 @@ Text Decoration Line Uniformity</h3>
 		UA consideration of descendant content will therefore result in better typography.
 
 		<div class="figure">
-		  <img src="images/leftline-cross.png" alt="">
-		     <img src="images/leftline-under.png" alt="">
+		  <img src="images/leftline-cross.png" alt="" width="80" height="219">
+		     <img src="images/leftline-under.png" alt="" width="80" height="219">
 		  <p class="caption">
 		    Due to the central baseline alignment of vertical text,
 		    a left-side underline on small vertical text will cut through the text
@@ -821,8 +843,10 @@ Text Decoration Line Uniformity</h3>
 
 	<div class="figure">
 		<img src="images/underline-superscript.png"
-		        alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
-		             whereas an underline for the entire text is drawn at the appropriate position for full-size text.">
+		     alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
+		          whereas an underline for the entire text is drawn at the appropriate position for full-size text."
+		     width="80"
+			 height="38">
 		<p class="caption">Example of underline applied to <abbr title="element with 'vertical-align' or 'font-variant-position' applied">superscripted text</abbr>
 		                   vs. underline applied to <abbr title="element containing an element with 'vertical-align' or 'font-variant-position' applied">text containing a superscript</abbr>
 		<!-- illustration code, for future alterations
@@ -885,7 +909,9 @@ Text Decoration Line Trimming and Extension: the 'text-decoration-trim' property
 			<div class="figure">
 				<p><img title="text-decoration-skip-inset: auto"
 				        alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements."
-				        src="images/decoration-skip-inset.png">
+				        src="images/decoration-skip-inset.png"
+				        width="223"
+				        height="77">
 				<p class="caption">''text-decoration-skip-inset: auto'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
 </p>
 			</div>
@@ -942,7 +968,7 @@ Text Decoration Line Continuity: the 'text-decoration-skip' shorthand and its su
 	<p class="note">Note that these properties inherit
 	and that descendant elements can have a different setting.</p>
 
-    The following addition is made to the default UA stylesheet for HTML:
+	The following addition is made to the default UA stylesheet for HTML:
 	<pre><code class="lang-css">
 		ins, del { text-decoration-skip: none; }
 	</code></pre>
@@ -968,7 +994,7 @@ Skipping Spaces: the 'text-decoration-skip-self' property</h4>
 	This property specifies whether
 	any text decoration lines drawn by its ancestors
 	are propagated to or drawn across the element.
-	Values have the following meanings:</p>
+	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for=text-decoration-skip-self>
 		<dt><dfn>auto</dfn></dt>
@@ -1034,7 +1060,7 @@ Skipping Spaces: the 'text-decoration-skip-box' property</h4>
 	This property specifies what parts of the element's box area
 	any text decoration affecting the element must skip over.
 	It controls only text decoration lines drawn by its ancestors.
-	Values have the following meanings:</p>
+	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for=text-decoration-skip-box>
 		<dt><dfn>none</dfn></dt>
@@ -1073,7 +1099,7 @@ Skipping Spaces: the 'text-decoration-skip-spaces' property</h4>
 	This property specifies whether text decoration skips any spaces.
 	It controls all text decoration lines drawn by the element
 	and also any text decoration lines drawn by its ancestors.
-	Values have the following meanings:</p>
+	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for=text-decoration-skip-spaces>
 		<dt><dfn>none</dfn></dt>
@@ -1132,7 +1158,9 @@ Skipping Glyphs: the 'text-decoration-skip-ink' property</h4>
 	<div class="figure">
 		<img title="Skipping Descenders When Drawing an Underline"
 		     alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
-		     src="images/decoration-skip-ink.png">
+		     src="images/decoration-skip-ink.png"
+		     width="223"
+		     height="77">
 		<p class="caption">Skipping Glyph Ink
 	</div>
 
@@ -1173,52 +1201,52 @@ Skipping Glyphs: the 'text-decoration-skip-ink' property</h4>
 	</dl>
 
 	<div class="note">
-        Note: Implementation experience shows that ink-skipping behavior often
-        produces undesirable results when underlined text includes ideographic characters,
-        as the underline position (depending on the font and user agent involved)
-        often clashes with almost all the glyphs,
-        such that only occasional fragments of the line remain to be rendered.
-
-        In principle, this could be resolved by authors using
-        ''text-underline-position: under'' (or possibly 'text-underline-offset')
-        to move the underline to a lower position that does not clash with the glyphs,
-        but this is not always feasible, even if the user agent supports these properties
-        and the author is aware of their potential.
-        In particular, when a page contains arbitrary user-generated content,
-        the author responsible for the design may not know whether CJK content will be present.
-        And with mixed-script content,
-        an underline position designed to work well for CJK content
-        may look bad if the majority of the text is non-CJK.
-
-        Therefore, when ''text-decoration-skip-ink/auto'' is in effect,
-        a UA that implements ink-skipping <em>should</em> refrain from doing so in CJK contexts.
-        (Authors who <em>do</em> want ink-skipping applied to CJK content can use
-        the ''text-decoration-skip-ink/always'' value to explicitly request this.)
-
-        Primarily, this means <em>not</em> applying ink-skipping for characters whose
-        Unicode <a href="http://unicode.org/Public/UCD/latest/ucd/Scripts.txt">Script property</a>
-        is any of the CJK scripts Han, Hiragana, Katakana, Bopomofo, or Hangul,
-        or for characters whose Script property is Inherited or Common,
-        and whose <a href="http://unicode.org/Public/UCD/latest/ucd/ScriptExtensions.txt">ScriptExtensions property</a>
-        includes one or more of the CJK scripts.
-
-        In addition, characters with a Unicode script property of Common and Inherited
-        (primarily generic punctuation and symbols) need to be considered,
-        as these may be used as part of a run of CJK-script content,
-        and it is desirable to treat all text within a given script run in a consistent way.
-        Therefore, the UA <em>should</em> resolve the text into script runs
-        as described in the <a href="https://www.unicode.org/reports/tr24/#Usage_Model">“Implementation Notes”</a>
-        of [[!UAX24]] “Unicode Script Property”, in particular subsections 5.1 and 5.2.
-        After applying the heuristics described there (or a similar analysis of scripts),
-        the UA <em>should</em> disable ink-skipping for all ranges of text
-        that are determined to be in a CJK script.
-
-        Issue: Are there other (non-CJK) scripts where it would be preferable
-        to disable ink-skipping by default
-        (when ''text-decoration-skip-ink/auto'' is in effect)?
-        Perhaps Yi? Arabic?
-        (See also discussion in <a href="https://github.com/w3c/csswg-drafts/issues/1288">Issue 1288</a>.)
-    </div>
+		Note: Implementation experience shows that ink-skipping behavior often
+		produces undesirable results when underlined text includes ideographic characters,
+		as the underline position (depending on the font and user agent involved)
+		often clashes with almost all the glyphs,
+		such that only occasional fragments of the line remain to be rendered.
+
+		In principle, this could be resolved by authors using
+		''text-underline-position: under'' (or possibly 'text-underline-offset')
+		to move the underline to a lower position that does not clash with the glyphs,
+		but this is not always feasible, even if the user agent supports these properties
+		and the author is aware of their potential.
+		In particular, when a page contains arbitrary user-generated content,
+		the author responsible for the design may not know whether CJK content will be present.
+		And with mixed-script content,
+		an underline position designed to work well for CJK content
+		may look bad if the majority of the text is non-CJK.
+
+		Therefore, when ''text-decoration-skip-ink/auto'' is in effect,
+		a UA that implements ink-skipping <em>should</em> refrain from doing so in CJK contexts.
+		(Authors who <em>do</em> want ink-skipping applied to CJK content can use
+		the ''text-decoration-skip-ink/always'' value to explicitly request this.)
+
+		Primarily, this means <em>not</em> applying ink-skipping for characters whose
+		Unicode <a href="http://unicode.org/Public/UCD/latest/ucd/Scripts.txt">Script property</a>
+		is any of the CJK scripts Han, Hiragana, Katakana, Bopomofo, or Hangul,
+		or for characters whose Script property is Inherited or Common,
+		and whose <a href="http://unicode.org/Public/UCD/latest/ucd/ScriptExtensions.txt">ScriptExtensions property</a>
+		includes one or more of the CJK scripts.
+
+		In addition, characters with a Unicode script property of Common and Inherited
+		(primarily generic punctuation and symbols) need to be considered,
+		as these may be used as part of a run of CJK-script content,
+		and it is desirable to treat all text within a given script run in a consistent way.
+		Therefore, the UA <em>should</em> resolve the text into script runs
+		as described in the <a href="https://www.unicode.org/reports/tr24/#Usage_Model">“Implementation Notes”</a>
+		of [[!UAX24]] “Unicode Script Property”, in particular subsections 5.1 and 5.2.
+		After applying the heuristics described there (or a similar analysis of scripts),
+		the UA <em>should</em> disable ink-skipping for all ranges of text
+		that are determined to be in a CJK script.
+
+		Issue: Are there other (non-CJK) scripts where it would be preferable
+		to disable ink-skipping by default
+		(when ''text-decoration-skip-ink/auto'' is in effect)?
+		Perhaps Yi? Arabic?
+		(See also discussion in <a href="https://github.com/w3c/csswg-drafts/issues/1288">Issue 1288</a>.)
+	</div>
 
 <h4 id="ink-skip-shape">
 Shaping Interruptions</h4>
@@ -1257,7 +1285,9 @@ Shaping Interruptions</h4>
 			            filling it.
 			            In the right pair the underline is slightly lower,
 			            and thus the portion of the underline within the “g” can only show a partial thickness."
-			       src="images/skip-ink-wisp.png">
+			       src="images/skip-ink-wisp.png"
+			       width="600"
+			       height="206">
 			<p class="caption">
 			Hiding the portion of the underline within the bowl gives a cleaner look to the type,
 			while the curved ends of the underline outside it
@@ -1609,7 +1639,7 @@ Emphasis Mark Skip: the 'text-emphasis-skip' property</h3>
 				<tr><td>؉	<td>U+0609	<td>ARABIC-INDIC PER MILLE SIGN
 				<tr><td>؊	<td>U+060A	<td>ARABIC-INDIC PER TEN THOUSAND SIGN
 				<tr><td>&	<td>U+0026	<td>AMPERSAND
-				<tr><td>⁊	<td>U+204A	<td>TIRONIAN SIGN E[[
+				<tr><td>⁊	<td>U+204A	<td>TIRONIAN SIGN ET
 				<tr><td>@	<td>U+0040	<td>COMMERCIAL AT
 				<tr><td>§	<td>U+00A7	<td>SECTION SIGN
 				<tr><td>¶	<td>U+00B6	<td>PILCROW SIGN