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;

Werte

<spacing-trim>

Definiert die verschiedenen Optionen zur Abstandsreduktion. Verfügbare Werte sind:

normal

Setzt CJK-Vollbreite-Eröffnungspunkte auf Vollbreite am Anfang jeder Zeile. Setzt CJK-Vollbreite-Schlusspunkte auf Vollbreite am Ende jeder Zeile oder auf halbe Breite, wenn sie nicht in die Zeile vor der Anpassung passen. Reduziert den Abstand zwischen Interpunktionszeichen.

space-all

Alle CJK-Vollbreite-Interpunktionszeichen werden auf Vollbreite gesetzt.

space-first

Verhält sich wie normal, außer dass CJK-Vollbreite-Eröffnungspunkte auf Vollbreite am Anfang der ersten Zeile des Textblocks und am Anfang jeder weiteren Zeile nach einem expliziten Zeilenumbruch wie einem Zeilenendzeichen gesetzt werden.

trim-start

Verhält sich wie normal, außer dass CJK-Vollbreite-Eröffnungspunkte auf halbe Breite am Anfang jeder Zeile gesetzt werden.

Hinweis: Das CSS Text Modul definiert auch die Werte trim-both, trim-all und auto. Diese sind jedoch derzeit in keinem Browser implementiert.

Beschreibung

Die text-spacing-trim Eigenschaft wendet Abstand/Kerning auf CJK-Interpunktionszeichen an, um optisch 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 interne Abstände im Glyphen. Beispielsweise haben der CJK-Punkt und die CJK-Schließungsklammer normalerweise interne Abstände auf ihrer rechten Seite, um ein konsistentes Vorrücken mit anderen ideografischen Zeichen zu gewährleisten. Wenn sie jedoch in einer Reihe erscheinen, kann der interne Abstand übermäßig werden.

text-spacing-trim kann verwendet werden, um solche übermäßigen Abstände zwischen benachbarten Zeichen (Kerning) und am Anfang oder Ende von Textzeilen anzupassen. Im Allgemeinen gilt:

• Wenn ein Vollbreite-Interpunktionszeichen auf Vollbreite gesetzt wird, hat es interne Abstände auf beiden Seiten und ist in der vollen Breite eines Ideogramms.
• Wenn ein Vollbreite-Interpunktionszeichen auf halbe Breite gesetzt wird, hat es interne Abstände nur auf einer Seite, und seine andere Seite ist bündig zu Beginn (bei Eröffnungspunkten) oder Ende (bei Schlusspunkten). Halbbildbreite-Zeichen sind typischerweise halb so breit wie ein Ideogramm.

Reduzierung von Vollbreite-Interpunktion

Wenn Paare von Interpunktionszeichen nebeneinander stehen, wird der Abstand zwischen ihnen nach den folgenden Regeln reduziert:

• Setzen Sie ein Vollbreite-Eröffnungszeichen auf halbe Breite, wenn das vorherige Zeichen ein Vollbreite-Eröffnungszeichen, ein Vollbreite-Mittelpunkte, ein ideografischer Raum (U+3000), ein Vollbreite-Schlusspunkt mit gleicher oder größerer Schriftgröße oder ein Zeichen, das zur Unicode-allgemeinen Kategorie "Eröffnende Interpunktion" Ps gehört, ist. Andernfalls setzen Sie es auf Vollbreite.
• Setzen Sie ein Vollbreite-Schlusszeichen auf halbe Breite, wenn das nächste Zeichen ein Vollbreite-Schlusszeichen, ein Vollbreite-Mittelpunkte, ein ideografischer Raum (U+3000), ein Vollbreite-Eröffnungszeichen mit größerer Schriftgröße oder ein Zeichen, das zur Unicode-allgemeinen Kategorie "Schließende Interpunktion" (Pe) gehört, ist. Andernfalls setzen Sie es auf Vollbreite.

Formale Definition

Formale Syntax

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

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

Beispiele

Vergleich der text-spacing-trim Werte

Dieses Beispiel vergleicht die Wirkung von vier verschiedenen text-spacing-trim Eigenschaften, indem sie auf vier identische Absätze angewendet werden, sodass Sie die visuellen Unterschiede zwischen jedem 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

Browser-Kompatibilität

Siehe auch

• text-autospace
• ic und ric Einheiten
• CSS Text Modul