word-spacing-characters-002-ref.xht (6350B)
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 body > div { display: inline-block; } /* to avoid overflowing the screen. Non essential to the test. */ 28 </style> 29 </head> 30 <body> 31 <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p> 32 33 <!-- IDEOGRAPHIC SPACE --> 34 <div class="ws-normal"> 35 <p class="control"><span>A　　　　B</span></p> 36 <p class="test"><span>A　　　　B</span></p> 37 </div> 38 <div class="ws-pre"> 39 <p class="control"><span>A　　　　B</span></p> 40 <p class="test"><span>A　　　　B</span></p> 41 </div> 42 43 <!-- EN QUAD --> 44 <div class="ws-normal"> 45 <p class="control"><span>A    B</span></p> 46 <p class="test"><span>A    B</span></p> 47 </div> 48 <div class="ws-pre"> 49 <p class="control"><span>A    B</span></p> 50 <p class="test"><span>A    B</span></p> 51 </div> 52 53 <!-- EM QUAD --> 54 <div class="ws-normal"> 55 <p class="control"><span>A    B</span></p> 56 <p class="test"><span>A    B</span></p> 57 </div> 58 <div class="ws-pre"> 59 <p class="control"><span>A    B</span></p> 60 <p class="test"><span>A    B</span></p> 61 </div> 62 63 <!-- EN SPACE --> 64 <div class="ws-normal"> 65 <p class="control"><span>A    B</span></p> 66 <p class="test"><span>A    B</span></p> 67 </div> 68 <div class="ws-pre"> 69 <p class="control"><span>A    B</span></p> 70 <p class="test"><span>A    B</span></p> 71 </div> 72 73 <!-- EM SPACE --> 74 <div class="ws-normal"> 75 <p class="control"><span>A    B</span></p> 76 <p class="test"><span>A    B</span></p> 77 </div> 78 <div class="ws-pre"> 79 <p class="control"><span>A    B</span></p> 80 <p class="test"><span>A    B</span></p> 81 </div> 82 83 <!-- THREE-PER-EM SPACE --> 84 <div class="ws-normal"> 85 <p class="control"><span>A    B</span></p> 86 <p class="test"><span>A    B</span></p> 87 </div> 88 <div class="ws-pre"> 89 <p class="control"><span>A    B</span></p> 90 <p class="test"><span>A    B</span></p> 91 </div> 92 93 <!-- FOUR-PER-EM SPACE --> 94 <div class="ws-normal"> 95 <p class="control"><span>A    B</span></p> 96 <p class="test"><span>A    B</span></p> 97 </div> 98 <div class="ws-pre"> 99 <p class="control"><span>A    B</span></p> 100 <p class="test"><span>A    B</span></p> 101 </div> 102 103 <!-- SIX-PER-EM SPACE --> 104 <div class="ws-normal"> 105 <p class="control"><span>A    B</span></p> 106 <p class="test"><span>A    B</span></p> 107 </div> 108 <div class="ws-pre"> 109 <p class="control"><span>A    B</span></p> 110 <p class="test"><span>A    B</span></p> 111 </div> 112 113 <!-- FIGURE SPACE --> 114 <div class="ws-normal"> 115 <p class="control"><span>A    B</span></p> 116 <p class="test"><span>A    B</span></p> 117 </div> 118 <div class="ws-pre"> 119 <p class="control"><span>A    B</span></p> 120 <p class="test"><span>A    B</span></p> 121 </div> 122 123 <!-- PUNCTUATION SPACE --> 124 <div class="ws-normal"> 125 <p class="control"><span>A    B</span></p> 126 <p class="test"><span>A    B</span></p> 127 </div> 128 <div class="ws-pre"> 129 <p class="control"><span>A    B</span></p> 130 <p class="test"><span>A    B</span></p> 131 </div> 132 133 <!--THIN SPACE --> 134 <div class="ws-normal"> 135 <p class="control"><span>A    B</span></p> 136 <p class="test"><span>A    B</span></p> 137 </div> 138 <div class="ws-pre"> 139 <p class="control"><span>A    B</span></p> 140 <p class="test"><span>A    B</span></p> 141 </div> 142 143 <!-- HAIR SPACE --> 144 <div class="ws-normal"> 145 <p class="control"><span>A    B</span></p> 146 <p class="test"><span>A    B</span></p> 147 </div> 148 <div class="ws-pre"> 149 <p class="control"><span>A    B</span></p> 150 <p class="test"><span>A    B</span></p> 151 </div> 152 153 <!-- NARROW NO-BREAK SPACE --> 154 <div class="ws-normal"> 155 <p class="control"><span>A    B</span></p> 156 <p class="test"><span>A    B</span></p> 157 </div> 158 <div class="ws-pre"> 159 <p class="control"><span>A    B</span></p> 160 <p class="test"><span>A    B</span></p> 161 </div> 162 163 <!-- MEDIUM MATHEMATICAL SPACE --> 164 <div class="ws-normal"> 165 <p class="control"><span>A    B</span></p> 166 <p class="test"><span>A    B</span></p> 167 </div> 168 <div class="ws-pre"> 169 <p class="control"><span>A    B</span></p> 170 <p class="test"><span>A    B</span></p> 171 </div> 172 173 174 </body> 175 </html>