先日、ブラウザの縦書きレイアウトを国際標準化するという
ニュースがあったので、スマートフォンの縦書きレイアウト対応状況をチェックしてみました。
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で開くと、次のように表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-Qo7hgAPMdYWZ124IWcidjMWTxTfJ9EE_nHZbU-hJYSgLv9VhN-KtelzZPZsAh3Z3mXMKAyY54XKn2QQop85NQLXw6OT4SVfG5kzYmFu1Bj5si39z0YcyyucvduELozYuxgxouysCDXR/s320/IMG_0323.png) |
▲iPhone 4S |
また、Xperia ray(Android 2.3.4)の標準ブラウザと、Galaxy Nexus(Android 4.0.4)の標準ブラウザとChromeでは、次のように表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjATGCXMu359gll0Xo18qMuIxqST_xKuhfKfwkLnzid8fPaBLc36hw7rTBi7m1E3g2KmHJcnpphuKy6NGu0YotbMStipEGY6HBvN9GMJYcXZl9I018FmhrEFiUGHnacUtmWcY827Qaii_RF/s320/screenshot_2012-09-12_2204.png) |
▲Xperia ray |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO8PqNAjOHAvBq3V9XzBd9u4rUxunFWh2dYzuKaJIBeervRsQl8FoZe6lANe0iZfYDb8MKSzrsFHvY1UqWOUN6XpGYyTrw6jMPO-STt7goWmB8F-j3Ihf53XO0fCx6Jwe_LCfYv8vdhjA8/s320/Screenshot_2012-09-12-22-05-10.png) |
▲Galaxy Nexus |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrsjL05FLpB_LKpbHNxcZ0xHt02X-XT2Y4dImG4PdsLjC96h6uAJL8TG8J4WdMrQGFcsV072dgdE_5EWVktYHIrbRgQxOEzyMfERXdF8MlvqTI5Tb1z-nBOpPrMMSTJ8X2QxCQXMxJj3FW/s320/Screenshot_2012-09-12-22-04-43.png) |
▲Chrome |
今回試した結果では、Xperia ray(Android 2.3.4)以外は、縦書きレイアウトに対応しているようです。
0 件のコメント:
コメントを投稿