テキストを縦書きで表示したい

ホームページの文字はたいてい横書きですが、
国語の教科書のような縦書きで表示したい場合もありますよね。
小説サイトで使うとまるで本のような感じが出せそうです。
また、デザインとして一部だけ縦書きを使いたい場合もありそうです。

スタイルシートを使えば縦書きで表示できる方法があります。
ですが、Internet Explorer以外は縦書き表示に対応していないんです。

そこで、コンテンツの大半を縦書きにしたい場合には
スタイルシートをかけて、一部だけデザイン的に使う場合は
テキストの画像を作って画像で表示することをオススメします。

その01　IEのみ対応:layout-flow
スタイルシートで
p{layout-flow:vertical-ideographic;}
を指定します。

もしくは、
p{writing-mode:tb-rl;}
を指定します。
小説など、縦書きテキストが多いサイトはこっちの方法がオススメです。

その02　画像で出力
FirefoxやSafari、GoogleChromeなどのブラウザでは、
layout-flowやwriting-modeが効きません。
デザインとして縦書き文字を使用する場合は
グラフィックソフトのテキストを利用し画像で作成します。
せっかくのデザインが崩れてしまうともったいないですから。
画像で出力した方が確実です。

おまけ:
縦書きスタイルシートがあまりサポートされていないのは
やっぱり文字を縦書きにする国が少ないからなんでしょうか…。
参考サイト:
CSSにおける国際的レイアウト
 HTMLクイックリファレンス-writing-mode-