こんにちは、なかわけです。
cssで縦書きにする件について調べてみました。
結論から言うと、Firefoxが全く対応してないです。
Webkit(Chrome, Safari)やIEやなんかで見ると以下のように見れます。
個人的にはIEが対応しているのにびっくりでした。
以下が主なcssです。
-webkit-writing-mode: vertical-rl;
font-family:"@MS P明朝", "@MS PMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", serif;
writing-mode: tb-rl;
direction:ltr;
1行目はプレフィックスからも分かるようにwebkit用の設定です。
2行目はフォントの指定ですが、ポイントは@アットマークです。このアットマークがないとWindowsのChromeで文字が横向きになった縦書きになってしまいます。
3行目はIE用の設定です。
4行目は念のための設定で、文字のどっち向きに方向に読むかという設定です。デフォルトはltr(左から右に)なので特に設定しなくても大丈夫です。アラビア語とかはrtlになります。
htmlのサンプルも用意したので参考にしてください。
で、今回仕事ではFirefoxにも対応させたいということだったので、竹取jsさんのjsを使わせていただきました。
今回webで縦書きを取り組んでみて、webで縦書きはwebの文化に反している様な気がして個人的にはweb縦書きは不要だと思いました。縦書きする言語はかなり少数ですし、webでは横書きの方が慣れてるかし。でも研究としては大変面白かったです。また本の話は別ですしね。epub系はこれからどうなるんでしょうね。がんばってください!