text-orientation-sideways-vlr-100.html (2515B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Writing Modes Test: writing-mode: vertical-lr; text-orientation: sideways.</title> 4 <link rel="match" href="text-orientation-sideways-vlr-100-ref.html"> 5 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation"> 6 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> 7 <style> 8 @font-face { 9 font-family: "orientation"; 10 src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf"); 11 } 12 html { 13 writing-mode: vertical-lr; 14 } 15 .test { 16 font: 20px/1 "orientation"; 17 height: 17em; 18 text-orientation: sideways; 19 text-autospace: no-autospace; 20 } 21 .line { 22 white-space: pre; 23 } 24 </style> 25 <body> 26 <div id="container"> 27 <div>U+0020-007E<div class="test"> 28 <div class="line"> !"#$%&'()*+,-./0123456789:;=?@A</div> 29 <div class="line">BCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`a</div> 30 <div class="line">bcdefghijklmnopqrstuvwxyz{|}~</div> 31 </div></div> 32 <div>U+3000-30FF<div class="test"> 33 <div class="line"> 、。〃〄々〆〇〈〉《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟</div> 34 <div class="line">〠〡〢〣〤〥〦〧〨〩〰〱〲〳〴〵〶〷〸〹〺〻〼〽〾〿ぁあぃいぅう</div> 35 <div class="line">ぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづて</div> 36 <div class="line">でとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆ</div> 37 <div class="line">ょよらりるれろゎわゐゑをんゔゕゖ゛゜ゝゞゟ゠ァアィイゥウェエォオ</div> 38 <div class="line">カガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナ</div> 39 <div class="line">ニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリ</div> 40 <div class="line">ルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽヾヿ</div> 41 </div></div> 42 <div>U+4E00-4E1F<div class="test"> 43 <div class="line">一丁丂七丄丅丆万丈三上下丌不与丏丐丑丒专且丕世丗丘丙业丛东丝丞丟</div> 44 </div></div> 45 <div>U+FF01-FF60<div class="test"> 46 <div class="line">！＂＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠</div> 47 <div class="line">ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀</div> 48 <div class="line">ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～｟｠</div> 49 </div></div> 50 </div> 51 </body>