CSSで縦書きを表現しよう

ひとつ前の記事でPhotoshopで縦書き文字ツールで縦書きをする方法を書きましたが、今回はcssで文字を縦書きにする方法になります。

横書きが基本となるWEBサイトにおいて縦書きを使用することは、和をイメージするのにとても効果的です。
日本の新聞や小説などは、上から下に。右から左へ。というように、縦書きに文字が流れるので、その影響も大きいと思います。

CSSで縦書きの方法

縦書きにする方法は、縦書きにしたい箇所にCSSを当てるだけなので、とても簡単です。
サンプルページを表示

writing-mode: vertical-rl;

※IEのサポートが終了しているので、IEのベンダープレフィックスは省略。
writing-modeのプロパティは以下の通りです。

日本語のみであればこのままで問題無いのですが、文中に英数字が入ってくる場合は注意が必要です。

英数字を含む縦書き

文中に英数字が含まれる場合、先述のcssでそのまま表示すると英数字が横方向を向いてしまいます。
前回のPhotoshopで縦書きを作った時と同じような感じですね。
Photoshopの縦書き文字ツールで英数字も綺麗に見せよう

英数字の文字方向の不具合を解消するには、以下のcssを使用します。
サンプルページを表示

writing-mode: vertical-rl;
text-orientation: upright;

text-orientationのプロパティは以下の通りです。

uprightを使用すれば特に問題はなさそうですが、場合によっては英数字のみ横に並べたほうが見栄えが良いケースもあります。cssでもPhotoshopと同じく縦中横ができます。

text-combine-upright: all;