OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> | 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
5 <title>Vertical text metrics test</title> | 5 <title>Vertical text metrics test</title> |
6 <script> | 6 <script> |
7 function print(message) | 7 function print(message) |
8 { | 8 { |
9 var paragraph = document.createElement("li"); | 9 var paragraph = document.createElement("li"); |
10 paragraph.appendChild(document.createTextNode(message)); | 10 paragraph.appendChild(document.createTextNode(message)); |
(...skipping 13 matching lines...) Expand all Loading... |
24 } | 24 } |
25 </script> | 25 </script> |
26 <style> | 26 <style> |
27 body { | 27 body { |
28 font-family: "HiraMinPro-W3"; | 28 font-family: "HiraMinPro-W3"; |
29 font-size: 16pt; | 29 font-size: 16pt; |
30 } | 30 } |
31 #horizontal_TB { | 31 #horizontal_TB { |
32 -webkit-writing-mode: horizontal-tb; | 32 -webkit-writing-mode: horizontal-tb; |
33 } | 33 } |
34 #horizontal_BT { | |
35 -webkit-writing-mode: horizontal-bt; | |
36 } | |
37 #vertical_RL { | 34 #vertical_RL { |
38 -webkit-writing-mode: vertical-rl; | 35 -webkit-writing-mode: vertical-rl; |
39 } | 36 } |
40 #vertical_LR { | 37 #vertical_LR { |
41 -webkit-writing-mode: vertical-lr; | 38 -webkit-writing-mode: vertical-lr; |
42 } | 39 } |
43 #horizontal_TB_complex { | 40 #horizontal_TB_complex { |
44 -webkit-writing-mode: horizontal-tb; | 41 -webkit-writing-mode: horizontal-tb; |
45 text-rendering: optimizelegibility; | 42 text-rendering: optimizelegibility; |
46 } | 43 } |
47 #horizontal_BT_complex { | |
48 -webkit-writing-mode: horizontal-bt; | |
49 text-rendering: optimizelegibility; | |
50 } | |
51 #vertical_RL_complex { | 44 #vertical_RL_complex { |
52 -webkit-writing-mode: vertical-rl; | 45 -webkit-writing-mode: vertical-rl; |
53 text-rendering: optimizelegibility; | 46 text-rendering: optimizelegibility; |
54 } | 47 } |
55 #vertical_LR_complex { | 48 #vertical_LR_complex { |
56 -webkit-writing-mode: vertical-lr; | 49 -webkit-writing-mode: vertical-lr; |
57 text-rendering: optimizelegibility; | 50 text-rendering: optimizelegibility; |
58 } | 51 } |
59 </style> | 52 </style> |
60 </head> | 53 </head> |
61 <body onload="test()"> | 54 <body onload="test()"> |
62 <p>Simple text path</p> | 55 <p>Simple text path</p> |
63 <span id="horizontal_TB">string「あ、変っ!」。</span><br> | 56 <span id="horizontal_TB">string「あ、変っ!」。</span><br> |
64 <span id="horizontal_BT">string「あ、変っ!」。</span><br> | |
65 <span id="vertical_RL">string「あ、変っ!」。</span><br> | 57 <span id="vertical_RL">string「あ、変っ!」。</span><br> |
66 <span id="vertical_LR">string「あ、変っ!」。</span><br> | 58 <span id="vertical_LR">string「あ、変っ!」。</span><br> |
67 <br> | 59 <br> |
68 <hr> | 60 <hr> |
69 <p>Complex text path</p> | 61 <p>Complex text path</p> |
70 <span id="horizontal_TB_complex">string「あ、変っ!」。</span><br> | 62 <span id="horizontal_TB_complex">string「あ、変っ!」。</span><br> |
71 <span id="horizontal_BT_complex">string「あ、変っ!」。</span><br> | |
72 <span id="vertical_RL_complex">string「あ、変っ!」。</span><br> | 63 <span id="vertical_RL_complex">string「あ、変っ!」。</span><br> |
73 <span id="vertical_LR_complex">string「あ、変っ!」。</span><br> | 64 <span id="vertical_LR_complex">string「あ、変っ!」。</span><br> |
74 <br> | 65 <br> |
75 <hr> | 66 <hr> |
76 <p><ol id=console></ol></p> | 67 <p><ol id=console></ol></p> |
77 </body> | 68 </body> |
78 </html> | 69 </html> |
OLD | NEW |