縦書き123XYZ

この中は、縦書きされますわよ。
　おねえさま

問☆題☆解☆決！

　段落のテストとかやってみたり、
これは段落じゃなくしてみたり。
「あれ、セリフはどうなるのかな？って
みさかはみさかに縦書きを行ってみたり。」
超長い文章は勝手に改行されるはずなんだけど、どーなんですか、一歩通行アクセラレータさんってルビを振ってみたり。白薔薇のつぼみロサ・ギガンティア・アン・ブゥトンって長いるびは動くのか試してみたり、そろそろ改行されるはずなんだけど、いったいどうなってんだ orz うひょー

テスト文章のソース

<DIV class="vertical" style='writing-mode: tb-rl; direction: ltr; -moz-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; font-family:"@MS P明朝";'>
この中は、縦書きされますわよ。
おねえさま

　段落のテストとかやってみたり、
これは段落じゃなくしてみたり。
「あれ、セリフはどうなるのかな？って
みさかはみさかに縦書きを行ってみたり。」
超長い文章は勝手に改行されるはずなんだけど、どーなんですか、<RUBY><RB>一歩通行<RT>アクセラレータ</RUBY>さんってルビを振ってみたり。<RUBY><RB>いいぜ、てめぇがなんでもできるというのならまずはその幻想をぶち殺す<RT>そげぶ</RUBY>。って長いるびは動くのか試してみたり、そろそろ改行されるはずなんだけど、いったいどうなってんだ orz うひょー
</DIV>

追加:
テストデータに改行タグを入れるの忘れちゃった。。。ぐぬぬ。
改行をちゃんといれたバージョンのテストはこちらです。
http://rtilabs.net/files/2011_01_08/tate2.html

IE6

縦書き in IE
IE は、IE6のから縦書きをサポートしている。

IE6.0.290.5512.xpsp_sp3
お見事!!

縦書きにするには、 writing-mode: tb-rl; direction: ltr; といったスタイルを指定する。
この内容には、詳しいサイトの解説を読むのが一番だろう。

さて、css3 の企画は、 IE6の縦書きを~~ぱくって~~真似て実装されている。
しかし、、、、

firefox

firefox は、-moz-writing-mode: vertical-rl; と指定する。
ついでに、font-family:"@MS P明朝"; と、 @付きで縦書き用のフォントを選択する。

firefox 3.6.10

はい、だめでしたー。

firefox4

それでも、firefox4 、firefox4だったら、きっと何とかしてくれる。。。

firefox 4.0b8

はい、だめでしたー。

chrome

webkit系なら、webkit系なら何とかしてくれるはずだ!!
chrome は、webkit系なので、 -webkit-writing-mode: vertical-rl; と指定する。
ついでに、font-family:"@MS P明朝"; と、 @付きで縦書き用のフォントを選択する。

google chrome 8.0.552.224
しかし、、、ぎゃー。

opera ぎゃー

operaってさ、やるときはやってくれるんだよね。
operaは、-o-writing-mode: vertical-rl;
やっぱり、font-family:"@MS P明朝"; と、 @付きで縦書き用のフォントを選択する。

opera 11.00 build 1156

あーだめだー

safari

それでも、 apple なら、apple ならジョブズの魔法で何とかしてくれる。。。
safari は、webkit系なので、 -webkit-writing-mode: vertical-rl; と指定する。
ついでに、font-family:"@MS P明朝"; と、 @付きで縦書き用のフォントを選択する。

safari 5.0.3(7533.9.4)