CSS 3: Texteffekte

Artikel vom 24. März 2006 (↻ 21. April 2006), exklusiv für Dr. Web. ISSN 1614-3124, #20. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

Dieser Artikel ist stellenweise veraltet.

Der Entwurf zu CSS 3 beinhaltet jede Menge Änderungen und Neuerungen, wie sie unter anderem bereits der Artikel über CSS der Zukunft skizziert hat und auch exemplarisch anhand der neuen :target-Pseudoklasse veranschaulicht wurde. Dieser Artikel gibt einen kurzen Überblick über die bis dato angedachten Bestandteile des Texteffekte-Moduls. Das Texteffekte-Modul kennt zwar auch alte Bekannte wie text-align und word-spacing, bringt aber vor allem neue Gesichter wie hyphenate, white-space-collapse oder word-break ins Spiel, und diese werden hier knapp umrissen.

Da das Texteffekte-Modul bislang nur als Entwurf vorliegt, sind die beschriebenen Eigenschaften und Werte noch mit Vorsicht zu genießen. Erst wenn der Entwurf Empfehlungs- und damit Spezifikationsstatus erreicht hat (und die ersten bzw. weitere Implementierungen vorliegen), kann mit dem Gezeigten richtig gearbeitet werden.

Inhalt

1. hyphenate
2. text-align-last
3. text-justify
4. text-kashida-space
5. text-wrap
6. white-space-collapse
7. word-break
8. word-wrap
9. Neues von text-align, letter-spacing und word-spacing

hyphenate

Die hyphenate-Eigenschaft definiert, ob der Zeilenumbruch-Algorithmus innerhalb von einzelnen Wörtern umbrechen darf, also Silbentrennung über einen Divis (Trennstrich) vorgenommen wird.

Erlaubte Werte

• none (Standard)
• auto

text-align-last

text-align-last gibt vor, wie die letzte Zeile in einem Textblock bzw. eine vor einem erzwungenen Zeilenumbruch stehende Zeile ausgerichtet wird, wenn text-align mit dem Wert justify (Blocksatz) versehen wurde. Die Bedeutung der erlaubten Werte entspricht der der text-align-Werte (mitsamt der in CSS 3 ergänzten Werte start und end).

Erlaubte Werte

• start (Standard)
• end
• left
• right
• center
• justify

text-justify

Die text-justify-Eigenschaft greift wie text-align-last ebenfalls nur, wenn für die Textausrichtung bereits justify gilt. Über diese Eigenschaft lässt sich bestimmen, wie genau Blocksatz erzielt wird, was unter anderem der internationalen Vielfalt an Schreibsystemen und Schriften Rechnung trägt.

Der Wert inter-word beispielsweise setzt nur beim Platz zwischen einzelnen Wörtern an, um Blocksatz zu erzielen, inter-character hingegen bei Graphemen, während size dafür sorgt, dass die Schriftgröße einer Zeile so angepasst wird, dass die gesamte Zeile ausgefüllt wird. auto überlässt die Berechnung dem User-Agent, in dem Sinne, dass dieser die Balance zwischen Leistungsfähigkeit und Darstellungsqualität zu finden sucht.

Erlaubte Werte

• auto (Standard)
• inter-word
• inter-ideograph
• inter-character
• inter-cluster
• kashida
• size

text-kashida-space

text-kashida-space wurde bislang noch nicht definiert. (Dies ist der Preis für zu argen Spezifikationshunger.)

text-wrap

Die mit hoher Wahrscheinlichkeit ebenfalls kommende text-wrap-Eigenschaft definiert, wie Zeilenumbrüche im Textfluss vollzogen werden. Der Algorithmus orientiert sich dabei an der Interpunktion, da Zeilen in der Regel mit einem Punkt abgeschlossen werden.

So steht zur Auswahl, ob Zeilen an jeder Stelle umbrochen werden können (normal), sie nicht umbrechen und damit potentiell über den umschließenden Container hinauslaufen (none), sie zwischen Silbengruppen umbrechen, wobei »Bruchstellen« vor und nach dem jeweiligen Element Priorität beigemessen wird und keine Silbentrennung stattfindet (unrestricted), oder Umbrüche innerhalb von Zeilen unterdrückt, diese außerhalb von solchen (also nach) aber gestattet werden (suppress).

Erlaubte Werte

• normal (Standard)
• none
• unrestricted
• suppress

Beispiel

Die Absätzen zugeordnete text-wrap: suppress;-Deklaration resultiert bei dem Markup

<p>Erste Zeile. Zweite Zeile. Dritte Zeile.</p>

in der folgenden Darstellung, wenn der Viewport relativ wenig Platz lässt:

Erste Zeile. Zweite Zeile.
Dritte Zeile.

Steht noch weniger Platz zur Verfügung, findet auch dann kein Umbruch innerhalb der Zeilen statt, sondern die hier zweite Zeile »rutscht« ein Stück runter:

Erste Zeile.
Zweite Zeile.
Dritte Zeile.

white-space-collapse

white-space-collapse bestimmt, ob und wie Leerraum (wie Leerzeichen, Tabulator-Zeichen oder Zeilenumbrüche) gehandhabt bzw. »zusammengebrochen« wird. Die übliche Vorgehensweise, dass vorhandener Leerraum auf ein einzelnes Leerzeichen reduziert wird, entspricht dem Standardwert collapse. preserve berücksichtigt Leerraum vollständig, während preserve-breaks mehrere aufeinanderfolgende Leer- und Tabulator-Zeichen wie bei collapse zu einem Zeichen »zusammenfallen« lässt, aber Zeilenumbrüche im Code beachtet, und discard wiederum jeglichen Leerraum löscht. Genaueres wird durch die Leerraum-Verarbeitungsregeln spezifiziert.

Erlaubte Werte

• collapse (Standard)
• preserve
• preserve-breaks
• discard

word-break

Die word-break-Eigenschaft legt fest, was für Zeilenumbruch-Beschränkungen für ein Element gelten. Da alle Werte außer normal, dem Standardwert, mehr für chinesische, japanische und koreanische Schriften (CJK) gelten, werden diese hier nicht näher erläutert.

Erlaubte Werte

• normal (Standard)
• keep-all
• loose
• break-strict
• break-all

word-wrap

Mit word-wrap sieht die CSS-3-Spezifikation eine Eigenschaft vor, die definiert, ob innerhalb eines Wortes umgebrochen werden darf, sofern sonst nicht umgebrochen werden kann, ohne dass Text über die Grenzen seines Elements lappen würde. word-wrap greift dabei auch nur, wenn text-wrap entweder den Wert normal oder suppress hat.

Der Standardwert normal erlaubt Umbrüche nur an generell zulässigen Umbruchpunkten, womit die Eigenschaft in dem Sinne also gar nicht wirklich zum Einsatz kommt. break-word jedoch gestattet das Umbrechen an willkürlicher Stelle, wenn keine geeigneten alternativen Umbruchstellen vorliegen.

Erlaubte Werte

• normal (Standard)
• break-word

Neues von text-align, letter-spacing und word-spacing

Die text-align-Eigenschaft erhält bei derzeitigem Stand die zusätzlichen Werte start, end sowie beliebige Zeichenketten. Für diese Optionen liegen allerdings noch keine Beispiele vor, so dass auch hier eine exakte Erklärung ausbleiben muss. Für letter-spacing und word-spacing ergibt sich, dass deren Werte ab CSS 3 voraussichtlich auch noch in Prozent angegeben werden können.

Über mich

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen. (Sei kritisch, interpretiere wohlwollend und gib Feedback.)