概要
- まずは文章で縦書きを表示
- 縦書きCSSの基本
- 要素・テキストの表示
- まとめ
- 参考
まずは文章で縦書きを表示
CODEPENで縦書き表示してみる
マークアップとスタイル
3つ要素が必要
- 縦書きになる要素（p）
- 縦書き指定する親要素（div.v-writing）
- 親要素をレイアウトする祖先要素（div.contents）
マークアップとスタイル
縦書きになる要素（p）
- 縦書きにするためのスタイル指定なし
マークアップとスタイル
縦書き指定する親要素（div.v-writing）
- writing-mode: vertical-rl; → 縦書き指定
- display: inline-block; → 親要素のレイアウト用
- text-align: left; → 親要素内の文字の揃え
マークアップとスタイル
親要素をレイアウトする祖先要素（div.contents）
- text-align: center; → 親要素のレイアウト用
縦書きCSSの基本
3つの基本プロパティ
- writing-mode
- text-combine-upright
- text-orientation
3つの基本プロパティ
writing-mode : ブロックのフロー方向（縦書き・横書き）を指定
- 横書き(horizontal-tb, 初期値) / 縦書き(vertical-rl) 等
- MDN
3つの基本プロパティ
text-combine-upright : 一文字分の空間に挿入する複数文字の組み合わせを指定
- none(なにもしない, 初期値) / all(どんな文字でも縦中横) / digits ?(2〜4桁の数値を指定して縦中横, 未サポート)
- Safariは効かない
- MDN
3つの基本プロパティ
text-orientation : 行内のテキストの向き（縦書き・横書き）を指定
- 横書き文字・縦書き文字を適切に処理(mixed, 初期値) / 縦書き(upright) / 横書き(sideways)
- MDN
テキストのスタイリング
- text-align
- left(上) / center(上下中央) / right(下)
- line-height
- 行の高さ。縦方向→横方向
テキストのスタイリング
- text-indent
- 1行目のインデント。左からの空き→上からの空き
- letter-spacing
- 横方向→縦方向
ブロックのレイアウト
- margin / padding / top / left / right / bottom の指定方向はそのまま
- flexboxの位置指定もちゃんと効く
要素・テキストの表示
要素・テキストの表示
要素の表示
- sup（上付き文字） / sub（下付き文字）
- normalize.cssを使うと文字が上下に重なるので注意
- ruby（ルビ）
- ルビテキストと本文テキストの隙間をChromeは調整できないので注意
要素の表示
- 下線
- デフォルトは左に表示。text-decorationで大まかに調整できる
- リスト・テーブル
- 左が起点→上が起点
特殊な文字
- © ㈱ ③ Ⅵ などの機種依存文字はブラウザによって縦・横の表示が異なる可能性あり
まとめ
- 縦書きCSSのためには 1. 縦書きにする要素 2. 1の親要素 3. 2をレイアウトする祖先要素 が必要
- 全角文字は縦書きに変わるが、半角文字は変わらないので必要に応じてスタイリングする
- テキストに反映するスタイルは方向が変わるが、ブロックのスタイルは方向が変わらない