dorayakiBlog

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

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 だと下の様に。

Name:ドラ焼き
今は油絵具でイラストを描いてます。webプログラミングもやってます。 このブログでは絵や興味ある事について書いてます。Twitterの@dorayakiArtに近作のイラストもアップしてます。
👇このページの記事をシェアする