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