word-spacing-characters-003-ref.xht (2297B)
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>test reference</title> 6 <style type="text/css"> 7 div { 8 margin: 1em; 9 font-family: monospace; 10 page-break-inside: avoid; 11 } 12 div p { 13 margin: 0; 14 } 15 16 .control span { 17 background: blue; 18 color: blue; 19 } 20 .test span { 21 background: orange; 22 color: orange; 23 } 24 .ws-pre p { 25 white-space: pre; 26 } 27 </style> 28 </head> 29 <body> 30 <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p> 31 32 <!-- ZERO-WIDTH SPACE --> 33 <div class="ws-normal"> 34 <p class="control"><span>A​​​​B</span></p> 35 <p class="test"><span>A​​​​B</span></p> 36 </div> 37 <div class="ws-pre"> 38 <p class="control"><span>A​​​​B</span></p> 39 <p class="test"><span>A​​​​B</span></p> 40 </div> 41 42 <!-- ZERO-WIDTH NO-BREAK SPACE --> 43 <div class="ws-normal"> 44 <p class="control"><span>AB</span></p> 45 <p class="test"><span>AB</span></p> 46 </div> 47 <div class="ws-pre"> 48 <p class="control"><span>AB</span></p> 49 <p class="test"><span>AB</span></p> 50 </div> 51 52 <!-- ZERO-WIDTH NON-JOINER --> 53 <div class="ws-normal"> 54 <p class="control"><span>A‌‌‌‌B</span></p> 55 <p class="test"><span>A‌‌‌‌B</span></p> 56 </div> 57 <div class="ws-pre"> 58 <p class="control"><span>A‌‌‌‌B</span></p> 59 <p class="test"><span>A‌‌‌‌B</span></p> 60 </div> 61 62 <!-- ZERO-WIDTH JOINER --> 63 <div class="ws-normal"> 64 <p class="control"><span>A‍‍‍‍B</span></p> 65 <p class="test"><span>A‍‍‍‍B</span></p> 66 </div> 67 <div class="ws-pre"> 68 <p class="control"><span>A‍‍‍‍B</span></p> 69 <p class="test"><span>A‍‍‍‍B</span></p> 70 </div> 71 72 </body> 73 </html>