縦書きCSSについて

はじめに

HTMLによる縦書きは、W3Cで仕様を策定中のCSS3の機能を使用しています。しかし、CSS3は策定中で正式な仕様でない事と、この機能を使用できるブラウザはInternetExplorer5.5以降だけで、他のブラウザでは全く機能しない事に注意が必要です。

今後、W3Cから正式な勧告が出た場合は、その勧告にあわせてXHTMLやCSSのソースコードを書き直す必要があるかも知れません。

writing-mode属性

InternetExplorerでサポートされるwriting-mode属性は、lr-tb(左から右へ、上から下へ)とtb-rl(上から下へ、右から左へ)があります。これらの属性はbody要素に適用できないため、そのページの本文全体をdiv要素で括り、writing-mode属性にtb-rlを指定します。

div     {
        writing-mode:tb-rl;
}

しかし、この指定だけではブラウザが表示するページの原点が左上隅のままですので、ページが表示される原点を右上隅になるように、body要素にdirection:rtl(右から左)を指定し、さらにdiv要素にdirection:ltrを指定します。

body    {
        direction:rtl;
}
div     {
        writing-mode:tb-rl;
        direction:ltr;
}

以上で基本的な縦書きは可能になりますが、文章が長くなるとページの左隅に縦方向のスクロールバーが表示されるようになります。このスクロールバーが表示されないように、body要素に対してoverflow-x:scrollと指定し、さらにoverflow-y:autoと指定します。

body    {
        direction:rtl;
        overflow-x:scroll;
        overflow-y:auto;
}
div     {
        writing-mode:tb-rl;
        direction:ltr;
}

文字に関する注意

数字やアルファベット、記号などは、半角で記述すると横倒しになってしまいますので全角で記述します。

また、CSSで縦書きのフォント(先頭に@がついたフォント)を指定する必要はありません。

フォントはプロポーショナルフォントではなく、等幅のフォントを用いるときれいに見えます。

水平方向と垂直方向の注意

縦書きレイアウトでは水平方向のレイアウトが縦方向のレイアウトに置き換えられる場合があります。

CSSでtext-align:centerと記述した部分が、垂直方向に中央揃えとなる、といった具合になります。

その他のサンプル

• 田中貢太郎 「雪女」

参考情報

• Internet Explorer5.5における縦書きレイアウトの使用