text-spacing-trim

<spacing-trim>

Definiert die verschiedenen Abstandsoptionen. Verfügbare Werte sind:

normal

Setzt CJK Vollbreite-Eröffnungsinterpunktionszeichen auf Vollbreite am Anfang jeder Zeile. Setzt CJK Vollbreite-Schlussinterpunktionszeichen auf Vollbreite am Ende jeder Zeile oder auf Halbbreite, wenn sie vor der Ausrichtung nicht in die Zeile passen. Kollabiert 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öffnungsinterpunktionszeichen am Anfang der ersten Zeile des Textblockcontainers und am Anfang jeder folgenden Zeile nach einem expliziten Zeilenumbruch wie einem Zeilenumbruchzeichen auf Vollbreite gesetzt werden.

trim-start

Verhält sich wie normal, außer dass CJK Vollbreite-Eröffnungsinterpunktionszeichen am Anfang jeder Zeile auf Halbbreite 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.

Die Eigenschaft text-spacing-trim wendet Abstände/Kerning auf CJK-Interpunktionszeichen an, um eine optisch ansprechende Typografie zu erzeugen, wie sie in den Anforderungen für das japanische Textlayout (JLREQ) und den Anforderungen für das chinesische Textlayout (CLREQ) definiert sind.

Viele CJK-Interpunktionszeichen enthalten glypheninternen Abstand. Zum Beispiel haben der CJK-Punkt und die CJK-Schließklammer normalerweise auf der rechten Seite einen glypheninternen Abstand, um ihnen ein konstantes Vormaß 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 solchen übermäßigen Abstand zwischen benachbarten Zeichen (Kerning) sowie am Anfang oder Ende von Textzeilen anzupassen. Allgemein gesprochen:

• Wenn ein Vollbreite-Interpunktionszeichen auf Vollbreite gesetzt ist, hat es auf beiden Seiten einen internen Abstand und ist die volle Breite eines Ideogramms.
• Wenn ein Vollbreite-Interpunktionszeichen auf Halbbreite gesetzt ist, hat es nur auf einer Seite einen internen Abstand, und die andere Seite ist bündig zum Anfang (im Fall von Eröffnungsinterpunktionszeichen) oder Ende (im Fall von Schlussinterpunktionszeichen). Halbbreite Zeichen sind typischerweise halb so breit wie ein Ideogramm.

Wenn Paare von Interpunktionszeichen benachbart zueinander stehen, wird der Abstand zwischen ihnen gemäß den folgenden Regeln kollabiert:

• Setzen Sie ein Vollbreite-Eröffnungsinterpunktionszeichen auf Halbbreite, wenn das vorherige Zeichen ein Vollbreite-Eröffnungsinterpunktionszeichen, ein Vollbreite-Mittelpunkt, ein ideografisches Leerzeichen (U+3000), ein Vollbreite-Schlussinterpunktionszeichen mit einer gleichwertigen oder größeren Schriftgröße oder ein Zeichen ist, das zur Unicode-Allgemeinkategorie "Open punctuation" Ps gehört. Andernfalls setzen Sie es auf Vollbreite.
• Setzen Sie ein Vollbreite-Schlussinterpunktionszeichen auf Halbbreite, wenn das nächste Zeichen ein Vollbreite-Schlussinterpunktionszeichen, ein Vollbreite-Mittelpunkt, ein ideografisches Leerzeichen (U+3000), ein Vollbreite-Eröffnungsinterpunktionszeichen mit größerer Schriftgröße oder ein Zeichen ist, das zur Unicode-Allgemeinkategorie "Close punctuation" (Pe) gehört. Andernfalls setzen Sie es auf Vollbreite.

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

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

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

• ic und ric Einheiten
• CSS Text Modul