# writing-mode

> テキストの書字方向を指定するプロパティです。横書き、縦書き、文字の向きを制御できます。日本語、中国語、アラビア語などの多言語対応や、デザイン上の縦書き表現に使用されます。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/writing-mode/

## 構文

```css
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
```

## Tailwindでは

- 任意値: `[writing-mode:vertical-rl]`
- 補足: 専用ユーティリティは無く任意値で書く。縦書きは論理プロパティ（ms-*/ps-*等）との併用が前提。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 48+ / Firefox 41+ / Safari 10.1+ / Edge 12+

## コード例

### 例1: 縦書き（右から左）- 日本語の伝統的な書字方向

```css
.vertical-text {
  writing-mode: vertical-rl;
  height: 200px;
  width: 100px;
}
```

### 例2: 縦書き（左から右）- モンゴル語などで使用

```css
.vertical-left {
  writing-mode: vertical-lr;
  height: 200px;
  width: 100px;
}
```

### 例3: 横書き（上から下）- デフォルトの書字方向

```css
.horizontal {
  writing-mode: horizontal-tb;
}
```

### 例4: サイドバーの縦書きタイトル

```css
.sidebar-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 1rem;
  background: #f3f4f6;
}
```

### 例5: 本の背表紙のような縦書きデザイン

```css
.book-spine {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  height: 300px;
  width: 40px;
  background: #1f2937;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

## TIPS

縦書き時は要素の幅と高さの概念が入れ替わる。text-orientationと組み合わせて文字の向きも制御できる。日本語の縦書きレイアウトやデザイン上のアクセントとして活用。

## よくある間違い

縦書き時にpaddingやmarginの方向が変わることを忘れがち。flexboxやgridとの組み合わせ時は軸の方向に注意。

## AIがよく間違えるポイント

縦書き（vertical-rl）にすると、幅と高さ・上下左右の意味が入れ替わるため、物理プロパティ（width, margin-left等）で書かれたスタイルは破綻します。縦書き対応は論理プロパティ（inline/block系）とセットが原則です。数字や英字を正立させるtext-orientationやtext-combine-upright（縦中横）の存在もAIは出し忘れがちです。

## AIへの依頼文例

- この見出しを縦書きにして。数字は縦中横で正立させ、レイアウトは論理プロパティで崩れないように