word-spacing-characters-003.xht (2765B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>CSS Test: word-spacing on Zero-Width Characters</title> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#spacing-props"/> 8 <link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property"/> 9 <link rel="match" href="word-spacing-characters-003-ref.xht"/> 10 <meta name="assert" content="Word-spacing does not affect zero-width characters."/> 11 <style type="text/css"> 12 div { 13 margin: 1em; 14 font-family: monospace; 15 page-break-inside: avoid; 16 } 17 div p { 18 margin: 0; 19 } 20 21 .control span { 22 background: blue; 23 color: blue; 24 } 25 .test span { 26 word-spacing: 4em; 27 background: orange; 28 color: orange; 29 } 30 .ws-pre p { 31 white-space: pre; 32 } 33 </style> 34 </head> 35 <body> 36 <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p> 37 38 <!-- ZERO-WIDTH SPACE --> 39 <div class="ws-normal"> 40 <p class="control"><span>A​​​​B</span></p> 41 <p class="test"><span>A​​​​B</span></p> 42 </div> 43 <div class="ws-pre"> 44 <p class="control"><span>A​​​​B</span></p> 45 <p class="test"><span>A​​​​B</span></p> 46 </div> 47 48 <!-- ZERO-WIDTH NO-BREAK SPACE --> 49 <div class="ws-normal"> 50 <p class="control"><span>AB</span></p> 51 <p class="test"><span>AB</span></p> 52 </div> 53 <div class="ws-pre"> 54 <p class="control"><span>AB</span></p> 55 <p class="test"><span>AB</span></p> 56 </div> 57 58 <!-- ZERO-WIDTH NON-JOINER --> 59 <div class="ws-normal"> 60 <p class="control"><span>A‌‌‌‌B</span></p> 61 <p class="test"><span>A‌‌‌‌B</span></p> 62 </div> 63 <div class="ws-pre"> 64 <p class="control"><span>A‌‌‌‌B</span></p> 65 <p class="test"><span>A‌‌‌‌B</span></p> 66 </div> 67 68 <!-- ZERO-WIDTH JOINER --> 69 <div class="ws-normal"> 70 <p class="control"><span>A‍‍‍‍B</span></p> 71 <p class="test"><span>A‍‍‍‍B</span></p> 72 </div> 73 <div class="ws-pre"> 74 <p class="control"><span>A‍‍‍‍B</span></p> 75 <p class="test"><span>A‍‍‍‍B</span></p> 76 </div> 77 78 </body> 79 </html>