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