text-spacing-trim

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 das Abstands-Trimming. Verfügbare Werte sind:

normal

Setzt CJK-Vollbreite-öffnende Satzzeichen am Anfang jeder Zeile auf Vollbreite. Setzt CJK-Vollbreite-schließende Satzzeichen am Ende jeder Zeile auf Vollbreite oder auf halbe Breite, wenn sie nicht vor der Ausrichtung in die Zeile passen. Kollabiert Abstände zwischen Satzzeichen.

space-all

Alle CJK-Vollbreite-Satzzeichen werden auf Vollbreite gesetzt.

space-first

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

trim-start

Verhält sich wie normal, außer dass CJK-Vollbreite-öffnende Satzzeichen am Anfang jeder Zeile auf halbe Breite 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 Abstände/Kerning auf CJK-Satzzeichen an, um eine visuell ansprechende Typografie gemäß den Anforderungen für das japanische Textlayout (JLREQ) und den Anforderungen für das chinesische Textlayout (CLREQ) zu erzeugen.

Viele CJK-Satzzeichen enthalten glypheninterne Abstände. Beispielsweise haben das CJK-Punkt- und das CJK-Schließende Klammerzeichen normalerweise glypheninterne Abstände auf ihrer rechten Seite, um ihnen ein konstantes advance measure zu geben, das mit anderen ideografischen Zeichen übereinstimmt. Wenn sie jedoch in einer Reihe erscheinen, kann der glypheninterne 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 zu ajustieren. Allgemein gesagt:

• Wenn ein Vollbreite-Satzzeichen auf Vollbreite gesetzt ist, hat es interne Abstände auf beiden Seiten und ist die volle Breite eines Ideogramms.
• Wenn ein Vollbreite-Satzzeichen auf halbe Breite gesetzt ist, hat es interne Abstände nur auf einer Seite, und seine andere Seite liegt bündig mit dem Anfang (im Fall von öffnenden Satzzeichen) oder dem Ende (im Fall von schließenden Satzzeichen). Halbbreitenzeichen sind typischerweise die halbe Breite eines Ideogramms.

Kollabieren von Vollbreite-Satzzeichen

Wenn Paare von Satzzeichen einander benachbart sind, wird der Raum zwischen ihnen gemäß den folgenden Regeln kollabiert:

• Setzen Sie ein Vollbreite-öffnendes Satzzeichen auf halbe Breite, wenn das vorherige Zeichen ein Vollbreite-öffnendes Satzzeichen, ein Vollbreite-Mittelpunktsymbol, ein ideografischer Raum (U+3000), ein Vollbreite-schließendes Satzzeichen mit gleicher oder größerer Schriftgröße oder ein Zeichen aus der Unicode-General-Kategorie "Open punctuation" Ps ist. Ansonsten setzen Sie es auf Vollbreite.
• Setzen Sie ein Vollbreite-schließendes Satzzeichen auf halbe Breite, wenn das nächste Zeichen ein Vollbreite-schließendes Satzzeichen, ein Vollbreite-Mittelpunktsymbol, ein ideografischer Raum (U+3000), ein Vollbreite-öffnendes Satzzeichen mit größerer Schriftgröße oder ein Zeichen aus der Unicode-General-Kategorie "Close punctuation" (Pe) ist. Ansonsten 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 visuelle 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