文字の装飾

text-spacing-trim

text-spacing-trim は、かっこや句読点のような全角の約物（くぎり記号）の空きを詰めるかどうかを決めます。約物が続くところや行の頭にできる、半角分の空きを詰められます。

構文

space-all | normal | space-first | trim-start

「はじめに」を読んでから、「本編」（第一章）に進みます。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  font-size: 15px;
  text-spacing-trim: trim-start;
}

text-spacing-trimtrim-start

space-allnormalspace-firsttrim-start

「はじめに」を読んでから、「本編」（第一章）に進みます。

全角の約物は、字の半分ほどが空きになっています。たとえば「」（」と続くと空きが重なって間延びし、行の頭の「「」は字下げしたように見えます。

space-all：どこも詰めません。全角の約物はいつも 1 文字分の幅です。
normal：「」（」のように約物が続くところの空きを詰めます。行の頭の開きかっこは詰めません。行の終わりの閉じかっこや句読点は、詰めないと行に収まらないときだけ詰めます。初期値です。
space-first：normal に加えて、行の頭の開きかっこも詰めます。ただし、段落の 1 行目と、<br> などで改行したすぐあとの行では詰めません。
trim-start：normal に加えて、どの行でも行の頭の開きかっこを詰めます。

対応しているのは Chrome と Edge（123 以降）だけです。Firefox と Safari では、どの値でも詰めません。仕様には trim-both・trim-all・auto もありますが、どのブラウザもまだ対応していないので、このページでは扱いません。

詰める幅はフォントの情報（OpenType の halt など）から決めるので、その情報が無いフォントでは、Chrome でも変わりません。

プレビューの文は、文字を 15px にして、箱の幅が 240px のときに 2 行目が「「本編」」で始まるようにしています。normal では「」（」の空きが詰まり、space-first では 2 行目の頭の「「」が、trim-start では 1 行目の頭の「「」も詰まります。