くまだどうも、くまだです。
CSSのtext-spacing-trimプロパティのメモ。
text-spacing-trim：カッコや句読点のアキを詰める
text-spacing-trimは、CJK（日本語・中国語・韓国語）の約物まわりのアキを詰めるプロパティです。
日本語の「」や（）は全角文字なので、文字の中に余白を含んでいます。そのまま並べると、括弧が連続したときに余白が二重になって間延びします。それを詰めるのがこのプロパティです。
コードは以下になります。
<div class="box">
<div class="text f-noto">
<div><span>「こんにちは」（テスト）</span> ← 指定なし</div>
<div><span class="normal">「こんにちは」（テスト）</span> ← <code>normal</code></div>
<div><span class="space-all">「こんにちは」（テスト）</span> ← <code>space-all</code></div>
<div><span class="trim-start">「こんにちは」（テスト）</span> ← <code>trim-start</code></div>
<div><span class="space-first">「こんにちは」（テスト）</span> ← <code>space-first</code></div>
</div>
</div>
.text {
font-size: 20px;
line-height: 2;
white-space: nowrap;
}
.text span { background: #eef4ff; }
.normal {
text-spacing-trim: normal;
}
.space-all {
text-spacing-trim: space-all;
}
.trim-start {
text-spacing-trim: trim-start;
}
.space-first {
text-spacing-trim: space-first;
}
指定した値によって、括弧周りが詰まっていたりします。
値は以下になります。
- normal：初期値
- space-all：詰めない。約物をすべて全角のまま表示する（従来の見た目）
- trim-start：行頭の開き括弧を半角にする
- space-first：最初の行だけ全角を維持、以降はtrim-start相当
フォントによっては効かないものもあります。
Noto Sans JPや游ゴシックなどは効きますが、メイリオやMSゴシックは効きません。OpenTypeのhalt（Alternate Half Widths）またはchws（Contextual Half-width Spacing）を持つフォントが必要で、メイリオやMS ゴシックはこれを持っていないので、指定しても何も起きません。
2026年8月時点でのブラウザ対応状況は以下になります。
未対応ブラウザの場合は指定しても従来通り詰まらない、というだけです。
ここまで読んでくださりありがとうございました。