CSS 文字の縦書き

文字を縦書きにするスタイルの活用事例です。

CSSでは縦書きができるようになっています。

原稿用紙や雑誌のような縦書きレイアウトも簡単に作ることができます。

行の向きも右から左

一行目　こんにちは
二行目　半角英数字 ABC 123
三行目　全角英数字ＡＢＣ１２３

左から右と指定することができます。

一行目　こんにちは
二行目　半角英数字 ABC 123
三行目　全角英数字ＡＢＣ１２３

全半角の向きの違いは注意が必要です。

それぞれに反映しているスタイルはこちら。

.demo_text_rl {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.demo_text_lr {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

縦書きを活用するとこんな表現の可能です。

今回は文字を配列で持たせて、jQueryで追加しています。

$(function(){
    i=0;
    haiku = new Array('ふ','る','い','け','や','<br>','か','わ','ず','と','び','こ','む','<br>','み','ず','の','お','と');
    if(i < haiku.length){
        setInterval(function(){
            $("#demo_haiku").append(haiku[i]);
            ++i;
            if(i === haiku.length+1){
                i=0;
                $("#demo_haiku").empty();
            }
        },300);
    }
});

0.3秒ごとに一文字ずつ追加している内容です。

縦書きのスタイルのline-height、text-alignを指定するときは、縦横が逆になるので少し厄介です。

#demo_haiku {
    width:150px;
    height:210px;
    padding: 20px;
    margin:0 auto;
    background-color:#EEE;
    font-size:30px;
    line-height: 50px;
    font-family: 游明朝,"Yu Mincho";
}

ただ、CSSのレイアウトを駆使すれば縦書き風に見せることも可能ですが、このスタイルを使うことでだいぶ簡単に実装が可能になりました。