<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML><HEAD>
<!--
Based on http://dbaron.org/css/test/bidi2 by Dave Baron, [email protected]
Copied with permission on 2005-09-10
Modified with permission (rearranged to fit in 800x600 and changed to make more
testcases have the same expected layout).
-->
<TITLE>Bidirectional Text Test 2 - CSS</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK REL="copyright" HREF="/~dbaron/legal.html">
<STYLE TYPE="text/css">
p { text-align: left; }
table.pair { border-spacing: 0; margin-bottom: 0; }
table.pair td { padding: 0; }
p.pair { margin: 0; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.rle { direction: rtl; unicode-bidi: embed; }
.lre { direction: ltr; unicode-bidi: embed; }
.rlo { direction: rtl; unicode-bidi: bidi-override; }
.lro { direction: ltr; unicode-bidi: bidi-override; }
.embed { unicode-bidi: embed; }
.override { unicode-bidi: bidi-override; }
div.box { border:1px green solid; display:inline-block; padding:3px; margin:3px; vertical-align:middle; }
</STYLE>
</HEAD>
<BODY>
<H1>Bidirectional Text Test 2 - CSS</H1>
<p>This test is based on <a
href="http://www.w3.org/TR/REC-CSS2/visuren.html#direction">CSS2 section
9.10</a> and <a href="http://www.unicode.org/unicode/uni2book/ch03.pdf">Chapter
3</a> of the <a href="http://www.unicode.org/unicode/uni2book/u2.html">Unicode
Standard</a>.</p>
<p>See also a <a href="bidi2_html">test for the same concepts in HTML</a>
and a <a href="bidi2_charcode">test for the same concepts using Unicode
directional formatting codes</a>.</p>
<p>In each box, all the lines should be the same.</p>
<div class="box">
<p class="pair">ABCDEFGHI</p>
<p class="rtl pair">ABCDEFGHI</p>
<p class="rtl pair">ABC<span>DEF</span>GHI</p>
<p class="rlo pair">IHGFEDCBA</p>
<p class="rlo pair">IHG<span>FED</span>CBA</p>
<p class="rlo pair">IHG<span class="embed">DEF</span>CBA</p>
<p class="rlo pair">IHG<span class="override">FED</span>CBA</p>
<p class="rlo pair">IHG<span style="unicode-bidi: inherit">FED</span>CBA</p>
<p class="rlo pair">IHG<span class="lro">DEF</span>CBA</p>
</div>
<div class="box">
<table class="pair"><tr><td>ג</td><td>ב</td><td>א</td></tr></table>
<p class="pair">אבג</p>
<p class="pair embed">אבג</p>
<p class="pair override">גבא</p>
</div>
<div class="box">
<table class="pair"><tr><td>ג</td><td>ב</td><td>א</td><td> </td><td>A</td><td>B</td><td>C</td><td> </td><td>ו</td><td>ה</td><td>ד</td></tr></table>
<p class="pair">אבג ABC דהו</p>
<p class="pair rtl">דהו ABC אבג</p>
</div>
<div class="box">
<table class="pair"><tr><td>ג</td><td>ב</td><td>א</td><td> </td><td>A</td><td>B</td><td>C</td><td> </td><td>ו</td><td>ה</td><td>ד</td><td> </td><td>D</td><td>E</td><td>F</td><td> </td><td>ט</td><td>ח</td><td>ז</td></tr></table>
<p class="pair">אבג ABC דהו DEF זחט</p>
<p class="pair">אבג <span>ABC דהו</span> DEF זחט</p>
<p class="pair">אבג <span class="ltr embed">ABC דהו DEF</span> זחט</p>
<p class="pair">זחט <span class="rtl embed">DEF דהו ABC</span> אבג</p>
<p class="pair">דהו <span class="rtl embed">ABC אבג</span> DEF זחט</p>
<p class="pair">דהו <span class="rtl override">CBA אבג</span> DEF זחט</p>
<p class="pair">אבג <span class="ltr override">ABC והד</span> DEF זחט</p>
<p class="rtl pair">זחט <span class="ltr override">ABC והד</span> DEF אבג</p>
</div>
<div class="box">
<table class="pair"><tr><td>ג</td><td>ב</td><td>א</td><td> </td><td>A</td><td>B</td><td>C</td><td> </td><td>ו</td><td>ה</td><td>ד</td><td> </td><td>D</td><td>E</td><td>F</td><td> </td><td>G</td><td>H</td><td>I</td><td> </td><td>ט</td><td>ח</td><td>ז</td></tr></table>
<p class="pair">אבג ABC דהו DEF GHI זחט</p>
</div>
<br/>
<div class="box">
<table class="pair"><tr><td>F</td><td>E</td><td>D</td><td> </td><td>ו</td><td>ה</td><td>ד</td><td> </td><td>C</td><td>B</td><td>A</td><td> </td><td>ג</td><td>ב</td><td>א</td><td> </td><td>G</td><td>H</td><td>I</td><td> </td><td>ט</td><td>ח</td><td>ז</td></tr></table>
<p class="pair">אבג <span class="rtl override">ABC דהו DEF</span> GHI זחט</p>
</div>
<div class="box">
<table class="pair"><tr><td>ג</td><td>ב</td><td>א</td><td> </td><td>A</td><td>B</td><td>C</td><td> </td><td>F</td><td>E</td><td>D</td><td> </td><td>ו</td><td>ה</td><td>ד</td><td> </td><td>G</td><td>H</td><td>I</td><td> </td><td>ט</td><td>ח</td><td>ז</td></tr></table>
<p class="pair">אבג ABC <span class="rtl override">דהו DEF</span> GHI זחט</p>
</div>
<hr title="Beginning of Footer">
<!--
<P><A HREF="http://validator.w3.org/check/referer" TITLE="W3C HTML Validator"><img src="../../../images/vh40" ALT="Valid HTML 4.0!" height="31" width="88"></A></P>
-->
<P>(Back to
<A HREF="./">CSS Testing Information</A>,
<A HREF="../../">David Baron</A>)
<P><A HREF="/" TITLE="David Baron's Homepage">LDB</A>,
<A rev="made" href="mailto:[email protected]" TITLE="Send e-mail to David Baron">[email protected]</A>, 2001-06-05</P>
<P>Modified and used with the author’s permission.</P>
</BODY></HTML>