SELFHTML: CSS Stylesheets / CSS-Eigenschaften / Ausrichtung und Absatzkontrolle

	Ausrichtung und Absatzkontrolle
	Allgemeines zu Ausrichtung und Absatzkontrolle text-indent (Texteinrückung) line-height (Zeilenhöhe) vertical-align (Vertikale Ausrichtung) text-align (Horizontale Ausrichtung) white-space (Textumbruch)

Allgemeines zu Ausrichtung und Absatzkontrolle

Für Textblöcke oder Textabsätze gibt es absatztypische Eigenschaften. Absätze können beispielsweise links- oder rechtsbündig ausgerichtet sein. Bei Tabellenzellen oder anderen Elemente, die eine berechnete oder definierte Höhe haben können und mehr Platz lassen als der Text darin einnimmt, wird häufig vertikale Ausrichtung oben, mittig oder untenbündig erforderlich.

Zu den typischen Eigenschaften der Absatzformatierung gehören ferner die Merkmale Einzug und Zeilenhöhe. Und schließlich auch noch die Angabe, wie der Fließtext innerhalb des Absatzes umgebrochen werden soll: ob gar nicht, automatisch, oder so, wie er im Editor eingegegeben wurde.

text-indent (Texteinrückung)

Sie können für einen mehrzeiligen Fließtext bestimmen, dass die erste Zeile eingerückt wird. Dieses Gestaltungselement ist in Büchern und Zeitschriften sehr verbreitet.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>text-indent</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p style="text-indent:0.5cm;">Dieser Textabsatz hat eine
Texteinr&uuml;ckung von 0.5cm. Texteinr&uuml;ckungen dieser Art sind an
die &Auml;sthetik von B&uuml;chern oder Zeitungen angelehnt, wo
h&auml;ufig mit dieser Formatierung gearbeitet wird. Damit das auch
wirklich sichtbar wird, enth&auml;lt dieser Textabsatz
schlie&szlig;lich noch diesen &uuml;berfl&uuml;ssigen Satz, der
sich aber hoffentlich wenigstens fl&uuml;ssig liest.</p>

<!--usw.-->
</body></html>

Erläuterung:

Mit text-indent: können Sie eine Einrückung für die erste Zeile bestimmen. Erlaubt ist eine numerische Angabe.

Beachten Sie:

Mit einem negativen Wert für text-indent bewirken Sie eine Textausrückung in der ersten Fließtextzeile.

line-height (Zeilenhöhe)

Sie können für Elemente mit viel Fließtext die Zeilenhöhe bestimmen. Diese Angabe ist vor allem in Verbindung mit einer Angabe zur Schriftgröße interessant.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>line-height</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p style="line-height:10.5pt;font-size:9pt;margin-left:20%;margin-right:20%">
Die Zeilenh&ouml;he ist ein altbekanntes DTP-Feature zur Formatierung von
Abs&auml;tzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der
typografischen Wirkung von Text hilfreich. ... </p>

</body></html>

Erläuterung:

Mit line-height: können Sie die Zeilenhöhe bestimmen. Erlaubt ist eine numerische Angabe. Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich dabei auf die Schriftgröße des Elements, für das die Zeilenhöhe bestimmt wird.

Beachten Sie:

Bei erzwungener Zeilenhöhe ist es möglich, dass ein interpretierendes Programm dieser Angabe den Vorrang einräumt und Elemente abschneidet, die höher sind, beispielsweise eine im Fließtext referenzierte Grafik.

vertical-align (vertikale Ausrichtung)

Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpsassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile im Verhältnis zueinander ausrichten.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>vertical-align</title>
<style type="text/css">
.oben    { vertical-align:top; background-color:#CCCCCC; }
.mittig  { vertical-align:middle; background-color:#DDDDDD; }
.unten   { vertical-align:bottom; background-color:#EEEEEE; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<table border="1"><tr>
<td height="200" class="oben"><b>Text oben</b></td>
<td height="200" class="mittig"><b>Text mittig</b></td>
<td height="200" class="unten"><b>Text unten</b></td>
</tr></table>

</body></html>

Erläuterung:

Mit vertical align: können Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind möglich:

top = obenbündig ausrichten.
middle = mittig ausrichten.
bottom = untenbündig ausrichten.
baseline = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt).
sub = tieferstellen (ohne die Schriftgröße zu reduzieren).
super = höherstellen (ohne die Schriftgröße zu reduzieren).
text-top = am oberen Schriftrand ausrichten.
text-bottom = am unteren Schriftrand ausrichten.

Bei Fließtext ist auch eine prozentuale Angabe möglich. Die Ausrichtung orientiert sich dann an der elementeigenen Zeilenhöhe.

Das folgende Bild veranschaulicht das Modell der vertikalen Ausrichtung:

vertikale Ausrichtung

Die gelben Kästen stellen Kindelemente des großen Kastens dar, die freistehenden schwarzen Texte stellen Zeicheninhalt des großen Kastens dar.

text-align (horizontale Ausrichtung)

Sie können Textabsätze und andere Blockelemente mit Fließtext, z.B. Tabellenzellen, ausrichten.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>text-align</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p style="text-align:left; margin-left:1.4cm; margin-right:1.4cm">Der Absatz,
den Sie gerade lesen, wurde mit <b>text-align</b> linksb&uuml;ndig ausgerichtet.
Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch,
damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>

<!--usw.-->
</body></html>

Erläuterung:

Mit text-align: können Sie gewünschte Elemente für Textinhalte ausrichten. Folgende Angaben sind möglich:

left = linksbündig ausrichten (Voreinstellung).
center = zentriert ausrichten.
right = rechtsbündig ausrichten.
justify = als Blocksatz ausrichten.

Beachten Sie:

Eine ehemals eingeführte CSS-Eigenschaft namens alignment ist mittlerweile aus dem CSS-Standard verschwunden. Verwenden Sie nur noch text-align.

white-space (Textumbruch)

Sie können festlegen, wie der Zeilenumbruch innerhalb von Elementen mit Text erfolgen soll.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>white-space</title>
<style type="text/css">
#editor      { white-space:pre; }
#langezeile  { white-space:nowrap; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p id="editor">
Der Absatz, den Sie gerade lesen,
   wurde mit als predefiniert definiert.
      Zeilenumbr&uuml;che sollten dabei so interpretiert
           werden, wie sie im Editor eingegeben wurden.</p>

<p id="langezeile">Der Absatz, den Sie gerade lesen, darf nicht
umgebrochen werden. Es sollte kein automatischer Zeilenumbruch erfolgen. Bei
diesem l&auml;ngeren Text m&uuml;ssen Sie vermutlich quer scrollen, um alles zu lesen.</p>

</body></html>

Erläuterung:

Mit white-space: können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich:

normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>).
nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.

Beachten Sie:

Diese Angabe gehört zur CSS-Version 2.0. Der MS Internet Explorer interpretiert nur den Wert nowrap, nicht den Wert pre. Netscape 4.x interpretiert den Wert pre, nicht aber nowrap. Erst Netscape 6.x beherrscht alle Angaben.


	Außenrand und Abstand
	Schriftformatierung mit Schriftartendatei

SELFHTML/Navigationshilfen

CSS Stylesheets

CSS-Eigenschaften