Webサイトの縦書き

2015年には主力ブラウザでは縦書きに対応してきています。縦書きの需要も高くなることが考えられます。まだまだ細かいところでは課題が多いですが、基本的な事はマスターしておきましょう。

横書きを縦書きに変更するCSS3プロパティ「writing-mode:vertical-rl」

HTMLタグ上では当然横書きの状態で作成します。
縦書きにするのはCSS3プロパティの「writing-mode:vertical-rl」を使います。

縦書き表示のサンプル

縦書きの指定はブロックレベル要素でもインラインレベル要素に対しても設定可能です。

縦中横の設定

CSSで縦中横の設定はまだブラウザによって対応がマチマチです。Chlome,Safariは以下の記述で対応しています。

その他の設定

傍線はtext-decorationプロパティを使用します。
しかし、主要ブラウザでの判断がマチマチです。
例えばFirefoxではtext-decoration: underlineで右側に傍線が引かれますが、Chromeでは左側に引かれてしまいます。text-decoration: overlineとすると逆の結果となります。

圏点についてはtext-emphasis-style: sesameでChromeでは対応していますが、Firefoxでは対応していません。
2016年2月時点では、これらの対応にはもう少し時間がかかるかもしれません。