iPhone / Android のCSS縦書きレイアウト

先日、ブラウザの縦書きレイアウトを国際標準化するというニュースがあったので、スマートフォンの縦書きレイアウト対応状況をチェックしてみました。

iPhoneは、CSSによる縦書きに対応していて（確か、iOS 5から）、「-webkit-writing-mode」プロパティを使って指示できます。横書きの場合は「-webkit-writing-mode: horizontal-tb;」、縦書きは「-webkit-writing-mode: vertical-rl;」です。

<div style="font-family: 'Hiragino Mincho ProN', serif; font-size: 64px; line-height: 1em; text-decoration: underline;">
    <div style="-webkit-writing-mode: horizontal-tb;">横書き→</div>
    <div style="-webkit-writing-mode: vertical-rl;">縦書き→</div>
</div>

上記のサンプルをiPhone 4S（iOS 5.1.1）のSafariで開くと、次のように表示されます。

▲iPhone 4S

また、Xperia ray（Android 2.3.4）の標準ブラウザと、Galaxy Nexus（Android 4.0.4）の標準ブラウザとChromeでは、次のように表示されます。

▲Xperia ray

▲Galaxy Nexus

▲Chrome

今回試した結果では、Xperia ray（Android 2.3.4）以外は、縦書きレイアウトに対応しているようです。