自分でも驚くほど覚えていられず、調べる度にすぐ忘れてしまうのでメモ。IEは対象外とします。

文字方向の指定

writing-mode を使用して指定が可能。ブラウザ依存があるため、ベンダープレフィックスが必要。デフォ設定はブラウザにより異なります。

縦書き

writing-mode: vertical-rl; もしくは writing-mode: vertical-lr; で指定する。

* {
    writing-mode: vertical-rl; //右から左
    writing-mode: vertical-lr; //左から右
}

横書き

左から右、上から下方向へは writing-mode: horizontal-tb; で指定。

* {
    writing-mode: horizontal-tb; //左から右、上から下
}

一覧

  • プロパティ
  • 説明
  • writing-mode: horizontal-tb;
  • 横書き : 左から右、上から下
  • writing-mode: vertical-rl;
  • 縦書き : 右から左、上から下
  • writing-mode: vertical-lr;
  • 縦書き : 左から右、上から下
  • writing-mode: sideways-rl;
  • 横文字の縦書き : 右から左、上から下　※一部のブラウザのみ
  • writing-mode: sideways-lr;
  • 横文字の縦書き : 左から右、下から上　※一部のブラウザのみ

CSSのみで改行させる

brタグを使わずにCSSで改行することで、メディアクエリによる表示幅に合わせた改行操作が簡単にできる。

HTML

<p>これは1行目のテキスト<span class="break">ここから2行目</span></p>

CSS

.break::before {
    content: "\A"; //改行コード
    white-space: pre; //改行を有効化
}

出力結果

これは1行目のテキストここから2行目

参考

writing-mode「文字の縦書きなどの方向」【CSSリファレンス】