CINXE.COM
CSS Text level 3 Test: letter spacing nested changes, with bidi
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>CSS Text level 3 Test: letter spacing nested changes, with bidi</title> <link rel="author" title="Mike Bremford" href="http://bfo.com" /> <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" /> <link rel="match" href="reference/letter-spacing-bidi-005-ref.xht" /> <meta name="assert" content="Changes in letter spacing affect the spacing between letters within that element only" /> <style> .test, .control { font: 50px/1 monospace; font-kerning: none; } .control { position: absolute; color: red; z-index: -1; white-space: pre; } .control span { /* to ensure both background and text overlay correctly */ background: linear-gradient(to bottom, red 50%, green 50%, green 100%); } .test span { background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%); } .wide { letter-spacing: 2ch; } .narrow { letter-spacing: 1ch; } </style> </head> <body> <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p> <!-- A <ls> <ls> <bg>B <ls> bet <ls> alef <ls> C</bg> <ls> D <gap> --> <div class="control">A <span>B א ב C</span> D</div> <div class="test wide">A<span class="narrow">BאבC</span>D</div> </body> </html>