1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: word-spacing on Fixed-Width Space Characters</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#spacing-props">
7 <meta name="flags" content="">
8 <meta name="assert" content="Word-spacing does not affect fixed-width spaces.">
9 <style type="text/css">
10 div {
11 margin: 1em;
12 font-family: monospace;
13 page-break-inside: avoid;
14 }
15 div p {
16 margin: 0;
17 }
18
19 .control span {
20 background: blue;
21 color: blue;
22 }
23 .test span {
24 word-spacing: 4em;
25 background: orange;
26 color: orange;
27 }
28 .ws-pre p {
29 white-space: pre;
30 }
31 </style>
32 </head>
33 <body>
34 <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p>
35
36 <!-- IDEOGRAPHIC SPACE -->
37 <div class="ws-normal">
38 <p class="control"><span>A　　　　B</span></p>
39 <p class="test"><span>A　　　　B</span></p>
40 </div>
41 <div class="ws-pre">
42 <p class="control"><span>A　　　　B</span></p>
43 <p class="test"><span>A　　　　B</span></p>
44 </div>
45
46 <!-- EN QUAD -->
47 <div class="ws-normal">
48 <p class="control"><span>A    B</span></p>
49 <p class="test"><span>A    B</span></p>
50 </div>
51 <div class="ws-pre">
52 <p class="control"><span>A    B</span></p>
53 <p class="test"><span>A    B</span></p>
54 </div>
55
56 <!-- EM QUAD -->
57 <div class="ws-normal">
58 <p class="control"><span>A    B</span></p>
59 <p class="test"><span>A    B</span></p>
60 </div>
61 <div class="ws-pre">
62 <p class="control"><span>A    B</span></p>
63 <p class="test"><span>A    B</span></p>
64 </div>
65
66 <!-- EN SPACE -->
67 <div class="ws-normal">
68 <p class="control"><span>A    B</span></p>
69 <p class="test"><span>A    B</span></p>
70 </div>
71 <div class="ws-pre">
72 <p class="control"><span>A    B</span></p>
73 <p class="test"><span>A    B</span></p>
74 </div>
75
76 <!-- EM SPACE -->
77 <div class="ws-normal">
78 <p class="control"><span>A    B</span></p>
79 <p class="test"><span>A    B</span></p>
80 </div>
81 <div class="ws-pre">
82 <p class="control"><span>A    B</span></p>
83 <p class="test"><span>A    B</span></p>
84 </div>
85
86 <!-- THREE-PER-EM SPACE -->
87 <div class="ws-normal">
88 <p class="control"><span>A    B</span></p>
89 <p class="test"><span>A    B</span></p>
90 </div>
91 <div class="ws-pre">
92 <p class="control"><span>A    B</span></p>
93 <p class="test"><span>A    B</span></p>
94 </div>
95
96 <!-- FOUR-PER-EM SPACE -->
97 <div class="ws-normal">
98 <p class="control"><span>A    B</span></p>
99 <p class="test"><span>A    B</span></p>
100 </div>
101 <div class="ws-pre">
102 <p class="control"><span>A    B</span></p>
103 <p class="test"><span>A    B</span></p>
104 </div>
105
106 <!-- SIX-PER-EM SPACE -->
107 <div class="ws-normal">
108 <p class="control"><span>A    B</span></p>
109 <p class="test"><span>A    B</span></p>
110 </div>
111 <div class="ws-pre">
112 <p class="control"><span>A    B</span></p>
113 <p class="test"><span>A    B</span></p>
114 </div>
115
116 <!-- FIGURE SPACE -->
117 <div class="ws-normal">
118 <p class="control"><span>A    B</span></p>
119 <p class="test"><span>A    B</span></p>
120 </div>
121 <div class="ws-pre">
122 <p class="control"><span>A    B</span></p>
123 <p class="test"><span>A    B</span></p>
124 </div>
125
126 <!-- PUNCTUATION SPACE -->
127 <div class="ws-normal">
128 <p class="control"><span>A    B</span></p>
129 <p class="test"><span>A    B</span></p>
130 </div>
131 <div class="ws-pre">
132 <p class="control"><span>A    B</span></p>
133 <p class="test"><span>A    B</span></p>
134 </div>
135
136 <!--THIN SPACE -->
137 <div class="ws-normal">
138 <p class="control"><span>A    B</span></p>
139 <p class="test"><span>A    B</span></p>
140 </div>
141 <div class="ws-pre">
142 <p class="control"><span>A    B</span></p>
143 <p class="test"><span>A    B</span></p>
144 </div>
145
146 <!-- HAIR SPACE -->
147 <div class="ws-normal">
148 <p class="control"><span>A    B</span></p>
149 <p class="test"><span>A    B</span></p>
150 </div>
151 <div class="ws-pre">
152 <p class="control"><span>A    B</span></p>
153 <p class="test"><span>A    B</span></p>
154 </div>
155
156 <!-- NARROW NO-BREAK SPACE -->
157 <div class="ws-normal">
158 <p class="control"><span>A    B</span></p>
159 <p class="test"><span>A    B</span></p>
160 </div>
161 <div class="ws-pre">
162 <p class="control"><span>A    B</span></p>
163 <p class="test"><span>A    B</span></p>
164 </div>
165
166 <!-- MEDIUM MATHEMATICAL SPACE -->
167 <div class="ws-normal">
168 <p class="control"><span>A    B</span></p>
169 <p class="test"><span>A    B</span></p>
170 </div>
171 <div class="ws-pre">
172 <p class="control"><span>A    B</span></p>
173 <p class="test"><span>A    B</span></p>
174 </div>
175
176
177 </body>
178 </html>