79 lines
2.0 KiB
HTML
79 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
<title>Vertical text metrics test</title>
|
||
<script>
|
||
function print(message)
|
||
{
|
||
var paragraph = document.createElement("li");
|
||
paragraph.appendChild(document.createTextNode(message));
|
||
document.getElementById("console").appendChild(paragraph);
|
||
}
|
||
function test()
|
||
{
|
||
if (window.testRunner)
|
||
testRunner.dumpAsText();
|
||
|
||
var pElems = document.getElementsByTagName("span");
|
||
for ( i = 0 ; i < pElems.length ; ++i )
|
||
{
|
||
var elem = pElems[i];
|
||
print("width=" + elem.offsetWidth);
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
font-family: "HiraMinPro-W3";
|
||
font-size: 16pt;
|
||
}
|
||
#horizontal_TB {
|
||
-webkit-writing-mode: horizontal-tb;
|
||
}
|
||
#horizontal_BT {
|
||
-webkit-writing-mode: horizontal-bt;
|
||
}
|
||
#vertical_RL {
|
||
-webkit-writing-mode: vertical-rl;
|
||
}
|
||
#vertical_LR {
|
||
-webkit-writing-mode: vertical-lr;
|
||
}
|
||
#horizontal_TB_complex {
|
||
-webkit-writing-mode: horizontal-tb;
|
||
text-rendering: optimizelegibility;
|
||
}
|
||
#horizontal_BT_complex {
|
||
-webkit-writing-mode: horizontal-bt;
|
||
text-rendering: optimizelegibility;
|
||
}
|
||
#vertical_RL_complex {
|
||
-webkit-writing-mode: vertical-rl;
|
||
text-rendering: optimizelegibility;
|
||
}
|
||
#vertical_LR_complex {
|
||
-webkit-writing-mode: vertical-lr;
|
||
text-rendering: optimizelegibility;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body onload="test()">
|
||
<p>Simple text path</p>
|
||
<span id="horizontal_TB">string「あ、変っ！」。</span><br>
|
||
<span id="horizontal_BT">string「あ、変っ！」。</span><br>
|
||
<span id="vertical_RL">string「あ、変っ！」。</span><br>
|
||
<span id="vertical_LR">string「あ、変っ！」。</span><br>
|
||
<br>
|
||
<hr>
|
||
<p>Complex text path</p>
|
||
<span id="horizontal_TB_complex">string「あ、変っ！」。</span><br>
|
||
<span id="horizontal_BT_complex">string「あ、変っ！」。</span><br>
|
||
<span id="vertical_RL_complex">string「あ、変っ！」。</span><br>
|
||
<span id="vertical_LR_complex">string「あ、変っ！」。</span><br>
|
||
<br>
|
||
<hr>
|
||
<p><ol id=console></ol></p>
|
||
</body>
|
||
</html>
|