tab-bidi-001-ref.html (1603B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text Reference: Tabs vs. Bidi</title> 4 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 5 <style> 6 body > div { 7 border: solid blue; 8 margin: 1em; 9 } 10 div > div { 11 white-space: pre; 12 font: 20px/1 monospace; 13 text-align: left; 14 } 15 div > span { /* measure bounds */ 16 border: orange; 17 border-style: none solid; 18 } 19 </style> 20 21 <p>Test passes if all three rows of each box are identical. 22 23 <div> 24 <div style="unicode-bidi: bidi-override; direction: ltr"><span>A B C D </span></div> 25 <div style="unicode-bidi: bidi-override; direction: ltr"><span>A B C D </span></div> 26 <div style="unicode-bidi: bidi-override; direction: ltr"><span>A B C D </span></div> 27 </div> 28 <div> 29 <div style="unicode-bidi: bidi-override; direction: ltr"><span>א בּ ג ד </span></div> 30 <div style="unicode-bidi: bidi-override; direction: ltr"><span>א בּ ג ד </span></div> 31 <div style="unicode-bidi: bidi-override; direction: ltr"><span>א בּ ג ד </span></div> 32 </div> 33 <div> 34 <div style="unicode-bidi: bidi-override; direction: rtl"><span>A B C D </span></div> 35 <div style="unicode-bidi: bidi-override; direction: rtl"><span>A B C D </span></div> 36 <div style="unicode-bidi: bidi-override; direction: rtl"><span>A B C D </span></div> 37 </div> 38 <div> 39 <div style="unicode-bidi: bidi-override; direction: rtl"><span>א בּ ג ד </span></div> 40 <div style="unicode-bidi: bidi-override; direction: rtl"><span>א בּ ג ד </span></div> 41 <div style="unicode-bidi: bidi-override; direction: rtl"><span>א בּ ג ד </span></div> 42 </div>