縦書きで表示させるスタイルシート
文字列を縦書きで表示させるには、スタイルシートで「writing-mode」というプロパティを使い、以下のように記述します。
writing-mode: tb-rl;
writing-modeプロパティに値「tb-rl」を指定すると、そのブロック内だけを縦書きで表示させられます。この「tb-rl」とは、
- tb ： Top to Bottom （上から下）
- rl ： Right to Left （右から左）
という意味です。（縦書きの表記順）
何も指定しなければ「lr-tb」が指定されたことになります。「lr-tb」は、
- lr ： Left to Right （左から右）
- tb ： Top to Bottom （上から下）
という意味です。（横書きの表記順）
このスタイルシート1行だけを用いて冒頭の文章を表示させると、以下のように見えます。（範囲が分かりやすいように枠線を加えています。）
謹賀新年
旧年中は大変お世話になり、ありがとうございました。 本年もどうぞよろしくお願い申し上げます。
二〇〇九年元日
Internet Explorerで閲覧していれば、上記の枠内は縦書きになっているはずです。
※このwriting-modeプロパティを使った記述を、html要素やbody要素に対して指定しても縦書きにはなりません。div要素やp要素などでボックスを作って、そこに対して指定して下さい。
最後に、冒頭のサンプルのように表示させるソースをまとめてご紹介いたします。
