letter-spacing-bidi-004.xht (1692B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta charset="utf-8"/> 4 <title>CSS Text level 3 Test: letter spacing is between letters, with bidi</title> 5 <link rel="author" title="Mike Bremford" href="http://bfo.com" /> 6 <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" /> 7 <link rel="match" href="reference/letter-spacing-bidi-004-ref.xht" /> 8 <meta name="assert" content="letter spacing should be applied between letters, not after letters. The latter will cause the colored backgrounds of the span elements to expand."/> 9 <style> 10 .test, .control { 11 font: 50px/1 monospace; 12 font-kerning: none; 13 } 14 .control { 15 position: absolute; 16 color: red; 17 z-index: -1; 18 white-space: pre; 19 } 20 .control span { 21 /* to ensure both background and text must overlay */ 22 background: linear-gradient(to bottom, red 50%, green 50%, green 100%); 23 } 24 .test span { 25 background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%); 26 } 27 .wide { 28 letter-spacing: 2ch; 29 } 30 .narrow { 31 letter-spacing: 1ch; 32 } 33 </style> 34 </head> 35 <body> 36 <p>Test passes if no red is visible except for anti-aliasing differences, and the green boxes are the width of a single letter.</p> 37 <!-- A <ls> B <ls> <bg>C</bg> <ls> gimel <ls> bet <ls> <bg>alef</bg> <gap> --> 38 <div class="control">A B <span>C</span> ב ג <span style="unicode-bidi:embed">א</span></div> 39 <div class="test narrow">AB<span class="wide">Cא</span>בג</div> 40 </body> 41 </html>