I18N-ISSUE-311: Clarity of Arabic hyphenation example <http://dev.w3.org/csswg/css-text/issues-lc-2013#issue-46>

--HG--
extra : rebase_source : a9648a23af81cdf689e897b4ec48ba16262d5567

Author: kojiishi

css-text/Overview.bs

@@ -31,6 +31,12 @@ At Risk: the 'hanging-punctuation' property
     .egbidiwsaB { background:yellow;border:2px dotted white }
     .egbidiwsbC { border:2px dotted red }
 
+	.hyphens-ex {
+		border: thin solid black;
+		display: inline-block;
+		padding: 4pt;
+	}
+
     /* Start Letter-spacing Tutorial */
     .ls-ex {
       font-size: 200%;
@@ -1144,8 +1150,10 @@ Line Breaking Details</h3>
 
     <div class="example">
       <p>For example, if the word &ldquo;&#x0646;&#x0648;&#x0634;&#x062A;&#x0646;&rdquo;
-      were hyphenated, it would appear as &ldquo;&#xFEE7;&#xFEEE;&#xFEB7;-&#xFE98;&#xFEE6;&rdquo;
-      not as &ldquo;&#xFEE7;&#xFEEE;&#xFEB5;-&#xFE97;&#xFEE6;&rdquo;.
+      were hyphenated, it would appear as
+      <span dir="rtl" class="hyphens-ex">&#xFEE7;&#xFEEE;&#xFEB7;-<br>&#xFE98;&#xFEE6;</span>
+      not as
+      <span dir="rtl" class="hyphens-ex">&#xFEE7;&#xFEEE;&#xFEB5;-<br>&#xFE97;&#xFEE6;</span>.
     </div>
 
 

css-text/Overview.html

@@ -55,6 +55,12 @@
     .egbidiwsaB { background:yellow;border:2px dotted white }
     .egbidiwsbC { border:2px dotted red }
 
+	.hyphens-ex {
+		border: thin solid black;
+		display: inline-block;
+		padding: 4pt;
+	}
+
     /* Start Letter-spacing Tutorial */
     .ls-ex {
       font-size: 200%;
@@ -1298,8 +1304,10 @@ <h3 class="heading settled heading" data-level=6.1 id=hyphens-property><span cla
 
     <div class=example>
       <p>For example, if the word “نوشتن”
-      were hyphenated, it would appear as “ﻧﻮﺷ-ﺘﻦ”
-      not as “ﻧﻮﺵ-ﺗﻦ”.
+      were hyphenated, it would appear as
+      <span class=hyphens-ex dir=rtl>ﻧﻮﺷ-<br>ﺘﻦ</span>
+      not as
+      <span class=hyphens-ex dir=rtl>ﻧﻮﺵ-<br>ﺗﻦ</span>.
     </div>