Webデザインで風流な縦書きを

CSS３での縦書きが、
Webという機械的な中にもどこか風流なので、かるた風な文章を試してみた。

CSSセレクタ {
プロパティ： 値
}

CSSセレクタ {
writing-mode: vertical-rl;
}

ベンダープレプィックスを付ける
webkit-writing-mode: vertical-rl;

値はvertical-rl で右から左への文に
vertical-lr で左から右への文に

アルファベットは縦書きにすると文字ごと90度回転してしまうので
webkit-text-orientation: upright;
を付け足す

現時点ではまだ Safari と Chrome のみのようだが、スマートフォンやタブレット上での読み物には使えそうだ。
または和風テイストなデザインのWebサイトにも。

とりあえずChrome だと下の様に。