読者です 読者をやめる 読者になる 読者になる

hiromitsuuuuu.log();

to see more to see.

writing-modeについて

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の問題なのか、コーディングミスなのか・・・。