Text styling
text-spacing-trim
text-spacing-trim decides whether to trim the blank space in fullwidth punctuation such as Japanese brackets and commas. It can remove the half-character gaps where punctuation marks meet and at the start of a line.
Syntax
space-all | normal | space-first | trim-startPreview
Code
.box {
font-size: 15px;
text-spacing-trim: trim-start;
}Controls
About
Values
About half of a fullwidth punctuation glyph is blank. When "」（" follow each other the blanks add up to a wide gap, and a "「" at the start of a line looks indented.
space-all: trims nothing. Fullwidth punctuation always takes a full character width.normal: trims the space where punctuation marks meet, as in "」（". Opening brackets at the start of a line are not trimmed, and closing brackets or commas at the end of a line are trimmed only when they would not fit otherwise. This is the initial value.space-first: likenormal, and also trims opening brackets at the start of a line, except on the first line of a paragraph and on a line right after a forced break such as<br>.trim-start: likenormal, and also trims opening brackets at the start of every line.
Chrome and Edge only
Only Chrome and Edge (version 123 and later) support this property. Firefox and Safari trim nothing whatever the value. The spec also defines trim-both, trim-all and auto, but no browser supports them yet, so this page leaves them out.
How much to trim comes from the font (OpenType features such as halt), so fonts without that data do not change, even in Chrome.
About the preview text
The preview text is set at 15px so that, with the box 240px wide, the second line starts with "「本編」". With normal the gap in "」（" closes up, with space-first the "「" starting the second line is trimmed, and with trim-start the "「" starting the first line is trimmed too.