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: text-transform - fullwidth - basic cases</title>
5 <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp">
6 <link rel="reviewer" title="Koji Ishii" href="mailto:kojiishi@gluesoft.co.jp">
7 <link rel="help" title="CSS Text Level 3: 3.1. Transforming Text: the ‘text-transform’ property" href="http://www.w3.org/TR/css-text-3/#text-transform">
8 <link rel="match" href="reference/text-transform-fullwidth-001-ref.htm">
9 <meta name="flags" content="">
10 <meta name="assert" content="The UA should transform halfwidth character to fullwidth character when text-transform is set to fullwidth.">
11 <style type="text/css">
12
13 .test span {
14 text-transform: full-width;
15 }
16 /* the CSS below is not part of the test */
17 span {
18 background-color: cyan;
19 }
20 .test {
21 color: Blue;
22 font-size: 200%;
23 line-height: 1.2em;
24 }
25 .test div {
26 display: inline-block;
27 margin-bottom: 1em;
28 margin-top: 1em;
29 text-align: center;
30 white-space: nowrap;
31 width: 5em;
32 }
33
34 </style>
35 <script type="text/javascript">
36 //
37 // Set Font Family to 'IPAMincho'
38 function setFontFamily () {
39 var fontName = 'IPAMincho';
40 var divs = document.getElementsByTagName('div');
41 var i = 0;
42 var div;
43 while (i < divs.length) {
44 div = divs.item(i);
45 if (div.className == 'test') {
46 div.style.fontFamily = fontName;
47 }
48 i++;
49 }
50 }
51 //
52 </script>
53 </head>
54 <body>
55 <p>
56 Test passes if the upper character in each pair matches the lower one in both shape <strong>and size</strong>.
57 </p>
58 <div class="test">
59
60 <!-- FULLWIDTH LATIN -->
61 <div>[<span>　</span>]<br>[<span> </span>]</div>
62 <div><span>！</span><br><span>!</span></div>
63 <div><span>”</span><br><span>"</span></div>
64 <div><span>＃</span><br><span>#</span></div>
65 <div><span>＄</span><br><span>$</span></div>
66 <div><span>％</span><br><span>%</span></div>
67 <div><span>＆</span><br><span>&</span></div>
68 <div><span>’</span><br><span>'</span></div>
69 <div><span>（</span><br><span>(</span></div>
70 <div><span>）</span><br><span>)</span></div>
71 <div><span>＊</span><br><span>*</span></div>
72 <div><span>＋</span><br><span>+</span></div>
73 <div><span>，</span><br><span>,</span></div>
74 <div><span>－</span><br><span>-</span></div>
75 <div><span>．</span><br><span>.</span></div>
76 <div><span>／</span><br><span>/</span></div>
77 <br>
78 <div><span>０</span><br><span>0</span></div>
79 <div><span>１</span><br><span>1</span></div>
80 <div><span>２</span><br><span>2</span></div>
81 <div><span>３</span><br><span>3</span></div>
82 <div><span>４</span><br><span>4</span></div>
83 <div><span>５</span><br><span>5</span></div>
84 <div><span>６</span><br><span>6</span></div>
85 <div><span>７</span><br><span>7</span></div>
86 <div><span>８</span><br><span>8</span></div>
87 <div><span>９</span><br><span>9</span></div>
88 <br>
89 <div><span>：</span><br><span>:</span></div>
90 <div><span>；</span><br><span>;</span></div>
91 <div><span>＜</span><br><span><</span></div>
92 <div><span>＝</span><br><span>=</span></div>
93 <div><span>＞</span><br><span>></span></div>
94 <div><span>？</span><br><span>?</span></div>
95 <div><span>＠</span><br><span>@</span></div>
96 <br>
97 <div><span>Ａ</span><br><span>A</span></div>
98 <div><span>Ｂ</span><br><span>B</span></div>
99 <div><span>Ｃ</span><br><span>C</span></div>
100 <div><span>Ｄ</span><br><span>D</span></div>
101 <div><span>Ｅ</span><br><span>E</span></div>
102 <div><span>Ｆ</span><br><span>F</span></div>
103 <div><span>Ｇ</span><br><span>G</span></div>
104 <div><span>Ｈ</span><br><span>H</span></div>
105 <div><span>Ｉ</span><br><span>I</span></div>
106 <div><span>Ｊ</span><br><span>J</span></div>
107 <div><span>Ｋ</span><br><span>K</span></div>
108 <div><span>Ｌ</span><br><span>L</span></div>
109 <div><span>Ｍ</span><br><span>M</span></div>
110 <div><span>Ｎ</span><br><span>N</span></div>
111 <div><span>Ｏ</span><br><span>O</span></div>
112 <div><span>Ｐ</span><br><span>P</span></div>
113 <div><span>Ｑ</span><br><span>Q</span></div>
114 <div><span>Ｒ</span><br><span>R</span></div>
115 <div><span>Ｓ</span><br><span>S</span></div>
116 <div><span>Ｔ</span><br><span>T</span></div>
117 <div><span>Ｕ</span><br><span>U</span></div>
118 <div><span>Ｖ</span><br><span>V</span></div>
119 <div><span>Ｗ</span><br><span>W</span></div>
120 <div><span>Ｘ</span><br><span>X</span></div>
121 <div><span>Ｙ</span><br><span>Y</span></div>
122 <div><span>Ｚ</span><br><span>Z</span></div>
123 <br>
124 <div><span>［</span><br><span>[</span></div>
125 <div><span>＼</span><br><span>\</span></div>
126 <div><span>］</span><br><span>]</span></div>
127 <div><span>＾</span><br><span>^</span></div>
128 <div><span>＿</span><br><span>_</span></div>
129 <div><span>｀</span><br><span>`</span></div>
130 <br>
131 <div><span>ａ</span><br><span>a</span></div>
132 <div><span>ｂ</span><br><span>b</span></div>
133 <div><span>ｃ</span><br><span>c</span></div>
134 <div><span>ｄ</span><br><span>d</span></div>
135 <div><span>ｅ</span><br><span>e</span></div>
136 <div><span>ｆ</span><br><span>f</span></div>
137 <div><span>ｇ</span><br><span>g</span></div>
138 <div><span>ｈ</span><br><span>h</span></div>
139 <div><span>ｉ</span><br><span>i</span></div>
140 <div><span>ｊ</span><br><span>j</span></div>
141 <div><span>ｋ</span><br><span>k</span></div>
142 <div><span>ｌ</span><br><span>l</span></div>
143 <div><span>ｍ</span><br><span>m</span></div>
144 <div><span>ｎ</span><br><span>n</span></div>
145 <div><span>ｏ</span><br><span>o</span></div>
146 <div><span>ｐ</span><br><span>p</span></div>
147 <div><span>ｑ</span><br><span>q</span></div>
148 <div><span>ｒ</span><br><span>r</span></div>
149 <div><span>ｓ</span><br><span>s</span></div>
150 <div><span>ｔ</span><br><span>t</span></div>
151 <div><span>ｕ</span><br><span>u</span></div>
152 <div><span>ｖ</span><br><span>v</span></div>
153 <div><span>ｗ</span><br><span>w</span></div>
154 <div><span>ｘ</span><br><span>x</span></div>
155 <div><span>ｙ</span><br><span>y</span></div>
156 <div><span>ｚ</span><br><span>z</span></div>
157 <br>
158 <div><span>｛</span><br><span>{</span></div>
159 <div><span>｜</span><br><span>|</span></div>
160 <div><span>｝</span><br><span>}</span></div>
161 <div><span>～</span><br><span>~</span></div>
162
163 <div><span>｟</span><br><span>⦅</span></div> <!-- LEFT WHITE PARENTHESIS -->
164 <div><span>｠</span><br><span>⦆</span></div> <!-- RIGHT WHITE PARENTHESIS -->
165
166 <!-- HALFWIDTH KATAKANA -->
167 <br>
168 <div><span>。</span><br><span>｡</span></div>
169 <div><span>「</span><br><span>｢</span></div>
170 <div><span>」</span><br><span>｣</span></div>
171 <div><span>、</span><br><span>､</span></div>
172 <div><span>・</span><br><span>･</span></div>
173 <br>
174 <div><span>ヲ</span><br><span>ｦ</span></div>
175 <div><span>ァ</span><br><span>ｧ</span></div>
176 <div><span>ィ</span><br><span>ｨ</span></div>
177 <div><span>ゥ</span><br><span>ｩ</span></div>
178 <div><span>ェ</span><br><span>ｪ</span></div>
179 <div><span>ォ</span><br><span>ｫ</span></div>
180 <div><span>ャ</span><br><span>ｬ</span></div>
181 <div><span>ュ</span><br><span>ｭ</span></div>
182 <div><span>ョ</span><br><span>ｮ</span></div>
183 <div><span>ッ</span><br><span>ｯ</span></div>
184 <div><span>ー</span><br><span>ｰ</span></div>
185 <br>
186 <div><span>ア</span><br><span>ｱ</span></div>
187 <div><span>イ</span><br><span>ｲ</span></div>
188 <div><span>ウ</span><br><span>ｳ</span></div>
189 <div><span>エ</span><br><span>ｴ</span></div>
190 <div><span>オ</span><br><span>ｵ</span></div>
191 <div><span>カ</span><br><span>ｶ</span></div>
192 <div><span>キ</span><br><span>ｷ</span></div>
193 <div><span>ク</span><br><span>ｸ</span></div>
194 <div><span>ケ</span><br><span>ｹ</span></div>
195 <div><span>コ</span><br><span>ｺ</span></div>
196 <div><span>サ</span><br><span>ｻ</span></div>
197 <div><span>シ</span><br><span>ｼ</span></div>
198 <div><span>ス</span><br><span>ｽ</span></div>
199 <div><span>セ</span><br><span>ｾ</span></div>
200 <div><span>ソ</span><br><span>ｿ</span></div>
201 <div><span>タ</span><br><span>ﾀ</span></div>
202 <div><span>チ</span><br><span>ﾁ</span></div>
203 <div><span>ツ</span><br><span>ﾂ</span></div>
204 <div><span>テ</span><br><span>ﾃ</span></div>
205 <div><span>ト</span><br><span>ﾄ</span></div>
206 <div><span>ナ</span><br><span>ﾅ</span></div>
207 <div><span>ニ</span><br><span>ﾆ</span></div>
208 <div><span>ヌ</span><br><span>ﾇ</span></div>
209 <div><span>ネ</span><br><span>ﾈ</span></div>
210 <div><span>ノ</span><br><span>ﾉ</span></div>
211 <div><span>ハ</span><br><span>ﾊ</span></div>
212 <div><span>ヒ</span><br><span>ﾋ</span></div>
213 <div><span>フ</span><br><span>ﾌ</span></div>
214 <div><span>ヘ</span><br><span>ﾍ</span></div>
215 <div><span>ホ</span><br><span>ﾎ</span></div>
216 <div><span>マ</span><br><span>ﾏ</span></div>
217 <div><span>ミ</span><br><span>ﾐ</span></div>
218 <div><span>ム</span><br><span>ﾑ</span></div>
219 <div><span>メ</span><br><span>ﾒ</span></div>
220 <div><span>モ</span><br><span>ﾓ</span></div>
221 <div><span>ヤ</span><br><span>ﾔ</span></div>
222 <div><span>ユ</span><br><span>ﾕ</span></div>
223 <div><span>ヨ</span><br><span>ﾖ</span></div>
224 <div><span>ラ</span><br><span>ﾗ</span></div>
225 <div><span>リ</span><br><span>ﾘ</span></div>
226 <div><span>ル</span><br><span>ﾙ</span></div>
227 <div><span>レ</span><br><span>ﾚ</span></div>
228 <div><span>ロ</span><br><span>ﾛ</span></div>
229 <div><span>ワ</span><br><span>ﾜ</span></div>
230 <div><span>ン</span><br><span>ﾝ</span></div>
231 <br>
232 <div><span>゛</span><br><span>ﾞ</span></div>
233 <div><span>゜</span><br><span>ﾟ</span></div>
234
235 <!-- HALFWIDTH HANGUL -->
236 <br>
237 <div>[<span>ᅟ</span>]<br>[<span>ﾠ</span>]</div> <!-- HANGUL FILLER -->
238 <div><span>ᆨ</span><br><span>ﾡ</span></div> <!-- HANGUL LETTER KIYEOK -->
239 <div><span>ᆩ</span><br><span>ﾢ</span></div> <!-- HANGUL LETTER SSANGKIYEOK -->
240 <div><span>ᆪ</span><br><span>ﾣ</span></div> <!-- HANGUL LETTER KIYEOK-SIOS -->
241 <div><span>ᆫ</span><br><span>ﾤ</span></div> <!-- HANGUL LETTER NIEUN -->
242 <div><span>ᆬ</span><br><span>ﾥ</span></div> <!-- HANGUL LETTER NIEUN-CIEUC -->
243 <div><span>ᆭ</span><br><span>ﾦ</span></div> <!-- HANGUL LETTER NIEUN-HIEUH -->
244 <div><span>ᆮ</span><br><span>ﾧ</span></div> <!-- HANGUL LETTER TIKEUT -->
245 <div><span>ᄄ</span><br><span>ﾨ</span></div> <!-- HANGUL LETTER SSANGTIKEUT -->
246 <div><span>ᆯ</span><br><span>ﾩ</span></div> <!-- HANGUL LETTER RIEUL -->
247 <div><span>ᆰ</span><br><span>ﾪ</span></div> <!-- HANGUL LETTER RIEUL-KIYEOK -->
248 <div><span>ᆱ</span><br><span>ﾫ</span></div> <!-- HANGUL LETTER RIEUL-MIEUM -->
249 <div><span>ᆲ</span><br><span>ﾬ</span></div> <!-- HANGUL LETTER RIEUL-PIEUP -->
250 <div><span>ᆳ</span><br><span>ﾭ</span></div> <!-- HANGUL LETTER RIEUL-SIOS -->
251 <div><span>ᆴ</span><br><span>ﾮ</span></div> <!-- HANGUL LETTER RIEUL-THIEUTH -->
252 <div><span>ᆵ</span><br><span>ﾯ</span></div> <!-- HANGUL LETTER RIEUL-PHIEUPH -->
253 <div><span>ᄚ</span><br><span>ﾰ</span></div> <!-- HANGUL LETTER RIEUL-HIEUH -->
254 <div><span>ᄆ</span><br><span>ﾱ</span></div> <!-- HANGUL LETTER MIEUM -->
255 <div><span>ᄇ</span><br><span>ﾲ</span></div> <!-- HANGUL LETTER PIEUP -->
256 <div><span>ᄈ</span><br><span>ﾳ</span></div> <!-- HANGUL LETTER SSANGPIEUP -->
257 <div><span>ᆹ</span><br><span>ﾴ</span></div> <!-- HANGUL LETTER PIEUP-SIOS -->
258 <div><span>ᄉ</span><br><span>ﾵ</span></div> <!-- HANGUL LETTER SIOS -->
259 <div><span>ᆻ</span><br><span>ﾶ</span></div> <!-- HANGUL LETTER SSANGSIOS -->
260 <div><span>ᄋ</span><br><span>ﾷ</span></div> <!-- HANGUL LETTER IEUNG -->
261 <div><span>ᆽ</span><br><span>ﾸ</span></div> <!-- HANGUL LETTER CIEUC -->
262 <div><span>ᄍ</span><br><span>ﾹ</span></div> <!-- HANGUL LETTER SSANGCIEUC -->
263 <div><span>ᆾ</span><br><span>ﾺ</span></div> <!-- HANGUL LETTER CHIEUCH -->
264 <div><span>ᄏ</span><br><span>ﾻ</span></div> <!-- HANGUL LETTER KHIEUKH -->
265 <div><span>ᇀ</span><br><span>ﾼ</span></div> <!-- HANGUL LETTER THIEUTH -->
266 <div><span>ᄑ</span><br><span>ﾽ</span></div> <!-- HANGUL LETTER PHIEUPH -->
267 <div><span>ᇂ</span><br><span>ﾾ</span></div> <!-- HANGUL LETTER HIEUH -->
268 <br>
269 <div><span>ᅡ</span><br><span>ￂ</span></div> <!-- HANGUL LETTER A -->
270 <div><span>ᅢ</span><br><span>ￃ</span></div> <!-- HANGUL LETTER AE -->
271 <div><span>ᅣ</span><br><span>ￄ</span></div> <!-- HANGUL LETTER YA -->
272 <div><span>ᅤ</span><br><span>ￅ</span></div> <!-- HANGUL LETTER YAE -->
273 <div><span>ᅥ</span><br><span>ￆ</span></div> <!-- HANGUL LETTER EO -->
274 <div><span>ᅦ</span><br><span>ￇ</span></div> <!-- HANGUL LETTER E -->
275
276 <div><span>ᅧ</span><br><span>ￊ</span></div> <!-- HANGUL LETTER YEO -->
277 <div><span>ᅨ</span><br><span>ￋ</span></div> <!-- HANGUL LETTER YE -->
278 <div><span>ᅩ</span><br><span>ￌ</span></div> <!-- HANGUL LETTER O -->
279 <div><span>ᅪ</span><br><span>ￍ</span></div> <!-- HANGUL LETTER WA -->
280 <div><span>ᅫ</span><br><span>ￎ</span></div> <!-- HANGUL LETTER WAE -->
281 <div><span>ᅬ</span><br><span>ￏ</span></div> <!-- HANGUL LETTER OE -->
282
283 <div><span>ᅭ</span><br><span>ￒ</span></div> <!-- HANGUL LETTER YO -->
284 <div><span>ᅮ</span><br><span>ￓ</span></div> <!-- HANGUL LETTER U -->
285 <div><span>ᅯ</span><br><span>ￔ</span></div> <!-- HANGUL LETTER WEO -->
286 <div><span>ᅰ</span><br><span>ￕ</span></div> <!-- HANGUL LETTER WE -->
287 <div><span>ᅱ</span><br><span>ￖ</span></div> <!-- HANGUL LETTER WI -->
288 <div><span>ᅲ</span><br><span>ￗ</span></div> <!-- HANGUL LETTER YU -->
289
290 <div><span>ᅳ</span><br><span>ￚ</span></div> <!-- HANGUL LETTER EU -->
291 <div><span>ᅴ</span><br><span>ￛ</span></div> <!-- HANGUL LETTER YI -->
292 <div><span>ᅵ</span><br><span>ￜ</span></div> <!-- HANGUL LETTER I -->
293
294 <!-- FULLWIDTH SIGN -->
295 <br>
296 <div><span>￠</span><br><span>¢</span></div> <!-- CENT SIGN -->
297 <div><span>￡</span><br><span>£</span></div> <!-- POUND SIGN -->
298 <div><span>￢</span><br><span>¬</span></div> <!-- NOT SIGN -->
299 <div><span>￣</span><br><span>¯</span></div> <!-- MACRON -->
300 <div><span>￤</span><br><span>¦</span></div> <!-- BROKEN BAR -->
301 <div><span>￥</span><br><span>¥</span></div> <!-- YEN SIGN -->
302 <div><span>￦</span><br><span>₩</span></div> <!-- WON SIGN -->
303
304 <!-- HALFWIDTH SIGN -->
305 <br>
306 <div><span>｜</span><br><span>￨</span></div> <!-- FORMS LIGHT VERTICAL -->
307 <div><span>←</span><br><span>￩</span></div> <!-- LEFTWARDS ARROW -->
308 <div><span>↑</span><br><span>￪</span></div> <!-- UPWARDS ARROW -->
309 <div><span>→</span><br><span>￫</span></div> <!-- RIGHTWARDS ARROW -->
310 <div><span>↓</span><br><span>￬</span></div> <!-- DOWNWARDS ARROW -->
311 <div><span>■</span><br><span>￭</span></div> <!-- BLACK SQUARE -->
312 <div><span>○</span><br><span>￮</span></div> <!-- WHITE CIRCLE -->
313
314 <!-- HALFWIDTH LATIN -->
315 <br>
316 <div><span>Ａ</span><br><span>Ａ</span></div>
317 <div><span>Ｂ</span><br><span>Ｂ</span></div>
318 <div><span>Ｃ</span><br><span>Ｃ</span></div>
319 <br>
320 <div><span>ａ</span><br><span>ａ</span></div>
321 <div><span>ｂ</span><br><span>ｂ</span></div>
322 <div><span>ｃ</span><br><span>ｃ</span></div>
323
324 <!-- FULLWIDTH KANA -->
325 <br>
326 <div><span>あ</span><br><span>あ</span></div>
327 <div><span>い</span><br><span>い</span></div>
328 <div><span>う</span><br><span>う</span></div>
329 <div><span>え</span><br><span>え</span></div>
330 <div><span>お</span><br><span>お</span></div>
331 <br>
332 <div><span>ア</span><br><span>ア</span></div>
333 <div><span>イ</span><br><span>イ</span></div>
334 <div><span>ウ</span><br><span>ウ</span></div>
335 <div><span>エ</span><br><span>エ</span></div>
336 <div><span>オ</span><br><span>オ</span></div>
337 </div>
338 <p id="fontChange" style="display: none;">
339 If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
340 <button type="button" onclick="setFontFamily()">
341 Apply
342 </button>
343 </p>
344 <script type="text/javascript">
345 if (document.getElementById) {
346 document.getElementById('fontChange').style.display = 'block'
347 }
348 </script>
349 </body>
350 </html>