CSS word-spacing – Referenz, Beispiel und Labor

stylesheet.css · word-spacing

.probe {
  word-spacing: 8px;
}

Der Webautor schreibt einen Absatz, der Browser setzt ihn nach den Regeln des Stylesheets. Groß- und Kleinschreibung, Abstand, Farbe und Schnitt hängen an genau einer Eigenschaft.

berechneter Wertword-spacing: 8px

Box-Breite–

Box-Höhe–

Erläuterungen

Diese Eigenschaft ist eine der Spationierungs- Eigenschaften in CSS, d. h. sie dient der Bearbeitung der Abstände zwischen Wörtern oder Zeichen. Word-spacing bezieht sich auf den Wortabstand eines Textes, das ist die Länge des Raumes zwischen einzelnen Worten.

Die Auswirkungen dieser Eigenschaft sind von verschiedenen Faktoren abhängig:

Vom Wert der Eigenschaft text-align:
im Fall von text-align:justify ist es dem Browser erlaubt, die Inline- Boxes (d. h. die einzelnen Worte) sowohl zu strecken als auch seitlich zu verschieben. Dadurch kann der Raum zwischen Worten von Zeile zu Zeile unterschiedlich sein.
Von der Schriftart:
nur wenn font-family mit monospace deklariert wurde, ist der Leerraum zwischen Worten genau 1em breit, bei allen anderen Schriftarten ist es weniger.
Vom Benutzerprogramm:
Zwischen den modernen Browsern variiert der Wortabstand im Bereich von 0.3em und 0.5em.

Deshalb sind Webautoren angehalten, Räume zwischen Textzeichen und Worten durch relative Längenangaben zu definieren. Dadurch bleiben die Leerräume von der Schriftgröße abhängig und die Homogenität des Textes bleibt erhalten.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'word-spacing'
normal | <length> | inherit

normal (Ausgangswert): Keine Änderung des Wortzwischenraumes.
<length>: Absolute oder relative Längenangabe, um die der normale Wortzwischenraum verändert wird. Hier wird also nicht der gewünschte Abstand direkt angegeben, sondern ein Wert, der zu dem bereits vorhandenen Abstand hinzuaddiert wird. Negative Werte bewirken eine Verkürzung des Zwischenraumes. Hier ist Vorsicht geboten, da nicht alle Browser gleich reagieren. Die Spezifikation macht keine Angaben, ob Überlappungen benachbarter Worte erlaubt sind oder nicht.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

P.teaser { word-spacing:0.5em; }

Browserunterstützung

Die Eigenschaft word-spacing wird von allen modernen Browsern unterstützt, mit einer Besonderheit:

Opera 7, 8: Deklariert man einen negativen Wert, der größer als der normale Raum zwischen Worten ist, würden sich theoretisch benachbarte Worte überlappen. Opera bis zur Version 7.x fügt einfach einen Zeilenvorschub ein, sodass jedes Wort am Beginn einer neuen Zeile steht.
Von Version 8 an werden in diesem Fall die Worte ohne Abstand hinter einander gesetzt. Dies widerspricht nicht der Spezifikation.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

letter-spacing, text-align

Der Sonderfall Blocksatz

Die Seite nennt die Abhängigkeit von der Textausrichtung an erster Stelle, und sie ist der wichtigste Punkt. Im Blocksatz verteilt das Anwenderprogramm den Zeilenrest auf die Wortzwischenräume, und diese Verteilung ist von Zeile zu Zeile verschieden.

Eine feste Angabe für den Wortabstand ist dort deshalb kein fester Abstand, sondern ein Zuschlag auf einen Wert, der ohnehin schwankt. Sie verändert die Grundlage der Verteilung, nicht das Ergebnis. In den übrigen Ausrichtungen ist der Wortzwischenraum dagegen konstant, und die Angabe wirkt unmittelbar.

Wie bei der Laufweite gilt auch hier: normal ist nicht null, sondern der Zwischenraum, den die Schrift vorsieht, und der Wert wird hinzugerechnet.

Was als Wort gilt

Die Eigenschaft wirkt auf das Leerzeichen zwischen Wörtern. Was ein Wort ist, entscheidet dabei nicht eine sprachliche Analyse, sondern das Vorhandensein eines Leerzeichens. In Schriftsystemen, die ohne Wortzwischenräume auskommen, hat die Angabe deshalb nichts, woran sie ansetzen könnte.

Ebenso wenig wirkt sie auf geschützte Leerzeichen in allen Fällen gleich, und sie wirkt nicht auf Zwischenräume, die durch Auszeichnung entstehen. Wer den Abstand zwischen zwei nebeneinanderstehenden Elementen verändern will, braucht Außenabstände und nicht diese Eigenschaft.

In der Praxis wird sie selten gebraucht. Sinnvolle Anwendungen sind eng gesetzte Überschriften, bei denen der Wortzwischenraum im Verhältnis zur vergrößerten Laufweite zu klein wirkt, und Textzeilen, die bewusst als Gestaltungselement auseinandergezogen werden.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: normal
Berechneter Wert: Wert 0 für normal, sonst absolute Länge
Vererbung: Ja
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft word-spacing