# text-spacing-trim

> 日本語の約物（括弧・句読点など）が持つ余分な空きを自動調整するプロパティです。「（」の前や連続する約物「）。」の間の空きを詰めて、組版ソフトのような美しい日本語テキストをWebで実現します。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/text-spacing-trim/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/text-spacing-trim

## 構文

```css
text-spacing-trim: normal | space-all | space-first | trim-start
```

## ブラウザ対応

- 対応が限定的
- Chrome 123+ / Firefox 未対応 / Safari 未対応 / Edge 123+
- 補足: Chrome/Edge限定（2026年7月時点）。非対応ブラウザでは通常の全角空きで表示

## コード例

### 例1: 行頭の始め括弧の空きを詰める（新聞・書籍風の組版）

```css
body {
  text-spacing-trim: trim-start;
}
```

### 例2: 段落先頭の括弧は全角のまま、行頭のみ詰める標準的な設定

```css
h1, h2, h3 {
  text-spacing-trim: space-first;
}
```

## TIPS

フォント側のかな詰め機能（font-feature-settings: 'palt'）が文字全体を詰めるのに対し、text-spacing-trimは約物の空きだけを調整するため本文にも安全に使えます。日本語見出しの「（」で始まる行の不揃い解消に効果的です。

## よくある間違い

2026年7月時点でChrome/Edge限定（limited）です。非対応ブラウザでは通常の全角空きのままなので表示は壊れませんが、ブラウザ間で見た目が揃わないことは把握しておきましょう。

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

AIは日本語約物の空き調整に、手動のletter-spacing負値指定やJSライブラリ（約物半角化処理）を提案しがちですが、text-spacing-trimがネイティブの解です。日本語組版特有の機能のため英語圏中心のAIは存在自体を知らないことが多く、「text-spacing-trimを使って」と明示するのが有効です。

## AIへの依頼文例

- 日本語見出しの「（」で始まる行の字下がりが気になる。text-spacing-trimで組版を整えて
- このサイトの日本語本文に、text-spacing-trim・text-wrap・word-break: auto-phraseを組み合わせたモダンな日本語組版設定を提案して

## 関連プロパティ

- [letter-spacing](https://www.css-dictionary.com/property/letter-spacing.md)
- [word-break](https://www.css-dictionary.com/property/word-break.md)
- [line-height](https://www.css-dictionary.com/property/line-height.md)
- [writing-mode](https://www.css-dictionary.com/property/writing-mode.md)
- [text-wrap](https://www.css-dictionary.com/property/text-wrap.md)