CSSで縦書き表記にする方法

縦書き表記にする方法

最近、縦書き表記を実装しているサイトをよく見かけるのでCSSで縦書き表記にする方法を調べてみました。

1. 縦書きにするためのプロパティ

CSSで縦書きにするにはwriting-modetext-orientaitiontext-combine-uprightという3つのプロパティを使って実装します。

  • writing-mode: 縦書きか横書きかを指定
  • text-orientaion: 文字を回転させるかしないかを指定
  • text-combine-upright: 縦書きの中に横書きを組む縦中横(たてちゅうよこ)を指定

1-1. writing-mode

文字の横書きか縦書きかはwriting-modeを使って指定します。縦書きにしたい箇所にvertical-rl(Right to Left:右から左)を設定することで縦書きにすることが可能です。

IEは、独自のスタイル指定があるのでベンダープレフィックス-ms-を付け、tb-rlとしてあげます。

.text {
	-ms-writing-mode: tb-rl; /* for IE */
	writing-mode: vertical-rl;
}

ブラウザによる違い

writing-mode: vertical-rlを設定すると、ChromeとSafariでは右詰で表示されますが、FireFoxでは左詰で表示されてしまいます。

1-2. text-orientaion

縦書き時の文字の表示方向を調整するには、このtext-orientationを使います。デフォルトはtext-orientation: mixedが指定されていて、日本語は縦向きですが英数字が横向きに表示されます。英数字も横向き表示させるためにはuprightを指定します。

因みに、日本語も横向きに表示させたい時はsidewaysを指定します。

.text {
	-webkit-text-orientation: upright; /* Safari */
	text-orientation: upright;
}

表示の違いは下記を参照してください。

See the Pen CSS : 縦書きにする方法 by uquico (@uquico) on CodePen.

1-3. text-combine

text-combineを使うと縦書きの中に横書きの文字を表示できる縦中横(たてちゅうよこ)と呼ばれる文字組みが可能になり、1文字分のスペースに複数の文字を表示することができます。

  • text-combine-upright: all; - 縦書きの中に横書き文字をレイアウトにする
  • text-combine: horizontal; - Chrome , Safari
  • -ms-text-combine-horizontal: all; - IE
<p>3月<span class="combine">20</span>日は春分の日です。</p>

「20」にtext-combineを指定するクラスを付けています。これで1文字分のスペースの箇所に2桁の数字を入れることができます。

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

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

2. ルビを振る

HTMLのrubyタグを使うとルビを振ることができます。ルビを指定する時は、rubyタグで単語を囲み、その中にrtタグで囲んだルビを記述します。

<p>CSSで<ruby>縦書<rt>たてが</rt></ruby>きにする<ruby>方法<rt>ほうほう</rt></ruby></p>

3. 傍線・リンクの線

横書きの場合、テキストの装飾線である傍線・リンク線はテキストの下に付きますが、縦書きの場合は左側に線が表示されてしまいます。これを右側に表示させるためには、text-decoration: overline;を指定しましょう。

a {	
  text-decoration: overline;
}

CSSの縦書きの実装については、ブラウザ毎に差があるので実際に使用する際は、表示確認をきちんと行った方が良さそうです。

Leave a Comment