text-spacing-trim CSS property

Syntax

/* Keyword values */
text-spacing-trim: normal;
text-spacing-trim: space-all;
text-spacing-trim: space-first;
text-spacing-trim: trim-start;

/* Global values */
text-spacing-trim: inherit;
text-spacing-trim: initial;
text-spacing-trim: revert;
text-spacing-trim: revert-layer;
text-spacing-trim: unset;

Values

<spacing-trim>

Defines the different spacing trim options. Available values are:

normal

Sets CJK full-width opening punctuation characters to be full-width at the start of each line. Sets CJK full-width closing punctuation characters to be full-width at the end of each line, or half-width if they do not fit on the line before justification. Collapses spacing between punctuation characters.

space-all

All CJK full-width punctuation characters are set to be full-width.

space-first

Behaves as normal, except that CJK full-width opening punctuation characters are set to be full-width at the start of the first line of the text's block container, and the start of every subsequent line coming after an explicit line break such as a newline character.

trim-start

Behaves as normal, except that CJK full-width opening punctuation characters are set to be half-width at the start of each line.

Note: The CSS Text module also defines trim-both, trim-all, and auto values. However, these are not currently implemented in any browser.

Description

The text-spacing-trim property applies spacing/kerning to CJK punctuation characters to produce visually pleasing typography as defined by the Requirements for Japanese text layout (JLREQ) and the Requirements for Chinese text layout (CLREQ).

Many CJK punctuation characters include glyph-internal spacing. For example, the CJK full stop and the CJK close parenthesis usually have glyph-internal spacing on their right-hand side, to give them a constant advance measure consistent with other ideographic characters. However, when they appear in a row, the glyph-internal spacing can become excessive.

text-spacing-trim can be used to adjust such excessive spacing between adjacent characters (kerning) and at the start or end of text lines. Generally speaking:

• If a full-width punctuation character is set to be full-width, it has internal spacing set on both sides and is the full width of an ideograph.
• If a full-width punctuation character is set to be half-width, it has internal spacing set on one side only, and its other side is flush to the start (in the case of opening punctuation characters) or end (in the case of closing punctuation characters). Half-width characters are typically half the width of an ideograph.

Full-width punctuation collapsing

When pairs of punctuation characters are adjacent to one another, the space between them is collapsed according to the following rules:

• Set a full-width opening punctuation character to half-width if the previous character is a fullwidth opening punctuation character, a fullwidth middle dot, an ideographic space (U+3000), a fullwidth closing punctuation character of an equivalent or larger font size, or a character belonging to Unicode general category "Open punctuation" Ps. Otherwise, set it to full-width.
• Set a full-width closing punctuation character to half-width if the next character is a fullwidth closing punctuation character, a fullwidth middle dot, an ideographic space (U+3000), a fullwidth opening punctuation character with larger font size, or a character belonging to Unicode general category "Close punctuation" (Pe). Otherwise, set it to full-width.

Formal definition

Formal syntax

text-spacing-trim = 
  <spacing-trim>  |
  auto            

<spacing-trim> = 
  space-all    |
  normal       |
  space-first  |
  trim-start   |
  trim-both    |
  trim-all     

Examples

text-spacing-trim value comparison

This example compares the effect of four different text-spacing-trim properties, applying them to four identical paragraphs so you can see the visual differences between each one.

HTML

<main>
  <div id="normal">
    <h2>normal</h2>
    <p>
      <br />
      
    </p>
  </div>
  <div id="space-all">
    <h2>space-all</h2>
    <p>
      <br />
      
    </p>
  </div>
  <div id="space-first">
    <h2>space-first</h2>
    <p>
      <br />
      
    </p>
  </div>
  <div id="trim-start">
    <h2>trim-start</h2>
    <p>
      <br />
      
    </p>
  </div>
</main>

CSS

main {
  font-family:
    "Yu Gothic", "YuGothic", "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", sans-serif;
  display: grid;
  gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  width: 70%;
  margin: 0 auto;
}
h2 {
  font-size: 80%;
  margin: 0;
}
p {
  font-size: 20px;
  border: 1px solid blue;
  margin: 0;
}
#normal {
  text-spacing-trim: normal;
  grid-column: 1;
  grid-row: 1;
}
#space-all {
  text-spacing-trim: space-all;
  grid-column: 2;
  grid-row: 1;
}
#space-first {
  text-spacing-trim: space-first;
  grid-column: 1;
  grid-row: 2;
}
#trim-start {
  text-spacing-trim: trim-start;
  grid-column: 2;
  grid-row: 2;
}

Result

Specifications

Browser compatibility

See also

• text-autospace
• ic and ric units
• CSS text module