Textformatierung

Nachdem Sie jetzt die Struktur von CSS-Definitionen, Farben und andere Werte kennen gelernt haben, beschäftigen sich die nächsten Kapitel mit den Texteigenschaften, wie z.B. Texteinrückung, Textpositionierung und Zeilenabstände.

Text einrücken (text-indent)

In Büchern, aber auch auf Webseiten haben Sie es bestimmt schon einmal gesehen: die erste Zeile eines Textes oder Absatzes wird ein Stück eingerückt. In CSS gibt es zu diesem Zweck den Befehl text-indent:

Mit folgender Definition rücken Sie die erste Zeile eines jeden Absatzes um 0,6 cm ein:

P { text-indent: 0.6cm; }

Sie können dem Wert für text-indent auch einen negativen Wert geben, in diesem Fall wird die ersten Zeile statt nach rechts eingerückt nach links verschoben:

P { text-indent: -0.5cm; }

Dabei müssen Sie beachten, dass der Text nicht aus dem sichtbaren Rahmen fällt. Um dem entgegen zu wirken, können Sie dem Absatz zusätzlich einen Abstand vom gleichen Wert nach links geben.

P {
padding-left: 0.5cm;
text-indent: -0.5cm;
}

Neben absoluten Angaben können Sie auch prozentuale Angaben (sowohl negative wie auch positive) machen. Der Prozentwert bezieht sich dabei auf die gesamte Breite des Elements.

DIV { width: 300px; } P { text-indent: 10%; }

Der Absatz wird somit 30 Pixel (=10% von 300 Pixel) eingerückt.

Textpositionierung (text-align)

Mit dem Befehl text-align können Sie Elemente relativ zu anderen Elementen positionieren.

P.links { text-align: left; }
P.zentriert { text-align: center; }
P.rechts { text-align: right; }
P.blocksatz { text-align: justify; }

Obige Definitionen ergeben folgende Positionierungen der einzelnen Absätze:

Mit Hilfe des Befehls text-align können Sie alle Block-level Elemente ausrichten.

White-Space

Normalerweise beachten Browser mehr als ein Leerzeichen zwischen zwei Worten nicht, ebenso wie Absätze, die Sie im Quellcode gemacht haben. Folgender Quellcode würde im Browser als eine Zeile erscheinen:

<P>Lorem ipsum dolor          sit amet,
consectetueradipiscing elit.</P>

Mit Hilfe des Befehls white-space können Sie dieses Verhalten verändern.

P { white-space: pre; }

<P>Lorem ipsum dolor          sit amet,
consectetueradipiscing elit.</P>

Der Wert nowrap verhindert jeglichen Zeilenumbruch in seinem Gültigkeitsbereich, so dass der Text nur bei einem erzwungenen Zeilenumbruch umgebrochen wird.

Nützlich ist diese Angabe z.B. bei der Definition von Tabelle:

TD { white-space: nowrap; }

<TABLE>
<TR>
<TD>Ein längerer Text der nicht umgebrochen wird.</TD>
<TD>Ein längerer Text der nicht umgebrochen wird.</TD>
<TD>Ein längerer Text der nicht umgebrochen wird.</TD>
<TD>Ein längerer Text der nicht umgebrochen wird.</TD>
</TR>
</TABLE>

So wird verhindert, dass der Text automatisch auf mehrere Zeilen verteilt wird.

Leider unterstützt der Internet Explorer diese Funktion nicht; der Browser von Netscape erst ab Version 6.

Zeilenhöhe (line-height)

Mit Hilfe von CSS können Sie die Zeilenhöhe bestimmen, was mit einfachem HTML nicht möglich wäre. Für diese Eigenschaft ist der Befehl line-height zuständig:

Bemerkung: Prozentwerte beziehen sich auf die Schriftgröße des Elementes

