text-spacing-trim

<spacing-trim>

Definiert die verschiedenen Option zum Kürzen des Abstands. Verfügbare Werte sind:

normal

Setzt CJK-Interpunktionszeichen mit voller Breite am Anfang jeder Zeile. Setzt CJK-Interpunktionszeichen mit voller Breite am Ende jeder Zeile oder mit halber Breite, wenn sie nicht in die Zeile vor dem Blocksatz passen. Reduziert Abstände zwischen Interpunktionszeichen.

space-all

Alle CJK-Interpunktionszeichen mit voller Breite werden auf volle Breite gesetzt.

space-first

Verhält sich wie normal, außer dass CJK-Einleitungszeichen mit voller Breite am Anfang der ersten Zeile des Textblocks und am Anfang jeder nachfolgenden Zeile, die nach einem expliziten Zeilenumbruch wie einem Zeilenumbruchzeichen folgt, auf volle Breite gesetzt werden.

trim-start

Verhält sich wie normal, außer dass CJK-Einleitungszeichen mit voller Breite 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.

Die text-spacing-trim-Eigenschaft wendet Abstand/Kerning auf CJK Interpunktionszeichen an, um eine optisch ansprechende Typografie zu erzeugen, wie sie in den Anforderungen an japanisches Textlayout (JLREQ) und den Anforderungen an chinesisches Textlayout (CLREQ) definiert ist.

Viele CJK-Interpunktionszeichen enthalten glypheninternen Abstand. Zum Beispiel haben der CJK-Punkt und die CJK-Schließklammer normalerweise glypheninternen Abstand auf ihrer rechten Seite, um ein konstantes Vorrücken im Einklang mit anderen ideografischen Zeichen zu gewährleisten. Wenn sie jedoch in Folge erscheinen, kann der glypheninterne Abstand zu übermäßig werden.

text-spacing-trim kann verwendet werden, um solchen übermäßigen Abstand zwischen benachbarten Zeichen (Kerning) und am Anfang oder Ende von Textzeilen anzupassen. Allgemein gesagt:

• Wenn ein Interpunktionszeichen mit voller Breite auf volle Breite gesetzt wird, hat es internen Abstand auf beiden Seiten und ist die volle Breite eines Ideogramms.
• Wenn ein Interpunktionszeichen mit voller Breite auf halbe Breite gesetzt wird, hat es internen Abstand nur auf einer Seite, und seine andere Seite ist am Anfang (bei einleitenden Interpunktionszeichen) oder Ende (bei schließenden Interpunktionszeichen) bündig. Zeichen mit halber Breite sind typischerweise halbe Breite eines Ideogramms.

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

• Ein einleitendes Interpunktionszeichen mit voller Breite wird auf halbe Breite gesetzt, wenn das vorherige Zeichen ein einleitendes Interpunktionszeichen mit voller Breite, ein mittlerer Punkt mit voller Breite, ein ideografischer Raum (U+3000), ein schließendes Interpunktionszeichen mit voller Breite in gleicher oder größerer Schriftgröße oder ein Zeichen der Unicode-Allgemeinkategorie "Öffnende Interpunktion" (Ps) ist. Andernfalls wird es auf volle Breite gesetzt.
• Ein schließendes Interpunktionszeichen mit voller Breite wird auf halbe Breite gesetzt, wenn das nächste Zeichen ein schließendes Interpunktionszeichen mit voller Breite, ein mittlerer Punkt mit voller Breite, ein ideografischer Raum (U+3000), ein einleitendes Interpunktionszeichen mit voller Breite in größerer Schriftgröße oder ein Zeichen der Unicode-Allgemeinkategorie "Schließende Interpunktion" (Pe) ist. Andernfalls wird es auf volle Breite gesetzt.

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 von ihnen 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