text-spacing-trim
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die text-spacing-trim
-CSS-Eigenschaft steuert den inneren Abstand, der auf chinesische/japanische/koreanische (CJK) Interpunktionszeichen zwischen angrenzenden Zeichen (Kerning) sowie am Anfang oder Ende von Textzeilen angewendet wird.
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;
Werte
<spacing-trim>
-
Definiert die verschiedenen Optionen für den Abstandsschnitt. Verfügbare Werte sind:
normal
-
Setzt CJK volle Breite öffnende Interpunktionszeichen am Anfang jeder Zeile auf volle Breite. Setzt CJK volle Breite schließende Interpunktionszeichen am Ende jeder Zeile auf volle Breite oder halbbreit, wenn sie nicht in die Zeile vor der Justierung passen. Reduziert Abstände zwischen Interpunktionszeichen.
space-all
-
Alle CJK Interpunktionszeichen in voller Breite werden auf volle Breite gesetzt.
space-first
-
Verhält sich wie
normal
, außer dass CJK volle Breite öffnende Interpunktionszeichen am Anfang der ersten Zeile des Textblocks sowie am Anfang jeder nach einem expliziten Zeilenumbruch wie einem Newline-Zeichen folgenden Zeile auf volle Breite gesetzt werden. trim-start
-
Verhält sich wie
normal
, außer dass CJK volle Breite öffnende Interpunktionszeichen am Anfang jeder Zeile auf halbbreit gesetzt werden.
Hinweis: Das CSS Text-Modul definiert auch die Werte
trim-both
,trim-all
undauto
. Diese sind jedoch derzeit in keinem Browser implementiert.
Beschreibung
Die text-spacing-trim
-Eigenschaft wendet Abstand/Kerning auf CJK Interpunktionszeichen an, um eine visuell ansprechende Typografie zu erzeugen, wie sie in den Anforderungen für das Layout japanischer Texte (JLREQ) und den Anforderungen für das Layout chinesischer Texte (CLREQ) definiert sind.
Viele CJK Interpunktionszeichen enthalten Platzierungen innerhalb des Glyphs. Zum Beispiel haben der CJK Punkt und die CJK schließende Klammer normalerweise Platzierungen innerhalb des Glyphs an ihrer rechten Seite, um ihnen eine konstante Vorausmessung zu geben, die mit anderen ideographischen Zeichen konsistent ist. Wenn sie jedoch in einer Reihe auftreten, kann die Platzierung innerhalb des Glyphs übermäßig werden.
text-spacing-trim
kann verwendet werden, um solche übermäßigen Abstände zwischen angrenzenden Zeichen (Kerning) sowie am Anfang oder Ende von Textzeilen anzupassen. Allgemein gesprochen:
- Wenn ein Interpunktionszeichen mit voller Breite auf volle Breite eingestellt ist, hat es interne Abstände auf beiden Seiten und ist in der vollen Breite eines Ideographen.
- Wenn ein Interpunktionszeichen mit voller Breite auf halbbreit eingestellt ist, hat es interne Abstände nur auf einer Seite, und die andere Seite ist bündig mit dem Anfang (bei öffnenden Interpunktionszeichen) oder dem Ende (bei schließenden Interpunktionszeichen). Halbbreite Zeichen sind in der Regel die halbe Breite eines Ideographen.
Hinweis:
Um das Risiko übermäßigen Kernings zu vermeiden, müssen Schriften das OpenType-Feature Alternierende Halbbreiten (halt
), das Kontextuelle Halbbreiten-Spatial-Feature (chws
) oder beide haben. Wenn die Schriftart keines dieser Features hat, ist text-spacing-trim
deaktiviert.
Kollapsen von Interpunktionszeichen in voller Breite
Wenn Paare von Interpunktionszeichen direkt nebeneinander liegen, wird der Raum zwischen ihnen nach den folgenden Regeln reduziert:
- Setzen Sie ein Interpunktionszeichen mit voller Breite am Anfang auf halbbreit, wenn das vorherige Zeichen ein Interpunktionszeichen mit voller Breite, ein Mittelpunktszeichen mit voller Breite, ein ideografisches Leerzeichen (U+3000), ein schließendes Interpunktionszeichen mit voller Breite in gleicher oder größerer Schriftgröße oder ein Zeichen, das zur Unicode-Kategorie "Öffnende Interpunktionszeichen" Ps gehört, ist. Andernfalls setzen Sie es auf volle Breite.
- Setzen Sie ein Interpunktionszeichen mit voller Breite am Ende auf halbbreit, wenn das nächste Zeichen ein schließendes Interpunktionszeichen mit voller Breite, ein Mittelpunktszeichen mit voller Breite, ein ideografisches Leerzeichen (U+3000), ein öffnendes Interpunktionszeichen mit voller Breite in größerer Schriftgröße oder ein Zeichen, das zur Unicode-Kategorie "Schließende Interpunktionszeichen" (Pe) gehört, ist. Andernfalls setzen Sie es auf volle Breite.
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | Textelemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Vergleich von text-spacing-trim
-Werten
Dieses Beispiel vergleicht die Wirkung von vier verschiedenen text-spacing-trim
-Eigenschaften, die auf vier identische Absätze angewendet werden, sodass Sie die visuellen Unterschiede zwischen jedem einzelnen sehen können.
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;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Text Module Level 4 # text-spacing-trim-property |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-spacing-trim | ||||||||||||
normal | ||||||||||||
space-all | ||||||||||||
space-first | ||||||||||||
trim-start |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.