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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#9/9, 652 code points in U+1D7B3-1F8AD).</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 (#9/9, 652 code points in U+1D7B3-1F8AD)">
<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="Mathematical">
<div class="line">๐ณ๐ด๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ๐๐๐๐๐๐
๐๐๐๐๐๐๐๐๐๐๐๐๐</div>
<div class="line">๐๐๐๐๐๐๐๐๐๐๐๐ ๐ก๐ข๐ฃ๐ค๐ฅ๐ฆ๐ง๐จ๐ฉ๐ช๐ซ๐ฌ๐ญ๐ฎ๐ฏ๐ฐ๐ฑ๐ฒ๐ณ๐ด</div>
<div class="line">๐ต๐ถ๐ท๐ธ๐น๐บ๐ป๐ผ๐ฝ๐พ๐ฟ</div>
</div>
<div data-block="Mende">
<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="Adlam">
<div class="line">๐ค๐ค๐ค๐ค๐ค๐ค
๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค๐ค</div>
<div class="line">๐ค ๐คก๐คข๐คฃ๐คค๐คฅ๐คฆ๐คง๐คจ๐คฉ๐คช๐คซ๐คฌ๐คญ๐คฎ๐คฏ๐คฐ๐คฑ๐คฒ๐คณ๐คด๐คต๐คถ๐คท๐คธ๐คน๐คบ๐คป๐คผ๐คฝ๐คพ๐คฟ</div>
<div class="line">๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ๐ฅ</div>
</div>
<div data-block="Arabic">
<div class="line">๐ธ๐ธ๐ธ๐ธ๐ธ
๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธ๐ธก</div>
<div class="line">๐ธข๐ธค๐ธง๐ธฉ๐ธช๐ธซ๐ธฌ๐ธญ๐ธฎ๐ธฏ๐ธฐ๐ธฑ๐ธฒ๐ธด๐ธต๐ธถ๐ธท๐ธน๐ธป๐น๐น๐น๐น๐น๐น๐น๐น๐น๐น๐น๐น๐น</div>
<div class="line">๐น๐น๐นก๐นข๐นค๐นง๐นจ๐นฉ๐นช๐นฌ๐นญ๐นฎ๐นฏ๐นฐ๐นฑ๐นฒ๐นด๐นต๐นถ๐นท๐นน๐นบ๐นป๐นผ๐นพ๐บ๐บ๐บ๐บ๐บ๐บ
๐บ</div>
<div class="line">๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บ๐บก๐บข๐บฃ๐บฅ๐บฆ๐บง๐บจ๐บฉ๐บซ๐บฌ๐บญ๐บฎ</div>
<div class="line">๐บฏ๐บฐ๐บฑ๐บฒ๐บณ๐บด๐บต๐บถ๐บท๐บธ๐บน๐บบ๐บป๐ปฐ๐ปฑ</div>
</div>
<div data-block="Supplemental">
<div class="line">๐ ๐ ๐ ๐ ๐ ๐
๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ก๐ ข๐ ฃ</div>
<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>
|
