CSS-縦書きの実装

久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。

〇縦書きのコーディングは、「writing-mode」プロパティを使用

使う値は、「vertical-rl」でこの「rl」は右から左、とい意味らしいです。

書き方は以下のようになります。

body {
  writing-mode: vertical-rl;
}

また、IE用には書き方が少し違ってきます。

違う点は、プロパティにベンダープレフィックス「-ms-」をつける点と、使用する値は「tb-rl」を用いる点です。つまり、下記のようになります。

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

とりあえず、縦書きにする、という点だけなら以上まででOKです。

ただ、現実に実装しようとすると縦書きにはいろいろな調整が必要になってきます。

ここではいくつかをまとめておきたいと思います。

【文字の表示方向】

※注意※Safari用に-webki-tベンダープレフィックスが必要。IE,Edge未対応。

①使用するプロパティは「text-orientation」で、デフォルトの値は「mixed」。デフォルトの値のままだと、和文は縦、英語は横向きに表示される。以下は例です。

.title {
  text-orientation: mixed;
}

②英数字も縦表示(和文も英数字も縦)にしたい場合、使用する値は「upright」。

.title {
  text-orientation: upright;
}

③和文も横表示(和文も英数字も横)にしたい場合、使用する値は「sideways」。

.title {
  text-orientation: sideways;
}

【英数字の向きを縦中横で表示】

和文は縦表示だけど、数字は横表記で１文字分でまとめたい時があります。そういう時に使われるプロパティは「text-combine-upright」。1文字として納めたい部分は「span」タグで囲う。

※注意※ブラウザによってプロパティや値が異なってくる。使用する時は以下も忘れずに反映させる。
※Safari→「-webkit-text-combine: horizontal;」
※IE→「ms-text-combine-horizontal: all;」

↓では通常の指定方法でかいています↓

【HTML】

<span class="text">12</span>月

【CSS】

.text {
  text-combin-upright: all;
}

【リンクの線】

縦書き表示にするとリンクの線は左横に引かれる。これを日本の書式として右横に整えたい時、使用する値は「overline」。

a {
  text-decoration: overline;
}

プロパティ「text-decoration」の値を変える以外にも「border-right」プロパティで指定する方法もある。この時、「text-decoration」の値は「none」（非表示）にしておく。「border-right」プロパティを使えば、値にいろいろ指定できるので、テキストと線の余白を調整したり、線の種類や色を変更できるので表現の幅が広がります。

a {
  text-decoration: none;
  border-right: 2px solid;
}

【振り仮名】

振り仮名(ルビ)を付ける時はCSSではなく、HTMLで表現するらしいです。

使用タグは「<ruby>」と「<rt>」。ちなみに「rt」は「Ruby Text」のことだそうです。

使い方としては、振り仮名を<rt>タグで囲い、振り仮名をふりたいテキストの真後ろに持ってくる。そしてそれ全体を<ruby>タグで囲う。

【HTML】

<ruby>独学<rt>ドクガク</rt></ruby>

【字下げ】

段落ごとに1文字分のスペースを開けたい時に使うことが多いと思います。

使用するプロパティは「text-indent」で、値を「1rem」とする。

p {
  text-indent: 1rem;
}

参考サイト：https://www.webcreatorbox.com/tech/writing-mode