dorayakiBlog
~絵や興味ある事について書いてます~
header image

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

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

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

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

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

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

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

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

犬も歩けば
棒に当たる
小辞林AAAことわざ辞典

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