| <!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> |
