日本の雰囲気を表現したい場合に!CSSで文字を縦書きにしてみる

今回は文字を縦書きで表示する方法を紹介します。CSSだけで可能です。

 

縦書きにする方法

文字を縦書きにするにはwriting-mode: vertical-rl;を指定するだけです。

verticalは垂直、rlが右から左(right to left)という意味です。

また、IEには-ms-のベンダーインプレックスが必要で、書き方はwriting-mode: tb-rl(top to bottom, right to left)と記述します。

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

これだけでIEにも対応した、文字の縦書きができるようになります。

 

文字の表示方向を変更する

日本語は上記のコードだけで縦書きになりますが、文字を表示する方向を調整することもできます。

文字の表示方向を変更するにはtext-orientationプロパティを使います。

デフォルトの値はmixedで、日本語は縦、英語や数字は横に表示されます。

英語や数字も縦で表示したい場合はupright、逆に日本語を横向きで表示したい場合はsidewaysという値を指定します。

また、Safariでは-webkit-ベンダーインプレックスが必要になります。IE、Edgeではサポートされていません。

body {
  text-orientation: upright; /* すべて縦方向に表示 */
}

 

数字を縦に表示する

縦中横と呼ばれる、数字を1文字分の幅として表示する方法はtext-combine-uprightというプロパティを使用します。

段落全体に使うととんでもないことになるので、縦中横で表示したい部分はspanタグで囲みましょう。

注意点として、値の指定方法がブラウザによって異なります。

ベンダーインプレックスまで含めた書き方はまとめると以下のようになります。

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

 

以下のように指定すると日本語は縦書き、数字は縦中横の書き方になります。

HTML

<span class="text-combine">12</span>月<span class="text-combine">31</span>日

 

CSS

body{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.text-combine {
-webkit-text-combine: horizontal;
-ms-text-combine-horizontal: all;
text-combine-upright: all;
}

 

「12」と「31」が縦中横の書き方で表示されますね。

 

リンクの線を変更する

横書きの場合デフォルトのリンクの線は下につきますが、縦書きにすると左に線が惹かれます。

日本語的に見ると右側に線がついて欲しいので、線の位置を変更しましょう。

リンクの線の位置を変更するには、text-decoration: overline;を指定します。

a {
  text-decoration: overline;
}

 

また、text-decorationではなくborderを使ってリンクの線っぽくすることもできます。

borderの方が線の形や太さも自由に変更できる他、paddingを使って余白も簡単に指定できるのでborderを使って線を引くのも大いにアリですね。

a {
  text-decoration: none;
  border-right: 1px dashed;
  padding-right: 3px;
}

まとめ

CSSだけで簡単に縦書きを表現することができました。

日本の雰囲気を出していきたいサイトを作るときには文字の縦書きが必要になると思います。

そのときは上記のコードのように書けば解決ですね。