ÿþ<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en"> <head> <title>Direction and bi-directional ordering</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> body {background: white; } .wrap p {margin: 0.5em 0; font-size: 200%;} .wrap div { border: 5px solid gray; background: white; padding: 0 0.5em;position:relative;} .wrap {margin: 1em 0;} .bidi-ltr {direction: ltr;} .bidi-rtl {direction: rtl;} </style> </head> <body> <h1><span lang="en">Direction and bi-directional ordering</span> <br /> <span lang="iw" dir="rtl">ÛÙÕÕß ÓÕ ÛÙÕÕàÙ ÔÖÞàÔ</span> <br /> <span lang="ar">'D'*,'G H+F'&J 'D'*,'G J#E1</span></h1> <ul> <li><a href="start-and-end-values.htm">Directional start and end values</a></li> <li><a href="start-and-end-values-text-align.htm">Text align values for start and end</a></li> <li><a href="start-and-end-values-text-align2.htm">Text align values for start and end and using cascadance for non supporting browsers</a></li> <li>Using the  direction property without overiding bidi-ordering (viewing)</li> </ul> <div dir="rtl"> <h2><span lang="en" dir="ltr">Right to Left 'rtl'</span> - <span lang="iw">ÞÙÞÙß ÜéÞÐÜ</span> - <span lang="ar">EF 'DJEJF %DI 'DJ3'1</span></h2> <div class="wrap"> <div> <p lang="en">This sentence ends with a full-stop or period.</p> <p lang="iw">ÞéäØ ÖÔ ÞáêÙÙÝ âÝ âæÙèÔ êçÕäÔ ÞÜÐÔ ÐÕ.</p> <p lang="ar">G0G 'D,ED) (A'5D)  HA*1).</p> </div> </div> <p>With <code>direction: ltr</code></p> <div class="wrap bidi-ltr"> <div> <p lang="en">This sentence ends with a full-stop or period.</p> <p lang="iw">ÞéäØ ÖÔ ÞáêÙÙÝ âÝ âæÙèÔ êçÕäÔ ÞÜÐÔ ÐÕ.</p> <p lang="ar">G0G 'D,ED) (A'5D)  HA*1).</p> </div> </div> </div><!-- end rtl block --> <div dir="ltr"> <h2><span lang="en">Left to Right 'ltr'</span> - <span lang="iw" dir="rtl">ÞéÞÐÜ ÜÙÞÙß</span> - <span lang="ar" dir="rtl">EF 'DJ3'1 %DI 'DJEJF</span></h2> <div class="wrap"> <div> <p lang="en">This sentence ends with a full-stop or period.</p> <p lang="iw">ÞéäØ ÖÔ ÞáêÙÙÝ âÝ âæÙèÔ êçÕäÔ ÞÜÐÔ ÐÕ.</p> <p lang="ar">G0G 'D,ED) (A'5D)  HA*1).</p> </div> </div> <p>With <code>direction: rtl</code></p> <div class="wrap bidi-rtl"> <div> <p lang="en">This sentence ends with a full-stop or period.</p> <p lang="iw">ÞéäØ ÖÔ ÞáêÙÙÝ âÝ âæÙèÔ êçÕäÔ ÞÜÐÔ ÐÕ.</p> <p lang="ar">G0G 'D,ED) (A'5D)  HA*1).</p> </div> </div> </div><!-- end ltr block --> <div dir="ltr"> <h2><span lang="en">Left to Right 'ltr'</span> - <span lang="iw" dir="rtl">ÞéÞÐÜ ÜÙÞÙß</span> - <span lang="ar" dir="rtl">EF 'DJ3'1 %DI 'DJEJF</span></h2> <div class="wrap"> <div> <p lang="en">This sentence has "quotation marks."</p> <p lang="iw">ÞéäØ ÖÔ "ÑÞèÛÐÕê."</p> <p lang="ar">G0G 'D,ED) D/JG "9D'E'* 'D'B*('3".</p> </div> </div> <p>With <code>direction: rtl</code></p> <div class="wrap bidi-rtl"> <div> <p lang="en">This sentence has "quotation marks."</p> <p lang="iw">ÞéäØ ÖÔ "ÑÞèÛÐÕê."</p> <p lang="ar">G0G 'D,ED) D/JG "9D'E'* 'D'B*('3".</p> </div> </div> </div><!-- end ltr block --> <div dir="rtl"> <h2><span lang="en" dir="ltr">Right to Left 'rtl'</span> - <span lang="iw">ÞÙÞÙß ÜéÞÐÜ</span> - <span lang="ar">EF 'DJEJF %DI 'DJ3'1</span></h2> <div class="wrap"> <div> <p lang="en">This sentence has "quotation marks."</p> <p lang="iw">ÞéäØ ÖÔ "ÑÞèÛÐÕê."</p> <p lang="ar">G0G 'D,ED) D/JG "9D'E'* 'D'B*('3".</p> </div> </div> <p>With <code>direction: ltr</code></p> <div class="wrap bidi-ltr"> <div> <p lang="en">This sentence has "quotation marks."</p> <p lang="iw">ÞéäØ ÖÔ "ÑÞèÛÐÕê."</p> <p lang="ar">G0G 'D,ED) D/JG "9D'E'* 'D'B*('3".</p> </div> </div> </div><!-- end rtl block --> <p>Please see <a href="http://dev.w3.org/csswg/css3-writing-modes/">CSS Writing Modes Module Level 3</a> and <a href="http://www.w3.org/International/tutorials/bidi-xhtml/">Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts</a>.</p> <ul> <li><a href="http://css-class.com/test/css/bidi/">Bidirection</a> (directory)</li> <li><a href="http://css-class.com/test/">CSS Class Test</a></li> </ul> </body> </html>