<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS Test: text-transform - fullwidth - basic cases</title> <link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp"> <link rel="reviewer" title="Koji Ishii" href="mailto:kojiishi@gluesoft.co.jp"> <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"> <link rel="match" href="reference/text-transform-fullwidth-001-ref.htm"> <meta name="flags" content=""> <meta name="assert" content="The UA should transform halfwidth character to fullwidth character when text-transform is set to fullwidth."> <style type="text/css"> .test span { text-transform: full-width; } /* the CSS below is not part of the test */ span { background-color: cyan; } .test { color: Blue; font-size: 200%; line-height: 1.2em; } .test div { display: inline-block; margin-bottom: 1em; margin-top: 1em; text-align: center; white-space: nowrap; width: 5em; } </style> <script type="text/javascript"> // // Set Font Family to 'IPAMincho' function setFontFamily () { var fontName = 'IPAMincho'; var divs = document.getElementsByTagName('div'); var i = 0; var div; while (i < divs.length) { div = divs.item(i); if (div.className == 'test') { div.style.fontFamily = fontName; } i++; } } // </script> </head> <body> <p> Test passes if the upper character in each pair matches the lower one in both shape <strong>and size</strong>. </p> <div class="test"> <!-- FULLWIDTH LATIN --> <div>[<span> </span>]<br>[<span> </span>]</div> <div><span>!</span><br><span>!</span></div> <div><span>”</span><br><span>"</span></div> <div><span>#</span><br><span>#</span></div> <div><span>$</span><br><span>$</span></div> <div><span>%</span><br><span>%</span></div> <div><span>&</span><br><span>&</span></div> <div><span>’</span><br><span>'</span></div> <div><span>(</span><br><span>(</span></div> <div><span>)</span><br><span>)</span></div> <div><span>*</span><br><span>*</span></div> <div><span>+</span><br><span>+</span></div> <div><span>,</span><br><span>,</span></div> <div><span>-</span><br><span>-</span></div> <div><span>.</span><br><span>.</span></div> <div><span>/</span><br><span>/</span></div> <br> <div><span>0</span><br><span>0</span></div> <div><span>1</span><br><span>1</span></div> <div><span>2</span><br><span>2</span></div> <div><span>3</span><br><span>3</span></div> <div><span>4</span><br><span>4</span></div> <div><span>5</span><br><span>5</span></div> <div><span>6</span><br><span>6</span></div> <div><span>7</span><br><span>7</span></div> <div><span>8</span><br><span>8</span></div> <div><span>9</span><br><span>9</span></div> <br> <div><span>:</span><br><span>:</span></div> <div><span>;</span><br><span>;</span></div> <div><span><</span><br><span><</span></div> <div><span>=</span><br><span>=</span></div> <div><span>></span><br><span>></span></div> <div><span>?</span><br><span>?</span></div> <div><span>@</span><br><span>@</span></div> <br> <div><span>A</span><br><span>A</span></div> <div><span>B</span><br><span>B</span></div> <div><span>C</span><br><span>C</span></div> <div><span>D</span><br><span>D</span></div> <div><span>E</span><br><span>E</span></div> <div><span>F</span><br><span>F</span></div> <div><span>G</span><br><span>G</span></div> <div><span>H</span><br><span>H</span></div> <div><span>I</span><br><span>I</span></div> <div><span>J</span><br><span>J</span></div> <div><span>K</span><br><span>K</span></div> <div><span>L</span><br><span>L</span></div> <div><span>M</span><br><span>M</span></div> <div><span>N</span><br><span>N</span></div> <div><span>O</span><br><span>O</span></div> <div><span>P</span><br><span>P</span></div> <div><span>Q</span><br><span>Q</span></div> <div><span>R</span><br><span>R</span></div> <div><span>S</span><br><span>S</span></div> <div><span>T</span><br><span>T</span></div> <div><span>U</span><br><span>U</span></div> <div><span>V</span><br><span>V</span></div> <div><span>W</span><br><span>W</span></div> <div><span>X</span><br><span>X</span></div> <div><span>Y</span><br><span>Y</span></div> <div><span>Z</span><br><span>Z</span></div> <br> <div><span>[</span><br><span>[</span></div> <div><span>\</span><br><span>\</span></div> <div><span>]</span><br><span>]</span></div> <div><span>^</span><br><span>^</span></div> <div><span>_</span><br><span>_</span></div> <div><span>`</span><br><span>`</span></div> <br> <div><span>a</span><br><span>a</span></div> <div><span>b</span><br><span>b</span></div> <div><span>c</span><br><span>c</span></div> <div><span>d</span><br><span>d</span></div> <div><span>e</span><br><span>e</span></div> <div><span>f</span><br><span>f</span></div> <div><span>g</span><br><span>g</span></div> <div><span>h</span><br><span>h</span></div> <div><span>i</span><br><span>i</span></div> <div><span>j</span><br><span>j</span></div> <div><span>k</span><br><span>k</span></div> <div><span>l</span><br><span>l</span></div> <div><span>m</span><br><span>m</span></div> <div><span>n</span><br><span>n</span></div> <div><span>o</span><br><span>o</span></div> <div><span>p</span><br><span>p</span></div> <div><span>q</span><br><span>q</span></div> <div><span>r</span><br><span>r</span></div> <div><span>s</span><br><span>s</span></div> <div><span>t</span><br><span>t</span></div> <div><span>u</span><br><span>u</span></div> <div><span>v</span><br><span>v</span></div> <div><span>w</span><br><span>w</span></div> <div><span>x</span><br><span>x</span></div> <div><span>y</span><br><span>y</span></div> <div><span>z</span><br><span>z</span></div> <br> <div><span>{</span><br><span>{</span></div> <div><span>|</span><br><span>|</span></div> <div><span>}</span><br><span>}</span></div> <div><span>~</span><br><span>~</span></div> <div><span>⦅</span><br><span>⦅</span></div> <!-- LEFT WHITE PARENTHESIS --> <div><span>⦆</span><br><span>⦆</span></div> <!-- RIGHT WHITE PARENTHESIS --> <!-- HALFWIDTH KATAKANA --> <br> <div><span>。</span><br><span>。</span></div> <div><span>「</span><br><span>「</span></div> <div><span>」</span><br><span>」</span></div> <div><span>、</span><br><span>、</span></div> <div><span>・</span><br><span>・</span></div> <br> <div><span>ヲ</span><br><span>ヲ</span></div> <div><span>ァ</span><br><span>ァ</span></div> <div><span>ィ</span><br><span>ィ</span></div> <div><span>ゥ</span><br><span>ゥ</span></div> <div><span>ェ</span><br><span>ェ</span></div> <div><span>ォ</span><br><span>ォ</span></div> <div><span>ャ</span><br><span>ャ</span></div> <div><span>ュ</span><br><span>ュ</span></div> <div><span>ョ</span><br><span>ョ</span></div> <div><span>ッ</span><br><span>ッ</span></div> <div><span>ー</span><br><span>ー</span></div> <br> <div><span>ア</span><br><span>ア</span></div> <div><span>イ</span><br><span>イ</span></div> <div><span>ウ</span><br><span>ウ</span></div> <div><span>エ</span><br><span>エ</span></div> <div><span>オ</span><br><span>オ</span></div> <div><span>カ</span><br><span>カ</span></div> <div><span>キ</span><br><span>キ</span></div> <div><span>ク</span><br><span>ク</span></div> <div><span>ケ</span><br><span>ケ</span></div> <div><span>コ</span><br><span>コ</span></div> <div><span>サ</span><br><span>サ</span></div> <div><span>シ</span><br><span>シ</span></div> <div><span>ス</span><br><span>ス</span></div> <div><span>セ</span><br><span>セ</span></div> <div><span>ソ</span><br><span>ソ</span></div> <div><span>タ</span><br><span>タ</span></div> <div><span>チ</span><br><span>チ</span></div> <div><span>ツ</span><br><span>ツ</span></div> <div><span>テ</span><br><span>テ</span></div> <div><span>ト</span><br><span>ト</span></div> <div><span>ナ</span><br><span>ナ</span></div> <div><span>ニ</span><br><span>ニ</span></div> <div><span>ヌ</span><br><span>ヌ</span></div> <div><span>ネ</span><br><span>ネ</span></div> <div><span>ノ</span><br><span>ノ</span></div> <div><span>ハ</span><br><span>ハ</span></div> <div><span>ヒ</span><br><span>ヒ</span></div> <div><span>フ</span><br><span>フ</span></div> <div><span>ヘ</span><br><span>ヘ</span></div> <div><span>ホ</span><br><span>ホ</span></div> <div><span>マ</span><br><span>マ</span></div> <div><span>ミ</span><br><span>ミ</span></div> <div><span>ム</span><br><span>ム</span></div> <div><span>メ</span><br><span>メ</span></div> <div><span>モ</span><br><span>モ</span></div> <div><span>ヤ</span><br><span>ヤ</span></div> <div><span>ユ</span><br><span>ユ</span></div> <div><span>ヨ</span><br><span>ヨ</span></div> <div><span>ラ</span><br><span>ラ</span></div> <div><span>リ</span><br><span>リ</span></div> <div><span>ル</span><br><span>ル</span></div> <div><span>レ</span><br><span>レ</span></div> <div><span>ロ</span><br><span>ロ</span></div> <div><span>ワ</span><br><span>ワ</span></div> <div><span>ン</span><br><span>ン</span></div> <br> <div><span>゛</span><br><span>゙</span></div> <div><span>゜</span><br><span>゚</span></div> <!-- HALFWIDTH HANGUL --> <br> <div>[<span>ᅟ</span>]<br>[<span>ᅠ</span>]</div> <!-- HANGUL FILLER --> <div><span>ᆨ</span><br><span>ᄀ</span></div> <!-- HANGUL LETTER KIYEOK --> <div><span>ᆩ</span><br><span>ᄁ</span></div> <!-- HANGUL LETTER SSANGKIYEOK --> <div><span>ᆪ</span><br><span>ᆪ</span></div> <!-- HANGUL LETTER KIYEOK-SIOS --> <div><span>ᆫ</span><br><span>ᄂ</span></div> <!-- HANGUL LETTER NIEUN --> <div><span>ᆬ</span><br><span>ᆬ</span></div> <!-- HANGUL LETTER NIEUN-CIEUC --> <div><span>ᆭ</span><br><span>ᆭ</span></div> <!-- HANGUL LETTER NIEUN-HIEUH --> <div><span>ᆮ</span><br><span>ᄃ</span></div> <!-- HANGUL LETTER TIKEUT --> <div><span>ᄄ</span><br><span>ᄄ</span></div> <!-- HANGUL LETTER SSANGTIKEUT --> <div><span>ᆯ</span><br><span>ᄅ</span></div> <!-- HANGUL LETTER RIEUL --> <div><span>ᆰ</span><br><span>ᆰ</span></div> <!-- HANGUL LETTER RIEUL-KIYEOK --> <div><span>ᆱ</span><br><span>ᆱ</span></div> <!-- HANGUL LETTER RIEUL-MIEUM --> <div><span>ᆲ</span><br><span>ᆲ</span></div> <!-- HANGUL LETTER RIEUL-PIEUP --> <div><span>ᆳ</span><br><span>ᆳ</span></div> <!-- HANGUL LETTER RIEUL-SIOS --> <div><span>ᆴ</span><br><span>ᆴ</span></div> <!-- HANGUL LETTER RIEUL-THIEUTH --> <div><span>ᆵ</span><br><span>ᆵ</span></div> <!-- HANGUL LETTER RIEUL-PHIEUPH --> <div><span>ᄚ</span><br><span>ᄚ</span></div> <!-- HANGUL LETTER RIEUL-HIEUH --> <div><span>ᄆ</span><br><span>ᄆ</span></div> <!-- HANGUL LETTER MIEUM --> <div><span>ᄇ</span><br><span>ᄇ</span></div> <!-- HANGUL LETTER PIEUP --> <div><span>ᄈ</span><br><span>ᄈ</span></div> <!-- HANGUL LETTER SSANGPIEUP --> <div><span>ᆹ</span><br><span>ᄡ</span></div> <!-- HANGUL LETTER PIEUP-SIOS --> <div><span>ᄉ</span><br><span>ᄉ</span></div> <!-- HANGUL LETTER SIOS --> <div><span>ᆻ</span><br><span>ᄊ</span></div> <!-- HANGUL LETTER SSANGSIOS --> <div><span>ᄋ</span><br><span>ᄋ</span></div> <!-- HANGUL LETTER IEUNG --> <div><span>ᆽ</span><br><span>ᄌ</span></div> <!-- HANGUL LETTER CIEUC --> <div><span>ᄍ</span><br><span>ᄍ</span></div> <!-- HANGUL LETTER SSANGCIEUC --> <div><span>ᆾ</span><br><span>ᄎ</span></div> <!-- HANGUL LETTER CHIEUCH --> <div><span>ᄏ</span><br><span>ᄏ</span></div> <!-- HANGUL LETTER KHIEUKH --> <div><span>ᇀ</span><br><span>ᄐ</span></div> <!-- HANGUL LETTER THIEUTH --> <div><span>ᄑ</span><br><span>ᄑ</span></div> <!-- HANGUL LETTER PHIEUPH --> <div><span>ᇂ</span><br><span>ᄒ</span></div> <!-- HANGUL LETTER HIEUH --> <br> <div><span>ᅡ</span><br><span>ᅡ</span></div> <!-- HANGUL LETTER A --> <div><span>ᅢ</span><br><span>ᅢ</span></div> <!-- HANGUL LETTER AE --> <div><span>ᅣ</span><br><span>ᅣ</span></div> <!-- HANGUL LETTER YA --> <div><span>ᅤ</span><br><span>ᅤ</span></div> <!-- HANGUL LETTER YAE --> <div><span>ᅥ</span><br><span>ᅥ</span></div> <!-- HANGUL LETTER EO --> <div><span>ᅦ</span><br><span>ᅦ</span></div> <!-- HANGUL LETTER E --> <div><span>ᅧ</span><br><span>ᅧ</span></div> <!-- HANGUL LETTER YEO --> <div><span>ᅨ</span><br><span>ᅨ</span></div> <!-- HANGUL LETTER YE --> <div><span>ᅩ</span><br><span>ᅩ</span></div> <!-- HANGUL LETTER O --> <div><span>ᅪ</span><br><span>ᅪ</span></div> <!-- HANGUL LETTER WA --> <div><span>ᅫ</span><br><span>ᅫ</span></div> <!-- HANGUL LETTER WAE --> <div><span>ᅬ</span><br><span>ᅬ</span></div> <!-- HANGUL LETTER OE --> <div><span>ᅭ</span><br><span>ᅭ</span></div> <!-- HANGUL LETTER YO --> <div><span>ᅮ</span><br><span>ᅮ</span></div> <!-- HANGUL LETTER U --> <div><span>ᅯ</span><br><span>ᅯ</span></div> <!-- HANGUL LETTER WEO --> <div><span>ᅰ</span><br><span>ᅰ</span></div> <!-- HANGUL LETTER WE --> <div><span>ᅱ</span><br><span>ᅱ</span></div> <!-- HANGUL LETTER WI --> <div><span>ᅲ</span><br><span>ᅲ</span></div> <!-- HANGUL LETTER YU --> <div><span>ᅳ</span><br><span>ᅳ</span></div> <!-- HANGUL LETTER EU --> <div><span>ᅴ</span><br><span>ᅴ</span></div> <!-- HANGUL LETTER YI --> <div><span>ᅵ</span><br><span>ᅵ</span></div> <!-- HANGUL LETTER I --> <!-- FULLWIDTH SIGN --> <br> <div><span>¢</span><br><span>¢</span></div> <!-- CENT SIGN --> <div><span>£</span><br><span>£</span></div> <!-- POUND SIGN --> <div><span>¬</span><br><span>¬</span></div> <!-- NOT SIGN --> <div><span> ̄</span><br><span>¯</span></div> <!-- MACRON --> <div><span>¦</span><br><span>¦</span></div> <!-- BROKEN BAR --> <div><span>¥</span><br><span>¥</span></div> <!-- YEN SIGN --> <div><span>₩</span><br><span>₩</span></div> <!-- WON SIGN --> <!-- HALFWIDTH SIGN --> <br> <div><span>|</span><br><span>│</span></div> <!-- FORMS LIGHT VERTICAL --> <div><span>←</span><br><span>←</span></div> <!-- LEFTWARDS ARROW --> <div><span>↑</span><br><span>↑</span></div> <!-- UPWARDS ARROW --> <div><span>→</span><br><span>→</span></div> <!-- RIGHTWARDS ARROW --> <div><span>↓</span><br><span>↓</span></div> <!-- DOWNWARDS ARROW --> <div><span>■</span><br><span>■</span></div> <!-- BLACK SQUARE --> <div><span>○</span><br><span>○</span></div> <!-- WHITE CIRCLE --> <!-- HALFWIDTH LATIN --> <br> <div><span>A</span><br><span>A</span></div> <div><span>B</span><br><span>B</span></div> <div><span>C</span><br><span>C</span></div> <br> <div><span>a</span><br><span>a</span></div> <div><span>b</span><br><span>b</span></div> <div><span>c</span><br><span>c</span></div> <!-- FULLWIDTH KANA --> <br> <div><span>あ</span><br><span>あ</span></div> <div><span>い</span><br><span>い</span></div> <div><span>う</span><br><span>う</span></div> <div><span>え</span><br><span>え</span></div> <div><span>お</span><br><span>お</span></div> <br> <div><span>ア</span><br><span>ア</span></div> <div><span>イ</span><br><span>イ</span></div> <div><span>ウ</span><br><span>ウ</span></div> <div><span>エ</span><br><span>エ</span></div> <div><span>オ</span><br><span>オ</span></div> </div> <p id="fontChange" style="display: none;"> 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. <button type="button" onclick="setFontFamily()"> Apply </button> </p> <script type="text/javascript"> if (document.getElementById) { document.getElementById('fontChange').style.display = 'block' } </script> </body> </html>