ÿþ<!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 for inlines</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> body {background: white; } .wrap {margin: 1em 0; width: 39em;border: 5px solid gray;} .wrap p {margin: 0.5em 0; font-size: 200%;line-height:1.5;} .wrap span span { margin:0 5em; border: 2px solid red; border-left: 0.25em solid blue; border-right: 0.25em solid green; } </style> </head> <body> <h1><span lang="en">Direction and bi-directional ordering for inlines</span> <br /> <span lang="iw" dir="rtl">ÛÙÕÕß ÓÕ ÛÙÕÕàÙ ÔÖÞàÔ</span> <br /> <span lang="ar">'D'*,'G H+F'&J 'D'*,'G J#E1</span></h1> <p>Note: The border-left is blue and border-right is green.</p> <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 visual"> <p lang="en"><span>ÞÙÞÙß ÜéÞÐÜ ÞÙÞÙß ÜéÞÐÜ <span>ÞÙÞÙß ÜéÞÐÜ ÞÙÞÙß ÜéÞÐÜ ÞÙÞÙß ÜéÞÐÜ</span> ÞÙÞÙß ÜéÞÐÜ ÞÙÞÙß ÜéÞÐÜ.</span></p> <p lang="en"><span>ÞÙÞÙß ÜéÞÐÜ ÞÙÞÙß ÜéÞÐÜ <span lang="iw" dir="ltr">right to left right to left right to left</span> ÞÙÞÙß ÜéÞÐÜ ÞÙÞÙß ÜéÞÐÜ.</span></p> </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 visual"> <p lang="en"><span>left to right left to right <span>left to right left to right left to right</span> left to right left to right.</span></p> <p lang="en"><span>left to right left to right <span lang="iw" dir="rtl">ÞéÞÐÜ ÜÙÞÙß ÞéÞÐÜ ÜÙÞÙß ÞéÞÐÜ ÜÙÞÙß</span> left to right left to right.</span></p> </div> </div><!-- end ltr block --> <p>Please see <a href="start-and-end-values.htm">Directional start and end values</a> for other test relating to this issue.</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>