Die Zukunft

Noch nicht ver­füg­bar, aber in Zukunft Dank CSS3 möglich…

Der aktu­elle Ent­wurf von CSS3 ent­hält einige inter­es­sante Ände­run­gen, wel­che in zukünf­tige Browser-Versionen Ein­zug hal­ten wer­den. Beson­ders die neuen Mög­lich­kei­ten des Texteffekte-Moduls sind für den Umgang mit Text in Zukunft interessant.

Neue Unter­strei­chun­gen

CSS3 bietet erweiterte Unterstreichungen.

Mit CSS3 wird eine neue Form von Text Unter– und Durch­strei­chun­gen ein­ge­führt, die erheb­lich mehr Mög­lich­kei­ten bietet.

.underline {
   text-decoration-line: underline;
   text-decoration-color: #f00;
   text-decoration-style: wave;
   text-decoration-skip: ink;
   text-underline-position: alphabetic;
}

Die genauen ange­dach­ten Mög­lich­kei­ten kön­nen oben ste­hen­dem Link ent­nom­men wer­den. Beson­ders inter­es­sant ist hier jedoch text-decoration-skip, mit der man ange­ben kann, wel­che Ele­mente nicht unter­stri­chen wer­den sol­len. Mit ink z. B. wer­den Unter­län­gen von Zei­chen nicht mehr durch­stri­chen, son­dern die Linie für diese Gly­phe unterbrochen.

Mit text-underline-position lässt sich die Posi­tion der Linie genau fest­le­gen. Mit alpha­be­tic ori­en­tiert sich die Linie an der Schrift-Grundlinie.

Bis­her unter­stützt noch kein Brow­ser diese Eigen­schaft. Falls doch, sollte eine Linie im Bei­spiel links erscheinen.

hyphenate

Mit die­ser Eigen­schaft lässt sich fest­le­gen, ob der Brow­ser inner­halb von Wör­tern umbre­chen darf. Es geht also um auto­ma­ti­sche Sil­ben­tren­nung über einen Divis (Trennstrich).

p {
   hyphenate: none; /* Standard */
}

p {
   hyphenate: auto;
}

Wird der­zeit von kei­nem Brow­ser unter­stützt und wird auch wohl noch ein wenig auf sich war­ten lassen.

text-align-last

Die Eigen­schaft defi­niert, wie die letzte Zeile in einem Text­block dar­ge­stellt wird, wenn der Text­block per CSS als Block­satz defi­niert ist (text-align: justify;).

p {
   text-align: justify;
   text-align-last: start; /* Standard */
}

Wei­tere mög­li­che Werte sind: end, left, right, cen­ter und justify.

Wird der­zeit von kei­nem Brow­ser unterstützt.

text-justify

Diese Eigen­schaft gilt auch nur für Text­blö­cke im Block­satz und defi­niert wie der Block­satz gesetzt wird.

p {
   text-align: justify;
   text-justify: auto; /* Standard */
}

Mt der Ein­stel­lung auto wird dem Brow­ser die Wahl der Methode zur Gene­rie­rung des Block­sat­zes über­las­sen. Wei­tere mög­li­che Methoden sind:

  1. inter-word: Der Block­satz wird durch Ver­än­de­rung der Wort­zwi­schen­räume erreicht.
  2. inter-ideograph: —
  3. inter-character: Setzt bei Gra­phe­men an und ver­än­dert hier die Lauf­weite um den Block­satz zu erzeugen.
  4. inter-cluster: —
  5. kashida: —
  6. size: Ver­än­dert die Schrift­größe einer Zeile, so dass die ganze Zeile gefüllt wird.

Wird noch von kei­nem Brow­ser unterstützt.

text-wrap

Über text-wrap wird defi­niert, wie Zei­len­um­brü­che im Text­fluss vor­ge­nom­men wer­den. Dabei ori­en­tiert sich die Eigen­schaft an der Inter­punk­tion, bricht Zei­len also bevor­zugt nach einem Punkt um.

p {
   text-wrap: normal;
}

Mög­li­che Werte sind nor­mal (Text kann an jeder Stelle unter­bro­chen wer­den), none (Text wird nicht umge­bro­chen und kann über das Ele­ment hin­aus­lau­fen), unre­stric­ted (Text kann zwi­schen Sil­ben­grup­pen umbre­chen, ohne Sil­ben­tren­nung) und sup­p­ress (Umbrü­che inner­halb einer Zeile wer­den unter­drückt, nach der Zeile aber gestattet).

white-space-collapse

Gibt an, wie mit Leer­raum (Leer­zei­chen, Tabulator-Zeichen und Zei­len­um­brü­che) inner­halb von Ele­men­ten umgegangen wird.

p {
   white-space-collapse: collapse; /* Standard */
}

Mit der Ein­stel­lung col­lapse wird Leer­raum im Quell­text bei der Aus­gabe auf jeweils ein Zei­chen redu­ziert. Dane­ben gibt es noch wei­tere Möglichkeiten:

  1. pre­serve: Der Leer­raum bleibt voll­stän­dig erhalten
  2. preserve-breaks: Auf­ein­an­der fol­gende Leer– und Tabulator-Zeichen wer­den auf ein Zei­chen redu­ziert, Zei­len­um­brü­che blei­ben jedoch erhalten.
  3. dis­card: Jeg­li­cher Leer­raum wird gelöscht.

Wei­tere Infor­ma­tio­nen wie mit Leer­raum ver­fah­ren wird, erhält man direkt beim W3C.

word-break

Über diese Eigen­schaf­ten las­sen sich Beschrän­kun­gen für den Zei­len­um­bruch bei chi­ne­si­schen, japa­ni­schen und korea­ni­schen Schrif­ten fest­le­gen. Wei­ter Infor­ma­tio­nen beim W3C.

VG Wort

{ be creative }

css gallery