[css-ruby-1] Make white space diagram from whiteboard photo.

Author: fantasai

css-ruby-1/Overview.bs

@@ -443,8 +443,6 @@ Anonymous Ruby Box Generation</h3>
 			is wrapped in an anonymous [=ruby annotation container=].
 	</ol>
 
-	Issue: Make <a href="http://lists.w3.org/Archives/Public/www-archive/2014Jun/att-0027/PastedGraphic-1.png">this diagram</a> into an example.
-
 	Once all ruby layout structures are properly parented,
 	the UA can start to associate bases with their annotations.
 
@@ -453,6 +451,20 @@ Anonymous Ruby Box Generation</h3>
 	in its internal structures,
 	as long as [=pairing=] and layout behaves as if they existed.
 
+	<div class="example">
+		The following markup diagram representing the various boxes
+		shows where [=intra-ruby white space=] is preserved or discarded:
+		<xmp highlight=html style="white-space: normal; overflow-wrap: break-word">
+			<ruby>×<rbc>×<rb></rb>⬕<rb></rb>×</rbc>☒<rtc>×<rt></rt>⬔<rt></rt>×</rtc>◼<rbc>×<rb></rb>…</rtc>×</ruby>
+		</xmp>
+		where
+		* × represents [[#anony-gen-trim-space|discarded leading/trailing white space]]
+		* ☒ represents [[#anon-gen-discard-space|discarded inter-level white space]]
+		* ⬕ represents [=inter-base white space=]
+		* ⬔ represents [=inter-annotation white space=]
+		* ◼ represents [=inter-segment white space=]
+	</div>
+
 <h3 id="ruby-pairing">
 Annotation Pairing</h3>