1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Writing Modes Test: Test orientation of characters where vo=U (#4/6, 2048 code points in U+1338C-1F0E1).</title>
<meta name="timeout" content="long">
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
<meta name="assert" content="Test orientation of characters where vo=U (#4/6, 2048 code points in U+1338C-1F0E1)">
<meta name="flags" content="dom">
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@font-face {
font-family: "orientation";
src: url("/fonts/adobe-fonts/CSSHWOrientationTest.otf");
}
.test {
font: 16px/1 "orientation";
height: 17em;
writing-mode: vertical-rl;
}
.line {
white-space: pre;
}
.U {
text-orientation: upright;
}
.R {
text-orientation: sideways;
}
#details {
margin: 1em .5em;
}
summary {
font-size: 1.2em;
font-weight: bold;
margin-top: .5em;
}
</style>
<div id="log"></div>
<div id="details"></div>
<div id="container">
<div data-vo="U" class="test">
<div data-block="Egyptian">
<div class="line">๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ</div>
<div class="line">๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ</div>
<div class="line">๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ</div>
<div class="line">๐ฌ๐ญ๐ฎ</div>
</div>
<div data-block="Anatolian">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐</div>
</div>
<div data-block="Ideographic">
<div class="line">๐ฟ </div>
</div>
<div data-block="Tangut">
<div class="line">๐๐ฌ๐ ๐ซฒ</div>
</div>
<div data-block="Kana">
<div class="line">๐๐</div>
</div>
<div data-block="Byzantine">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต</div>
</div>
<div data-block="Musical">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐
๐
</div>
<div class="line">๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
ก</div>
<div class="line">๐
ข๐
ฃ๐
ค๐
ช๐
ซ๐
ฌ๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ</div>
<div class="line">๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง</div>
<div class="line">๐จ</div>
</div>
<div data-block="Tai">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
</div>
<div data-block="Counting">
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ</div>
</div>
<div data-block="Sutton">
<div class="line">๐ ๐ ๐ ๐ ๐ ๐
๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ </div>
<div class="line">๐ ๐ ก๐ ข๐ ฃ๐ ค๐ ฅ๐ ฆ๐ ง๐ จ๐ ฉ๐ ช๐ ซ๐ ฌ๐ ญ๐ ฎ๐ ฏ๐ ฐ๐ ฑ๐ ฒ๐ ณ๐ ด๐ ต๐ ถ๐ ท๐ ธ๐ น๐ บ๐ ป๐ ผ๐ ฝ๐ พ๐ ฟ</div>
<div class="line">๐ก๐ก๐ก๐ก๐ก๐ก
๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก๐ก</div>
<div class="line">๐ก ๐กก๐กข๐กฃ๐กค๐กฅ๐กฆ๐กง๐กจ๐กฉ๐กช๐กซ๐กฌ๐กญ๐กฎ๐กฏ๐กฐ๐กฑ๐กฒ๐กณ๐กด๐กต๐กถ๐กท๐กธ๐กน๐กบ๐กป๐กผ๐กฝ๐กพ๐กฟ</div>
<div class="line">๐ข๐ข๐ข๐ข๐ข๐ข
๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข๐ข</div>
<div class="line">๐ข ๐ขก๐ขข๐ขฃ๐ขค๐ขฅ๐ขฆ๐ขง๐ขจ๐ขฉ๐ขช๐ขซ๐ขฌ๐ขญ๐ขฎ๐ขฏ๐ขฐ๐ขฑ๐ขฒ๐ขณ๐ขด๐ขต๐ขถ๐ขท๐ขธ๐ขน๐ขบ๐ขป๐ขผ๐ขฝ๐ขพ๐ขฟ</div>
<div class="line">๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ
๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ</div>
<div class="line">๐ฃ ๐ฃก๐ฃข๐ฃฃ๐ฃค๐ฃฅ๐ฃฆ๐ฃง๐ฃจ๐ฃฉ๐ฃช๐ฃซ๐ฃฌ๐ฃญ๐ฃฎ๐ฃฏ๐ฃฐ๐ฃฑ๐ฃฒ๐ฃณ๐ฃด๐ฃต๐ฃถ๐ฃท๐ฃธ๐ฃน๐ฃบ๐ฃป๐ฃผ๐ฃฝ๐ฃพ๐ฃฟ</div>
<div class="line">๐ค๐ค๐ค๐ค๐ค๐ค
๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค</div>
<div class="line">๐ค ๐คก๐คข๐คฃ๐คค๐คฅ๐คฆ๐คง๐คจ๐คฉ๐คช๐คซ๐คฌ๐คญ๐คฎ๐คฏ๐คฐ๐คฑ๐คฒ๐คณ๐คด๐คต๐คถ๐คท๐คธ๐คน๐คบ๐คป๐คผ๐คฝ๐คพ๐คฟ</div>
<div class="line">๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ
๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ</div>
<div class="line">๐ฅ ๐ฅก๐ฅข๐ฅฃ๐ฅค๐ฅฅ๐ฅฆ๐ฅง๐ฅจ๐ฅฉ๐ฅช๐ฅซ๐ฅฌ๐ฅญ๐ฅฎ๐ฅฏ๐ฅฐ๐ฅฑ๐ฅฒ๐ฅณ๐ฅด๐ฅต๐ฅถ๐ฅท๐ฅธ๐ฅน๐ฅบ๐ฅป๐ฅผ๐ฅฝ๐ฅพ๐ฅฟ</div>
<div class="line">๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ
๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ๐ฆ</div>
<div class="line">๐ฆ ๐ฆก๐ฆข๐ฆฃ๐ฆค๐ฆฅ๐ฆฆ๐ฆง๐ฆจ๐ฆฉ๐ฆช๐ฆซ๐ฆฌ๐ฆญ๐ฆฎ๐ฆฏ๐ฆฐ๐ฆฑ๐ฆฒ๐ฆณ๐ฆด๐ฆต๐ฆถ๐ฆท๐ฆธ๐ฆน๐ฆบ๐ฆป๐ฆผ๐ฆฝ๐ฆพ๐ฆฟ</div>
<div class="line">๐ง๐ง๐ง๐ง๐ง๐ง
๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง</div>
<div class="line">๐ง ๐งก๐งข๐งฃ๐งค๐งฅ๐งฆ๐งง๐งจ๐งฉ๐งช๐งซ๐งฌ๐งญ๐งฎ๐งฏ๐งฐ๐งฑ๐งฒ๐งณ๐งด๐งต๐งถ๐งท๐งธ๐งน๐งบ๐งป๐งผ๐งฝ๐งพ๐งฟ</div>
<div class="line">๐จท๐จธ๐จน๐จบ๐ฉญ๐ฉฎ๐ฉฏ๐ฉฐ๐ฉฑ๐ฉฒ๐ฉณ๐ฉด๐ฉถ๐ฉท๐ฉธ๐ฉน๐ฉบ๐ฉป๐ฉผ๐ฉฝ๐ฉพ๐ฉฟ๐ช๐ช๐ช๐ช๐ช
๐ช๐ช๐ช๐ช๐ช</div>
<div class="line">๐ช</div>
</div>
<div data-block="Mahjong">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ</div>
</div>
<div data-block="Domino">
<div class="line">๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ</div>
<div class="line">๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐</div>
</div>
<div data-block="Playing">
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐</div>
<div class="line">๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก</div>
</div>
</div>
</div>
<script src="support/text-orientation.js"></script>
|