SELFHTML

Ausrichtung und Absatzkontrolle

Informationsseite

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

 nach unten 

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 Elementen, 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 umbrochen werden soll: ob gar nicht, automatisch, oder so, wie er im Editor eingegeben wurde.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-indent</title>
</head><body>

<p style="text-indent:1em;">Dieser Textabsatz hat eine
Texteinr&uuml;ckung von 1em. 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 Seite numerische Angabe.

Beachten Sie:

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

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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 Seite Schriftgröße interessant.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>line-height</title>
</head><body>

<p style="line-height:1.4em; font-size:1em; 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 Seite 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.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 vertical-align (vertikale Ausrichtung)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>vertical-align</title>
<style type="text/css">
td       { height:200px; }
.oben    { vertical-align:top; background-color:#CCCCCC; }
.mittig  { vertical-align:middle; background-color:#DDDDDD; }
.unten   { vertical-align:bottom; background-color:#EEEEEE; }
</style>
</head><body>

<table border="1"><tr>
<td class="oben"><b>Text oben</b></td>
<td class="mittig"><b>Text mittig</b></td>
<td 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.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 text-align (horizontale Ausrichtung)

Sie können Textabsätze und in anderen Block-Elementen enthaltenen Fließtext oder Inline-Elemente ausrichten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-align</title>
</head><body>

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

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

Erläuterung:

Mit text-align: können Sie Textinhalte von Block-Elementen ausrichten. Folgende Angaben sind möglich:

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

Beachten Sie:

text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>). Der Internet Explorer wendet diese Eigenschaft jedoch fälschlich auch auf Block-Elemente an.
Block-Elemente selbst werden über Seite margin ausgerichtet, wobei gleiche Werte für margin-left und margin-right eine Zentrierung bewirken können.

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

nach obennach unten

CSS 2.0Netscape 6.0MS IE 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.0 white-space (Textumbruch)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>white-space</title>
<style type="text/css">
#editor      { white-space:pre; }
#langezeile  { white-space:nowrap; }
</style>
</head><body>

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

<p id="langezeile">Der Absatz, den Sie gerade lesen, darf nicht
umbrochen 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.

CSS 2.1 Mit CSS 2.1 werden noch die folgenden Werte eingeführt:

pre-wrap = wie pre, jedoch erfolgt ein Umbruch, wenn die Breite der Box zur Anzeige der Zeile nicht ausreicht.
pre-line = Mehrere Whitespaces werden wie bei normal zusammengefasst, es erfolgt aber ein Zeilenumbruch wie bei pre-wrap.

Beachten Sie:

Der Internet Explorer 5.5 interpretiert nur den Wert nowrap, nicht den Wert pre. Netscape 4.x interpretiert den Wert pre, nicht aber nowrap. Erst Internet Explorer 6 und Netscape 6 beherrschen alle Angaben.

 nach oben
weiter Seite Außenrand und Abstand
zurück Seite Schriftformatierung mit Schriftartendatei
 

© 2007 Seite Impressum