writing-modeについて - hiromitsuuuuu.log();

iOS5から、CSS3の縦書きプロパティがサポートされ、MobileSafariで縦書きが可能になりました。
サンプルを作ってみたのですが、ハマった点があったので覚書き。

HTMLはこんな感じで書いてみました。とりあえず確認するためにdivだけでシンプルに。

<body>
<div class=“content”>
<p>むかしむかし、あるところに・・・</p>
</div>
</body>

CSSはこんな感じ。

body {
-webkit-writing-mode:vertical-rl;
}

.content{
height:250px;
direction:ltr;
-webkit-text-orientation:upright;
font-family:‘HiraMinProN-W3’;
font-family:'Hiragino Mincho ProN’;
font-size:120%;
}

はじめはdivに対してwriting-modeを指定してたんですが、文章の始まりが右端にならないのでwriting-modeはbodyに指定しています。縦書きだと、読む方向は右から左なんですが、画面サイズより大きなdivの場合、左端が起点になって左から右に読む流れになってしまいます。

これは、body自体は横書きの気持ちでいるのに、内部のdivは縦書きのつもりでいるので、縦書きのはじまり、つまり左端に基点がある状態になってしまいます。body自体にwriting-modeが縦書きですよーと教えてあげると、ちゃんと右端始まりにしてくれる。

よく考えれば普通のことでした (´・ω・｀) ただ、PC版Safariでは期待通りに動くんですが、MobileSafari（iOS5.0.1）では期待したように動かなかったです。WebKitの問題なのか、コーディングミスなのか・・・。