ÿþ<!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>Text align values for start and end and using cascadance for non supporting browsers</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> body { background: white } .support { text-align: center } .wrap p { margin: 0.5em 0 } .wrap div { border: 5px solid gray; background: white; padding: 0 0.5em } .wrap { margin: 1em 0 } .align-start { background: blue } .align-end { background: green } [dir="rtl"] .align-start { text-align: right; -webkit-text-align: start; -ms-text-align: start; -o-text-align: start; text-align: start; } [dir="rtl"] .align-end { text-align: left; -webkit-text-align: end; -ms-text-align: end; -o-text-align: end; text-align: end; } [dir="ltr"] .align-start { text-align: left; -webkit-text-align: start; -ms-text-align: start; -o-text-align: start; text-align: start; } [dir="ltr"] .align-end { text-align: right; -webkit-text-align: end; -ms-text-align: end; -o-text-align: end; text-align: end; } .inline-block { display:inline-block; min-width: 50% } *+html [dir="rtl"] .align-end { text-align: left; } *+html [dir="ltr"] .align-end { text-align: right; } * html .align-end { text-align: left; } </style> </head> <body> <h1><span lang="en">Text align values for start and end</span> <br /> <span lang="iw" dir="rtl">ØçáØ âèÛÙ ÔÙÙéÕè âÑÕè ÔÔê×ÜÔ ÕÔáÙÕÝ</span> <br /> <span lang="ar">'DF5 'DE-'0') (/'J) H'DBJE FG'J)</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>Text align values for start and end and using cascadance for non supporting browsers (viewing)</li> <li><a href="direction-bidi-ordering.htm">Using the  direction property without overiding bidi-ordering</a></li> </ul> <p class="support" dir="ltr">Web browsers supporting the start value - <span dir="rtl" lang="iw">ÓäÓäàÙ ÐÙàØèàØ ÔêÕÞÛÙÝ âèÚ ÕÜÔê×ÙÜ</span> - <span dir="rtl" lang="ar">E*5A-'* 'DHJ( 'D*J */9E 'DBJE) '(/#</span>: Firefox 3.6.16 (Gecko 1.9), Chrome (WebKit) and Safari (WebKit).</p> <p class="support" dir="ltr">Web browsers supporting the end value - <span dir="rtl" lang="iw">ÓäÓäàÙ ÐÙàØèàØ ÔêÕÞÛÙÝ éÜ âèÛÙ áÕã</span> - <span dir="rtl" lang="ar">E*5A-'* 'DHJ( /9E 'DBJE 'DFG'J)</span>: Firefox 3.6.16 (Gecko 1.9), Chrome (WebKit) and Safari (WebKit).</p> <div dir="rtl"> <h2><span dir="ltr" lang="en">Right to left text 'rtl'</span> - <span lang="iw">ÞÙÞÙß ÜéÞÐÜ ÔØçáØ</span> - <span lang="ar">'DF5 EF 'DJEJF %DI 'DJ3'1</span></h2> <div class="wrap align-start"> <div> <p lang="en">text-align start</p> <p lang="iw">ØçáØ ÑÙÙéÕè ÜÔê×ÙÜ</p> <p lang="ar">EH'!E) 'DF5H5 (/!</p> </div> </div> <div class="wrap align-end"> <div> <p lang="en">text-align end</p> <p lang="iw">ØçáØ ÔÙÙéÕè ÑáÕäÕ</p> <p lang="ar">EH'!E) 'DF5H5 FG'J)</p> </div> </div> </div><!-- end rtl block --> <div dir="ltr"> <h2><span lang="en">Left to Right text 'rtl'</span> - <span dir="rtl" lang="iw">ÞéÞÐÜ ØçáØ ÞÙÞÙß</span> - <span dir="rtl" lang="ar">'DF5 EF 'DJ3'1 %DI 'DJEJF</span></h2> <div class="wrap align-start"> <div> <p lang="en">text-align start</p> <p lang="iw">ØçáØ ÑÙÙéÕè ÜÔê×ÙÜ</p> <p lang="ar">EH'!E) 'DF5H5 (/!</p> </div> </div> <div class="wrap align-end"> <div> <p lang="en">text-align end</p> <p lang="iw">ØçáØ ÔÙÙéÕè ÑáÕäÕ</p> <p lang="ar">EH'!E) 'DF5H5 FG'J)</p> </div> </div> </div><!-- end ltr block --> <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 dir="rtl"> <div class="wrap align-start"> <div class="inline-block"> <p lang="en">text-align start</p> <p lang="iw">ØçáØ ÑÙÙéÕè ÜÔê×ÙÜ</p> <p lang="ar">EH'!E) 'DF5H5 (/!</p> </div> </div> <div class="wrap align-end"> <div class="inline-block"> <p lang="en">text-align end</p> <p lang="iw">ØçáØ ÔÙÙéÕè ÑáÕäÕ</p> <p lang="ar">EH'!E) 'DF5H5 FG'J)</p> </div> </div> </div><!-- end rtl block --> <div dir="ltr"> <h2><span lang="en">Left to Right 'rtl'</span> - <span lang="iw" dir="rtl">ÞéÞÐÜ ÜÙÞÙß</span> - <span lang="ar" dir="rtl">EF 'DJ3'1 %DI 'DJEJF</span></h2> <div class="wrap align-start"> <div class="inline-block"> <p lang="en">text-align start</p> <p lang="iw">ØçáØ ÑÙÙéÕè ÜÔê×ÙÜ</p> <p lang="ar">EH'!E) 'DF5H5 (/!</p> </div> </div> <div class="wrap align-end"> <div class="inline-block"> <p lang="en">text-align end</p> <p lang="iw">ØçáØ ÔÙÙéÕè ÑáÕäÕ</p> <p lang="ar">EH'!E) 'DF5H5 FG'J)</p> </div> </div> </div><!-- end ltr 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>