Die Zeilenhöhe gibt den Abstand zwischen der Ober- und der Unterseite einer Schriftart an. Um jede Zeile gibt es einen unsichtbaren Rahmen. Wenn der Wert der Zeilenhöhe vergrößert wird, wird dieser Wert halbiert und der Rahmen oben und unten um den gleichen Anteil vergrößert.

P.eins { line-height: 10px; }
P.zwei { font-size: 12pt; line-height: 150%; }
P.drei { line-height: 10pt; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>
<P class="eins">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>
<P class="zwei">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>
<P class="drei">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Da die Zeilenhöhe vererbt wird, können sich – wie im folgenden Beispiel – Probleme ergeben:

BODY { font-size: 10pt; }
DIV { line-height: 12pt; }
P { font-size: 18pt; }

<DIV>
<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>
</DIV>

Die Zeilen im obigen Beispiel überlappen ein wenig, was durch die Angabe einer Zahl bei der Zeilenhöhe verhindert wird. Diese Zahl stellt einen Skalierungsfaktor dar.

BODY { font-size: 10pt; }
DIV { line-height: 1.5; }
P { font-size: 18pt; }

<DIV>
<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>
</DIV>

Wort-Abstand (word-spacing)

Mit Hilfe des Befehls word-spacing lässt sich der Abstand zwischen den Worten eines Textes entweder verkleinern (durch eine negative Längenangabe) oder vergrößern (durch eine positive Längenangabe).

Folgendes Beispiel zeigt, wie der Wortabstand um den Wert 0,3 em vergrößert werden kann.

P { word-spacing: 0.3em; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy.</P>

Ebenso kann der Wortabstand verkleinert werden:

P { word-spacing: -0.5em; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy.</P>

Sowohl mit einer zu starken Verkleinerung als auch Vergrößerung kann der Text unlesbar gemacht werden.

Zeichen-Abstand (letter-spacing)

Der Befehl letter-spacing ist dem Wortabstand sehr ähnlich; beim Zeichenabstand wird der Abstand jedes einzelnen Zeichens eines Textes beeinflusst.

P { letter-spacing: normal; }
P.weit { letter-spacing: 0.3em; }
P.eng { letter-spacing: -0.3em; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy.</P>
<P class="weit">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy.</P>
<P class="eng">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy.</P>

Wie beim Wortabstand kann man so Texte unlesbar machen.

Vertikale Zentrierung (vertical-align)

Neben der im vorletzten Kapitel erläuterten (horizontalen) Zentrierung von Elementen gibt es auch die Möglichkeit Elemente vertikal mit Hilfe des Befehls vertical-align auszurichten. Die vertikale Zentrierung ist mit reinem HTML nur beschränkt möglich. So lassen sich z.B. Texte mit Hilfe der Tags ^{und _{tiefer bzw. höher stellen. Bei einem Bild lässt sich mit der Angabe des Attributes die vertikale Ausrichtung beeinflussen.}}

^{_{Der Befehl vertical-align bezieht sich nur auf Inline Elemente, d.h. der Befehl lässt sich z.B. nicht dazu benutzen, um den Inhalt von Tabellenzellen vertikal auszurichten.}}

Die nachstehenden Beispiele zeigen die Anwendung der verschiedenen Werte für den Befehl:

baseline

Die Grundlinie eines Elementes wird mit dieser Angabe an der Grundlinie des Elternelementes ausgerichtet. Dabei bewirkt dieser Standardwert nur etwas bei solchen Elementen, die vom Browser standardmäßig anders ausgerichtet werden.

Bei Elementen die keine eigene Grundlinie haben (z.B. Grafiken), wird das untere Ende des Elementes an der Grundlinie des Elternelementes ausgerichtet.

IMG { vertical-align: baseline; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, <IMG src="bild.gif"> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

sub und super

Bei der Angabe vertical-align: sub wird die Grundlinie des Elementes in einem bestimmten Verhältnis zur Grundlinie des Elternelementes erniedrigt.

Bei einem Text sieht das so aus:

.erniedrigt { vertical-align: sub; }

<P>Lorem ipsum dolor sit amet, <SPAN class="erniedrigt">consectetueradipiscing</SPAN> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Bei der Angabe vertical-align: super funktioniert dies genauso, im Gegensatz zu sub wird der Text oder das Element erhöht.

.erhoeht { vertical-align: super; }

<P>Lorem ipsum dolor sit amet, <SPAN class="erhoeht">consectetueradipiscing</SPAN> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

bottom und text-bottom

Die Angabe vertical-align: bottom richtet ein Element am unteren Ende aus.

IMG.unten { vertical-align: bottom; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, <IMG align="middle" src="bild1.gif"> sed diam <IMG class="unten" src="bild2.gif"> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

top und text-top

Genauso wie mit der Angabe vertical-align: bottom verfährt man mit der Angabe vertical-align: top bzw. vertical-align: text-top.

middle

vertical-align: middle zentriert ein Element anhand seines (vertikalen) Mittelpunktes genau in der Mitte zum Elternelement.

Prozentwerte

Mit Hilfe der Angabe von Prozenten lassen sich Elemente in Relation zu ihren jeweiligen Elternelementen erhöhen (durch einen positiven Prozentwert) oder erniedrigen (durch einen negativen Prozentwert).

I { vertical-align: 75%; }

<P>Lorem ipsum dolor sit amet, <I>consectetueradipiscing</I> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Veränderung der Groß- und Kleinschreibung (text-transform)

Der Befehl text-transform verändert die Groß- und Kleinschreibung von (Text-)Elementen.

Die ersten beiden Werte (uppercase und lowercase) verändern in einem Textelement die Groß- (uppercase) bzw. Kleinschreibung (lowercase) aller Zeichen.

Der Wert capitalize verändert dagegen nur den Anfangsbuchstaben jedes einzelnen Wortes. Beim Standardwert none wird der Text wie im Quellcode angegeben dargestellt.

H3 { text-transform: capitalize; }
B { text-transform: uppercase; }
P.kleinschreibung { text-transform: lowercase; }

<H3>Eine überschrift miT deM capitalize-wert</H3>

<P class="kleinschreibung">Lorem ipsum dolor sit amet, <B>consectetueradipiscing</B> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Textauszeichnung (text-decoration)

Mit dem Befehl text-decoration können Sie Texte auf verschiedenste Weisen auszeichnen.

Der Wert underline bewirkt, dass der Text unterstrichen wird; overline erzeugt eine Überstreichung. line-through streicht das Element durch und blink lässt – wie der Name schon sagt – den Text blinken.

P.nichts { text-decoration: none; }
P.unterstrichen { text-decoration: underline; }
P.ueberstrichen { text-decoration: overline; }
P.durchgestrichen { text-decoration: line-through; }
P.blinken { text-decoration: blink; }

<P class="nichts">Lorem ipsum dolor sit amet, consectetueradipiscing elit.</P>
<P class="unterstrichen">Lorem ipsum dolor sit amet, consectetueradipiscing elit.</P>
<P class="ueberstrichen">Lorem ipsum dolor sit amet, consectetueradipiscing elit.</P>
<P class="durchgestrichen">Lorem ipsum dolor sit amet, consectetueradipiscing elit.</P>
<P class="blink">Lorem ipsum dolor sit amet, consectetueradipiscing elit.</P>

Die meisten Werte werden von den heutigen Browsern unterstützt, lediglich der Wert blink wird oftmals nicht richtig dargestellt.

Mit dem Wert text-decoration: none können Sie bei Elementen Standardformatierungen entfernen, z.B. die Unterstreichung von Links:

A:link { text-decoration: none; }

Sie können dem Befehl aber nicht nur einzelne Werte geben, mehrere sind ebenfalls erlaubt:

H3 { text-decoration: underline overline; }

<H3>Eine über- und unterstrichene Überschrift</H3>