[css-ruby-1][editorial] Fixed Bikeshed issues

Author: SebastianZ

css-ruby-1/Overview.bs

@@ -22,18 +22,23 @@ Abstract: They are typically used in East Asian documents to indicate pronunciat
 Abstract: This module describes the rendering model and formatting controls related to displaying ruby annotations in CSS.
 </pre>
 <pre class=link-defaults>
-spec:css-text-3; type:dfn; text:character
 spec:css-box-4; type:dfn; text:content area
+spec:css-text-3; type:dfn; text:character
+spec:css-writing-modes-4; type:dfn; text:bidi isolation
+spec:html-ruby-extensions; type:element;
+	text:rp
+	text:rtc
+	text:ruby
 </pre>
 <style>
-  /* ASCII diagram colors */
-  .base { color: blue; }
-  .annot { color: red; }
-  .column { color: gray; }
-  .flagtxt1 { color: green; }
-  .flagtxt2 { color: #ae4a00; }
-  .flagbg1 { background: green; opacity: 0.3; }
-  .flagbg2 { background: orange; opacity: 0.3; }
+	/* ASCII diagram colors */
+	.base { color: blue; }
+	.annot { color: red; }
+	.column { color: gray; }
+	.flagtxt1 { color: green; }
+	.flagtxt2 { color: #ae4a00; }
+	.flagbg1 { background: green; opacity: 0.3; }
+	.flagbg2 { background: orange; opacity: 0.3; }
 </style>
 
 <h2 id="intro">
@@ -49,7 +54,7 @@ What is ruby?</h3>
 	and serves as an annotation or a pronunciation guide associated with that run of text.
 
 	<figure>
-		<img src="images/ruby-context.png"
+		<img src="images/ruby-context.png" width="324" height="64"
 		     alt="Hiragana ruby annotations above each kanji in Japanese text">
 		<figcaption>A run of Japanese text with phonetic ruby annotations indicating the pronunciation of each ideograph.</figcaption>
 	</figure>
@@ -61,7 +66,7 @@ What is ruby?</h3>
 		In this example, a single annotation is used to annotate a base text
 		consisting of multiple characters.
 		<div class="figure">
-			<img src="images/licence.png"
+			<img src="images/licence.png" width="260" height="66"
 			     alt="Example of ruby applied on top of a Japanese expression">
 			<p class="caption">Example of ruby used in Japanese (simple case)
 		</div>
@@ -78,7 +83,7 @@ What is ruby?</h3>
 		the hiragana characters on top refer to the pronunciation of each of the base kanji characters,
 		while the words “Keio” and “University” on the bottom are give the English translation.
 		<div class="figure">
-			<img src="images/ruby-univ.gif"
+			<img src="images/ruby-univ.gif" width="277" height="108"
 			     alt="Example showing complex ruby with annotation text over and under the base characters">
 			<p class="caption">Complex ruby with annotation text over and under the base characters
 		</div>
@@ -174,7 +179,7 @@ Ruby Box Model</h2>
 	and “[=columns=]” (each [=ruby base=] and its corresponding [=ruby annotations=]).
 
 	<figure>
-		<img src="images/ruby-boxes-simple.png"
+		<img src="images/ruby-boxes-simple.png" width="314" height="94"
 		     alt="Ruby structure arranged as a table,
 		          the first “column” containing 上 in a base box with じょう centered below in an annotation box
 		          and the second “column” containing 手 in a separate base box with ず centered below in another annotation box.">
@@ -185,7 +190,7 @@ Ruby Box Model</h2>
 	Within a [=ruby segment=], a [=ruby annotation=] may span multiple [=ruby bases=].
 
 	<figure>
-		<img src="images/ruby-boxes-complex.png"
+		<img src="images/ruby-boxes-complex.png" width="350" height="128"
 		     alt="Ruby structure arranged as a table,
 		          the first “column” containing 旧 in a base box with jiù centered above in an annotation box,
 		          the second “column” containing 金 in a base box with jīn centered above in an annotation box,
@@ -653,7 +658,7 @@ Hiding Annotations: ''visibility: collapse'' and auto-hidden ruby</h3>
 
 		However, when displayed as ruby, the “り” should be hidden
 		<div class="figure">
-			<img src="images/furigana-separate.png"
+			<img src="images/furigana-separate.png" width="160" height="73"
 			     alt="Hiragana annotations for 振り仮名 appear, each pronunciation above its kanji base character.">
 			<p class="caption">Hiragana ruby for <span lang=ja>振り仮名</span>. Notice there is no hiragana annotation above <span lang=ja>り</span>,  since it is already in hiragana.
 		</div>
@@ -670,7 +675,7 @@ Hiding Annotations: ''visibility: collapse'' and auto-hidden ruby</h3>
 		</xmp>
 
 		<figure>
-			<img src="images/ruby-pairing-full.png" width=122
+			<img src="images/ruby-pairing-full.png" width="122" height="55"
 			     alt="昆虫記, with phonetic annotations on all three characters.
 			     Because the middle annotation is wider than its base,
 			     space has been introduced around the base character
@@ -685,7 +690,7 @@ Hiding Annotations: ''visibility: collapse'' and auto-hidden ruby</h3>
 		Applying ''visibility: collapse'' enables this hiding:
 
 		<figure>
-			<img src="images/ruby-pairing-collapse.png" width=105
+			<img src="images/ruby-pairing-collapse.png" width="105" height="53"
 			     alt="昆虫記, with phonetic annotations centered over
 			          the first and last characters.">
 			<figcaption>Middle annotation as ''visibility: collapse''</figcaption>
@@ -697,7 +702,7 @@ Hiding Annotations: ''visibility: collapse'' and auto-hidden ruby</h3>
 		but does not remove its impact on layout:
 
 		<figure>
-			<img src="images/ruby-pairing-invisible.png" width=122
+			<img src="images/ruby-pairing-invisible.png" width="122" height="55"
 			     alt="昆虫記, with phonetic annotations on the first and last characters.
 			     Over the second one, even though no annotation is showing,
 			     space is reserved as if to hold it,
@@ -711,7 +716,7 @@ Hiding Annotations: ''visibility: collapse'' and auto-hidden ruby</h3>
 		disturbing the pairing of any annotations after it:
 
 		<figure>
-			<img src="images/ruby-pairing-discard.png" width=107
+			<img src="images/ruby-pairing-discard.png" width="107" height="55"
 			     alt="昆虫記, with mispaired phonetic annotations:
 			     the annotation for the second character having been removed,
 			     the annotation for the third character is displayed over the second one.">
@@ -1151,7 +1156,7 @@ Breaking Across Lines</h3>
 	even in the case of [=inter-character annotations=].
 
 	<div class="figure">
-		<img src="images/r-break-b.gif"
+		<img src="images/r-break-b.gif" width="300" height="90"
 		     alt='Diagram showing the line breaking opportunity in a "Bopomofo" ruby'>
 		<p class="caption">''inter-character'' ruby line breaking opportunity
 	</div>
@@ -1170,7 +1175,7 @@ Breaking Between Bases</h4>
 	and only if no [=ruby annotations=] span those [=ruby bases=].
 
 	<div class="figure">
-		<img src="images/r-break-a.gif"
+		<img src="images/r-break-a.gif" width="408" height="201"
 		     alt="Diagram showing the line breaking opportunity in a complex ruby">
 		<p class="caption">Ruby line breaking opportunity
 	</div>
@@ -1243,7 +1248,7 @@ Bidi Reordering</h3>
 	To this end,
 	<ul>
 		<li>
-			Bidi isolation is forced on all [=internal ruby boxes=] and the [=ruby container=]:
+			[=Bidi isolation=] is forced on all [=internal ruby boxes=] and the [=ruby container=]:
 			the ''unicode-bidi/normal'' and ''embed'' values of 'unicode-bidi' compute to ''isolate'',
 			and ''bidi-override'' computes to ''isolate-override''.
 
@@ -1275,7 +1280,7 @@ Bidi Reordering</h3>
 
 	Note: It could be useful to adjust these rules slightly
 	so that when 'ruby-merge' is ''merge'' on a particular [=annotation container=],
-	bidi isolation is not forced onto the individual annotations,
+	[=bidi isolation=] is not forced onto the individual annotations,
 	enabling them to be processed together.
 	However, this would add complexity to implementations,
 	which does not seem justified in the absence of demand to handle this situation.
@@ -1325,7 +1330,7 @@ Line Spacing</h3>
 	taller than the paragraph's default font size.
 
 	<div class="figure">
-		<img src="images/rlh-a.gif"
+		<img src="images/rlh-a.gif" width="210" height="138"
 		     alt="The content of each line sits in the middle of its line height;
 		          the additional space on each side is called half-leading.
 		          Ruby fits between lines if it is smaller than twice the half-leading,
@@ -1389,12 +1394,12 @@ Ruby Positioning: the 'ruby-position' property</h3>
 			The ruby annotation appears [=line-over=] the base.
 
 			<div class="figure">
-				<img src="images/shinkansen-top.gif"
+				<img src="images/shinkansen-top.gif" width="140" height="33"
 				     alt="Diagram of ruby glyph layout in horizontal mode with ruby annotation appearing above the base">
 				<p class="caption">Ruby over Japanese base text in horizontal layout
 			</div>
 			<div class="figure">
-				<img src="images/shinkansen-right.gif" width="33"
+				<img src="images/shinkansen-right.gif" width="33" height="141"
 				     alt="Diagram of ruby glyph layout in vertical mode with ruby annotation appearing vertically on the right of the base">
 				<p class="caption">Ruby to the right of Japanese base text in vertical layout
 			</div>
@@ -1407,12 +1412,12 @@ Ruby Positioning: the 'ruby-position' property</h3>
 			most easily found in educational text.
 
 			<div class="figure">
-				<img src="images/shinkansen-bottom.gif"
+				<img src="images/shinkansen-bottom.gif" width="142" height="36"
 				     alt="Diagram of ruby glyph layout in horizontal mode with ruby annotation appearing below the base">
 				<p class="caption">Ruby under Japanese base text in horizontal layout
 			</div>
 			<div class="figure">
-				<img src="images/shinkansen-left.gif"
+				<img src="images/shinkansen-left.gif" width="37" height="141"
 				     alt="Diagram of ruby glyph layout in vertical mode with ruby annotation appearing vertically on the left of the base">
 				<p class="caption">Ruby to the left of Japanese base text in vertical layout
 			</div>
@@ -1438,7 +1443,7 @@ Ruby Positioning: the 'ruby-position' property</h3>
 			even when the layout of the base characters is horizontal:
 
 				<div class="figure">
-					<img src="images/bopomofo.gif"
+					<img src="images/bopomofo.gif" width="138" height="42"
 					     alt="Example of Taiwanese-style ruby">
 					<p class="caption">“Bopomofo” ruby in traditional Chinese
 					(ruby annotation shown in blue for clarity) in horizontal layout
@@ -1517,7 +1522,7 @@ Sharing Annotation Space: the 'ruby-merge' property</h3>
 			This style is called “mono ruby” in [[JLREQ]].
 
 			<figure>
-				<img src="images/ruby-mono.png"
+				<img src="images/ruby-mono.png" width="207" height="57"
 				     alt="Extra space is added to base or annotations
 				          when one of the pair is longer than the other
 				          in order to keep each annotation exclusive to its own base.
@@ -1549,7 +1554,7 @@ Sharing Annotation Space: the 'ruby-merge' property</h3>
 			[=ruby annotations=] are kept together with their respective [=ruby bases=].
 
 			<figure>
-				<img src="images/ruby-merge.png"
+				<img src="images/ruby-merge.png" width="189" height="57"
 				     alt="The combined annotation is centered with respect to the combined base,
 				          even if this would place an annotation’s content over a different base.
 				          In the case of “上手”, the “う” from the first base’s annotation
@@ -1580,7 +1585,7 @@ Sharing Annotation Space: the 'ruby-merge' property</h3>
 			to avoid imposing space between bases.
 
 			<figure>
-				<img src="images/ruby-jukugo.png"
+				<img src="images/ruby-jukugo.png" width="189" height="57"
 				     alt="If there is enough space, annotations are aligned to their bases;
 				          but if there is not, then annotations can share space with adjacent annotations.
 				          Thus the annotations for “上手” share space over the second base as in the 'merge' case,
@@ -1643,11 +1648,10 @@ Ruby Text Distribution: the 'ruby-align' property</h3>
 		<dd>
 			The ruby content is aligned with the start edge of its box.
 			<div class="figure">
-				<img width="145" height="91" src="images/ra-l.gif"
-				     alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base" >
-				<img width="145" height="91"
-				     alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
-				     src="images/ra-l-rb.gif" >
+				<img src="images/ra-l.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base">
+				<img src="images/ra-l-rb.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base">
 				<p class="caption">''ruby-align/start'' ruby distribution
 			</div>
 
@@ -1670,12 +1674,10 @@ Ruby Text Distribution: the 'ruby-align' property</h3>
 		<dt><dfn>center</dfn></dt>
 		<dd>The ruby content is centered within its box.
 			<div class="figure">
-				<img width="145" height="91"
-				     alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
-				     src="images/ra-c.gif" >
-				<img width="145" height="91"
-				     alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
-				     src="images/ra-c-rb.gif" >
+				<img src="images/ra-c.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base">
+				<img src="images/ra-c-rb.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base">
 				<p class="caption">''ruby-align/center'' ruby distribution
 			</div>
 		</dd>
@@ -1687,12 +1689,10 @@ Ruby Text Distribution: the 'ruby-align' property</h3>
 			except that if there are no [=justification opportunities=]
 			the content is centered.
 			<div class="figure">
-				<img width="145" height="91"
-				     alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
-				     src="images/ra-dl.gif" >
-				<img width="145" height="91"
-				     alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
-				     src="images/ra-dl-rb.gif" >
+				<img src="images/ra-dl.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base">
+				<img src="images/ra-dl-rb.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base">
 				<p class="caption">''ruby-align/space-between'' ruby distribution
 			</div>
 		</dd>
@@ -1704,12 +1704,10 @@ Ruby Text Distribution: the 'ruby-align' property</h3>
 			whose space is distributed half before and half after the ruby content.
 
 			<div class="figure">
-				<img width="145" height="91"
-				     alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
-				     src="images/ra-ds.gif" >
-				<img width="145" height="91"
-				     alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
-				     src="images/ra-ds-rb.gif" >
+				<img src="images/ra-ds.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base">
+				<img src="images/ra-ds-rb.gif" width="145" height="91"
+				     alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base">
 				<p class="caption">''ruby-align/space-around'' ruby distribution
 			</div>
 		</dd>
@@ -1756,12 +1754,10 @@ Ruby Text Distribution: the 'ruby-align' property</h3>
 		Thus, the ''space-around'' and ''space-between'' values
 		will nevertheless result in Latin or Bopomofo characters centered:
 		<div class="figure">
-			<img width="145" height="91"
-			     alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
-			     src="images/ra-c-h.gif" >
-			<img width="145" height="91"
-			     alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
-			     src="images/ra-c-rb-h.gif" >
+			<img src="images/ra-c-h.gif" width="145" height="91"
+			     alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base">
+			<img src="images/ra-c-rb-h.gif" width="145" height="91"
+			     alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base">
 			<p class="caption">Non-CJK ruby text in ''ruby-align/space-around'' and ''ruby-align/space-between'' ruby distribution are centered
 		</div>
 
@@ -1860,7 +1856,7 @@ Overhanging Ruby: the 'ruby-overhang' property</h3>
 	and adjacent elements do not cross the box boundary:
 
 	<div class="figure">
-		<img src="images/ro-n.gif"
+		<img src="images/ro-n.gif" width="220" height="91"
 		     alt="Diagram showing the ruby boxes interacting with adjacent text">
 		<p class="caption">Simple ruby whose text is not allowed to overhang adjacent text
 	</div>
@@ -1876,7 +1872,7 @@ Overhanging Ruby: the 'ruby-overhang' property</h3>
 	or its overlapped [=base=]’s contents.
 
 	<div class="figure">
-		<img src="images/ro-a.gif"
+		<img src="images/ro-a.gif" width="177" height="91"
 		     alt="Diagram showing the ruby boxes interacting with adjacent text">
 		<p class="caption">Simple ruby whose text is allowed to overhang adjacent text
 	</div>
@@ -1916,9 +1912,9 @@ Line-edge Alignment</h3>
 	This level of the specification does not provide a mechanism to control this behavior.
 
 	<div class="figure">
-		<img src="images/ra-le-l.gif"
+		<img src="images/ra-le-l.gif" width="146" height="109"
 		     alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base" >
-		<img src="images/ra-le-r.gif"
+		<img src="images/ra-le-r.gif" width="146" height="110"
 		     alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base" >
 		<p class="caption">Line-edge alignment
 	</div>
@@ -2163,7 +2159,7 @@ Glossary</h2>
 			These are often, but not exclusively, used for ruby annotations.
 
 			<div class="figure">
-				<img src="images/zhuyin-example.png"
+				<img src="images/zhuyin-example.png" width="349" height="132"
 				     alt="Bopomofo characters (in blue) run vertically along the right side of each Hanzi character in the horizontal text.">
 				<p class="caption">Example of Bopomofo used as phonetic inter-character annotations in Chinese
 			</div>