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 145 146 147 148 149 150 151 152 153 154 155
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#7/9, 2048 code points in U+11152-124FA).</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=R (#7/9, 2048 code points in U+11152-124FA)">
<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="R" class="test">
<div data-block="Mahajani">
<div class="line">๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
๐
ก๐
ข๐
ฃ๐
ค๐
ฅ๐
ฆ๐
ง๐
จ๐
ฉ๐
ช๐
ซ๐
ฌ๐
ญ๐
ฎ๐
ฏ๐
ฐ๐
ฑ</div>
<div class="line">๐
ฒ๐
ด๐
ต๐
ถ</div>
</div>
<div data-block="Sharada">
<div class="line">๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข</div>
<div class="line">๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐</div>
</div>
<div data-block="Sinhala">
<div class="line">๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด</div>
</div>
<div data-block="Khojki">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ </div>
<div class="line">๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ธ๐น๐บ๐ป๐ผ๐ฝ</div>
</div>
<div data-block="Multani">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ</div>
<div class="line">๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ</div>
</div>
<div data-block="Khudawadi">
<div class="line">๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น</div>
</div>
<div data-block="Grantha">
<div class="line">๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ</div>
<div class="line">๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฒ๐ณ๐ต๐ถ๐ท๐ธ๐น๐ฝ๐๐๐๐๐ ๐ก</div>
</div>
<div data-block="Newa">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐</div>
</div>
<div data-block="Tirhuta">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐๐
๐๐๐๐๐๐๐๐๐๐๐๐</div>
</div>
<div data-block="Modi">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
</div>
<div data-block="Mongolian">
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ</div>
</div>
<div data-block="Takri">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐๐๐๐๐๐
๐๐๐๐</div>
</div>
<div data-block="Ahom">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต</div>
<div class="line">๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
</div>
<div data-block="Warang">
<div class="line">๐ข ๐ขก๐ขข๐ขฃ๐ขค๐ขฅ๐ขฆ๐ขง๐ขจ๐ขฉ๐ขช๐ขซ๐ขฌ๐ขญ๐ขฎ๐ขฏ๐ขฐ๐ขฑ๐ขฒ๐ขณ๐ขด๐ขต๐ขถ๐ขท๐ขธ๐ขน๐ขบ๐ขป๐ขผ๐ขฝ๐ขพ๐ขฟ</div>
<div class="line">๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ
๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ๐ฃ</div>
<div class="line">๐ฃ ๐ฃก๐ฃข๐ฃฃ๐ฃค๐ฃฅ๐ฃฆ๐ฃง๐ฃจ๐ฃฉ๐ฃช๐ฃซ๐ฃฌ๐ฃญ๐ฃฎ๐ฃฏ๐ฃฐ๐ฃฑ๐ฃฒ๐ฃฟ</div>
</div>
<div data-block="Pau">
<div class="line">๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ
๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ๐ซ</div>
<div class="line">๐ซ ๐ซก๐ซข๐ซฃ๐ซค๐ซฅ๐ซฆ๐ซง๐ซจ๐ซฉ๐ซช๐ซซ๐ซฌ๐ซญ๐ซฎ๐ซฏ๐ซฐ๐ซฑ๐ซฒ๐ซณ๐ซด๐ซต๐ซถ๐ซท๐ซธ</div>
</div>
<div data-block="Bhaiksuki">
<div class="line">๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ
๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ๐ฐ </div>
<div class="line">๐ฐก๐ฐข๐ฐฃ๐ฐค๐ฐฅ๐ฐฆ๐ฐง๐ฐจ๐ฐฉ๐ฐช๐ฐซ๐ฐฌ๐ฐญ๐ฐฎ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ
๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ</div>
<div class="line">๐ฑ๐ฑ๐ฑ๐ฑ๐ฑ ๐ฑก๐ฑข๐ฑฃ๐ฑค๐ฑฅ๐ฑฆ๐ฑง๐ฑจ๐ฑฉ๐ฑช๐ฑซ๐ฑฌ</div>
</div>
<div data-block="Marchen">
<div class="line">๐ฑฐ๐ฑฑ๐ฑฒ๐ฑณ๐ฑด๐ฑต๐ฑถ๐ฑท๐ฑธ๐ฑน๐ฑบ๐ฑป๐ฑผ๐ฑฝ๐ฑพ๐ฑฟ๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ
๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ๐ฒ</div>
</div>
<div data-block="Cuneiform">
<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 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="Early">
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
<div class="line">๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ</div>
</div>
</div>
</div>
<script src="support/text-orientation.js"></script>
|