[css-ui] Add example of bidi and text-overflow

Closes #2125

Author: frivoal

css-ui-3/Overview.bs

@@ -1,7 +1,10 @@
 <style>
 dt[style*="cursor"] * { cursor: inherit; }
 </style>
-<style>#awesome-table td {padding:5px}</style>
+<style>
+.awesome-table td {padding:5px}
+.awesome-table {color:#000;background:#fff;margin: auto;}
+</style>
 
 <pre class='metadata'>
 Title: CSS Basic User Interface Module Level 3 (CSS3 UI)
@@ -683,6 +686,35 @@ atomic inline-level element</a>
 on a line
 must be clipped rather than ellipsed.
 
+<div class=example>
+<h4 id="bidi-ellipsis" class="no-num no-toc">Bidi ellipsis examples</h4>
+These examples demonstrate which characters get hidden
+to make room for the ellipsis in a bidi situation:
+those visually at the end edge of the line.
+
+Sample CSS:
+<pre><code highlight=css>
+div {
+  font-family: monospace;
+  white-space: pre;
+  overflow: hidden;
+  width: 9ch;
+  text-overflow: ellipsis;
+}
+</code></pre>
+
+Sample HTML fragments, renderings, and your browser:
+<table class="awesome-table data">
+<thead><th>HTML<th>Reference rendering<th>Your Browser</thead>
+<tr>
+<td><code highlight=html>&ltdiv>שלום 123456&lt;/div></code><td><div style="font-family:monospace">123456 ם…</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div>
+<tr><td><code highlight=html>&ltdiv dir=rtl>שלום 123456&lt;/div></code><td><div style="font-family:monospace">…456 שלום</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis" dir=rtl>שלום 123456</div>
+
+</table>
+
+
+</div>
+
 <h4 id="ellipsing-details" class="no-num no-toc">ellipsing details</h4>
 <ul>
 <li>
@@ -728,7 +760,7 @@ sample CSS for a div:
 }</code></pre>
 
 sample HTML fragments, renderings, and your browser:
-<table style="color:#000;background:#fff" id="awesome-table"><tbody>
+<table class="awesome-table"><tbody>
 <tr><th>HTML</th><th>sample rendering</th><th>your browser</th></tr>
 <tr>
 <td><pre><code class="lang-markup">&lt;div&gt;

css-ui-4/Overview.bs

@@ -80,6 +80,10 @@ spec:css-color-4; type:value; text:currentcolor
 url: https://www.w3.org/TR/CSS21/box.html#border-edge; type: dfn; spec: CSS21; text: border edge
 </pre>
 
+<style>
+.awesome-table td {padding:5px}
+.awesome-table {color:#000;background:#fff;margin: auto;}
+</style>
 
 <h2 id="intro">Introduction</h2>
 
@@ -811,6 +815,35 @@ atomic inline-level element</a>
 on a line
 must be clipped rather than ellipsed.
 
+<div class=example>
+<h4 id="bidi-ellipsis" class="no-num no-toc">Bidi ellipsis examples</h4>
+These examples demonstrate which characters get hidden
+to make room for the ellipsis in a bidi situation:
+those visually at the edge of the line.
+
+Sample CSS:
+<pre><code highlight=css>
+div {
+  font-family: monospace;
+  white-space: pre;
+  overflow: hidden;
+  width: 9ch;
+  text-overflow: ellipsis;
+}
+</code></pre>
+
+Sample HTML fragments, renderings, and your browser:
+<table class="awesome-table data">
+<thead><th>HTML<th>Reference rendering<th>Your Browser</thead>
+<tr>
+<td><code highlight=html>&ltdiv>שלום 123456&lt;/div></code><td><div style="font-family:monospace">123456 ם…</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div>
+<tr><td><code highlight=html>&ltdiv dir=rtl>שלום 123456&lt;/div></code><td><div style="font-family:monospace">…456 שלום</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis" dir=rtl>שלום 123456</div>
+
+</table>
+
+
+</div>
+
 
 <h4 id="ellipsing-details" class="no-num no-toc">ellipsing details</h4>
 
@@ -868,7 +901,7 @@ must be clipped rather than ellipsed.
 	</code></pre>
 
 	sample HTML fragments, renderings, and your browser:
-	<table style="color:#000;background:#fff" id="awesome-table"><tbody>
+	<table class="awesome-table"><tbody>
 	<tr>
 		<th>HTML
 		<th>sample rendering