WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

最近、和風なサイトでよく見かける「縦書き文字」。普段は横書きに見慣れているので、サイトの雰囲気ががらっと変わりますね。
今回は、CSSによる「縦書き文字」の表現方法を紹介します。

縦書きにするには？

縦書きにするには下記の記述を縦書きにしたいテキストへCSSとして記述します。
下記の書き方だと、bodyに対して記述しているのでページ全体のテキストが縦書きになります。

writing-mode: vertical-rl;の、「vertical」が縦、「rl」が右から左（Right to Left）という意味です。
また、IE用には、-ms-のベンダープレフィックスを付け、tb-rl（上から下、右から左＝Top to Bottom, Right to Left）を指定すれば同様の見た目になってくれます。

body{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

ここで気になるのは、和文は縦、英数字は横に表示されています。
ここは微調整が必要になってきます。text-orientationというプロパティを使います。

テキストの表示方向の調整

文字の表示方向は、デフォルでは「text-orientation: mixed」になっています。
全て縦方向にするには、「text-orientation: upright;」
全て横方向にするには、「text-orientation: sideways」と使い分けができます。
Safari用には-webkit- ベンダープレフィックスが必要です。
※IE, Edgeは未対応です

先ほどの記述に、全て縦方向に揃える「text-orientation: upright;」を記述する事で、下記のように綺麗に揃いました。

body{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
　text-orientation: upright;
}

英数字の縦中横調整

では次に、「4月17日」と書かれた数字部分の調整です。
英数字や記号などを1文字分の幅として表示する縦中横と呼ばれる組み方はtext-combine-uprightというプロパティを使用します。
このプロパティは、縦書きモードでのみ効果があります。

1文字分に当てはめたい部分にspanタグなどで囲み、spanタグに対してtext-combine-uprightプロパティを使用したクラス名を付与します。

またここでもブラウザによって指定方法が異なるのでベンダープレフィックスを記述しましょう。

• 通常・・・text-combine-upright: all;
• Safari・・・-webkit-text-combine: horizontal;
• IE・・・-ms-text-combine-horizontal: all;

・HTML

<span class="text-combine">4</span>月<span class="text-combine">17</span>日

・CSS

body{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  }

.combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

数字部分が1文字分に収まりました！これで縦書きの表現の完成です。
フォントを明朝などにしたら、より和風感も増します。源ノ明朝フォントを使用してみました。

サイトの雰囲気に合わせて、縦書き表現をぜひ活用してみてください。