text-spacing-trim
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The text-spacing-trim
CSS property controls the internal spacing set on Chinese/Japanese/Korean (CJK) punctuation characters between adjacent characters (kerning) and at the start or end of text lines.
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
, andauto
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.
Note:
To avoid the risk of excessive kerning, fonts must have the OpenType Alternate Half Widths (halt
) feature, the Contextual Half-width Spacing (chws
) feature, or both. If the font doesn't have either feature, text-spacing-trim
is disabled.
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
Initial value | normal |
---|---|
Applies to | text elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
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
Specification |
---|
CSS Text Module Level 4 # text-spacing-trim-property |
Browser compatibility
BCD tables only load in the browser