<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Vertical text metrics test</title>
<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>
<p>Simple text path</p>
<span id="vertical_RL">string「あ、変っ！」。</span>
<hr>
<p>Complex text path</p>
<span id="vertical_RL_complex">string「あ、変っ！」。</span>
</body>
</html>