Texteinzug: Die Eigenschaft text-indent

Die Eigenschaft text-indent bestimmt den Texteinzug der ersten Zeile eines Blockelements.

Werte	<Länge>, <Prozent>, inherit
Initialwert	0
Vererbung	ja
Anwendung	Blockelemente

Geben Sie eine Länge an, wird der Text um den entsprechenden Wert eingezogen. Geben Sie einen negativen Wert an, wird die erste Zeile nicht eingezogen, sondern nach außen gerückt. Der Initialwert ist 0, standardmäßig haben Blockelemente daher keinen Texteinzug.

Bei der Angabe eines Prozentwerts verhält sich der Texteinzug wie bei der Angabe einer Länge, wobei der Prozentwert sich auf die Breite des umschließenden Blocks bezieht.

Zum Seitenanfang

Horizontale Ausrichtung: Die Eigenschaft text-align

Die Eigenschaft text-align bestimmt, wie Inline-Inhalte eines Blockelements horizontal ausgerichtet werden.

Werte	left, right, center, justify, inherit
Initialwert	Vom Browser und der Schriftrichtung abhängig. In unseren Breiten ist das für gewöhnlich left.
Vererbung	ja
Anwendung	Blockelemente

Über die Eigenschaft text-align können Sie Inhalte linkbündig (left), rechtsbündig (right) beziehungsweise zentriert (center) ausrichten. Zudem können Sie mittels des Werts justify beidseitig im sogenannten Blocksatz ausrichten. Dabei wird die gesamte zur Verfügung stehende Breite ausgefüllt, indem die Wortabstände verändert werden. Passt ein Wort nicht mehr in eine Zeile, wird es in die nächste Zeile übernommen und der Wortabstand der Vorzeile erweitert.

Probleme mit Blocksatz

Im traditionellen Schriftsatz, beispielsweise im Buchdruck, wird meist Blocksatz verwendet, da durch das in sich geschlossene Satzbild Ruhe und Ausgeglichenheit vermittelt wird, was sich positiv auf die Lesbarkeit auswirkt. Auf Webseiten werden Sie Blocksatz aus zwei Gründen eher selten antreffen:

• Browser beherrschen die automatische Worttrennung bis heute leider noch nicht. Webautoren können Sollbruchstellen durch ein explizites Einfügen des Trennungsstrichs selbst erzeugen, üblicherweise durch die benannte Zeichenreferenz ­, davon ist jedoch abzuraten, da Sie sich damit eine ganze Reihe von Problemen einhandeln. Gerade ältere Browser zeigen den Strich immer an, andere interessieren sich überhaupt nicht dafür, sodass Sie sich ohnehin nicht darauf verlassen können, dass an der ausgewählten Stelle getrennt wird. Darüber hinaus ist die Verwendung auch in Bezug auf Suchmaschinen problematisch. So behandelt Google Trennstriche wie Leerzeichen; Ty­po­gra­fie (in Googles Augen: Ty po gra fie) würde somit nicht gefunden werden, wenn nach »Typografie« gesucht würde.
• Bei langem Lesen auf der unruhigen Leseoberfläche eines Monitors ermüden unterschiedlich große Wortzwischenräume das Auge stärker als gleich große Wortzwischenräume bei linksbündigem Flattersatz.

Zum Seitenanfang

Ausschmückung: Die Eigenschaft text-decoration

Die Eigenschaft text-decoration beschreibt Ausschmückungen, die dem Text eines Elements hinzugefügt werden können. Die für die Textausschmückung benötigten Farben entsprechen dem Wert der Vordergrundfarbe color des Elements.

Werte	none, underline, overline, line-through, blink, inherit
Initialwert	none
Vererbung	nein
Anwendung	global

• none: Der Text wird nicht ausgeschmückt.
• underline: Der Inhalt des Elements wird unterstrichen. Diesen Wert sollten Sie nur für Links verwenden, um Ihre Nutzer nicht zu verwirren. Es ist im Web allgemein üblich, dass alles, was unterstrichen ist, von Nutzern auch angeklickt werden kann.
• overline: Der Inhalt des Elements wird überstrichen.
• line-through: Der Inhalt des Elements wird durchgestrichen. Bedenken Sie, dass Sie dem Text keine logische Bedeutung verleihen, wenn Sie ihn mit dieser CSS-Eigenschaft durchstreichen. Womöglich ist das XHTML-Element del in Verbindung mit ins besser geeignet (siehe Kapitel 5.5.2).
• blink: Der Inhalt des Elements blinkt. Glücklicherweise ist es Browsern nicht vorgeschrieben, diesen Wert zu implementieren – leider verstehen ihn viele dennoch.

text-decoration können Sie mehrere Werte zuweisen, wenn Sie sie durch Leerzeichen getrennt nacheinander aufführen. Die Reihenfolge ist dabei beliebig.

Abb. 7.6: Über-, unter- und durchgestrichener Text; die Werte der Eigenschaft text-decoration können Sie miteinander kombinieren

Zum Seitenanfang

Laufweite: Die Eigenschaft letter-spacing

Die Eigenschaft letter-spacing gibt das Abstandverhalten zwischen Zeichen an.

Werte	<Länge>, normal, inherit
Initialwert	normal
Vererbung	ja
Anwendung	global

Wenn Sie eine Länge angeben, gibt diese den Abstand zwischen den Zeichen zusätzlich zu dem Standardabstand zwischen Zeichen an. Der Wert kann auch negativ sein; in diesem Fall würde der Abstand entsprechend verringert werden.

Geben Sie die Laufweite am besten relativ an; so passen sich die Leerräume der Schriftgröße an, wodurch die Homogenität des Schriftbilds erhalten bleibt.

Zum Seitenanfang

Wortabstände: Die Eigenschaft word-spacing

Die Eigenschaft word-spacing gibt das Abstandverhalten zwischen Wörtern an.

Werte	<Länge>, normal, inherit
Initialwert	normal
Vererbung	ja
Anwendung	global

Eine Länge gibt den Abstand zwischen Wörtern zusätzlich zu dem Standardabstand zwischen Wörtern an. Ist der Wert negativ, wird der Abstand entsprechend verringert.

Wie bei der Eigenschaft letter-spacing sollten Sie die Wortabstände mit einer relativen Länge angeben.

Der Wortabstand wird nicht nur über word-spacing, sondern auch durch die Ausrichtung beeinflusst (siehe dazu Kapitel 7.4.2).

Zum Seitenanfang

Groß- und Kleinschreibung: Die Eigenschaft text-transform

Die Eigenschaft text-transform bestimmt die Groß- und Kleinschreibung von Text unabhängig von der tatsächlichen Schreibweise im Dokument.

Werte	none, uppercase, lowercase, capitalize, inherit
Initialwert	normal
Vererbung	ja
Anwendung	global

Beim Wert uppercase werden alle Buchstaben als Großbuchstaben dargestellt, bei lowercase als Kleinbuchstaben. Geben Sie den Wert capitalize an, wird der erste Buchstabe jedes Worts als Großbuchstabe dargestellt.

SIE SOLLTEN VERMEIDEN, TEXTE, DIE MEHR ALS EINE HANDVOLL WÖRTER UMFASSEN, KOMPLETT IN GROSSBUCHSTABEN ZU SETZEN. MENSCHEN LESEN GÄNGIGE WÖRTER NICHT BUCHSTABE FÜR BUCHSTABE, SONDERN NEHMEN SIE ALS GANZES AUFGRUND IHRER BEKANNTEN FORM WAHR. TEXTE WIE DIESER HIER LASSEN SICH DEUTLICH LANGSAMER LESEN ALS NORMAL GESETZTER TEXT. FOLGENDER VERGLEICH LIEGT NAHE: STELLEN SIE SICH VOR, JEMAND WÜRDE IHNEN DIESEN TEXT INS OHR BRÜLLEN.

das gleiche gilt für text, der komplett in kleinbuchstaben gesetzt ist. der text wirkt unbetont und liest sich so, als ob er genuschelt würde. so viele möglichkeiten css bietet, so viele chancen haben schlechte webautoren, die lesbarkeit ihrer webseiten vollkommen zu ruinieren; das betrifft nicht nur schwer lesbare schriftschnitte und -größen, sondern eben auch die textgestaltung.

Zum Seitenanfang

Behandlung von Leerraum: Die Eigenschaft white-space

Die Eigenschaft white-space bestimmt die Darstellung von Leerraumzeichen (Leerzeichen, Tabulatoren, Wagenrücklauf und Zeilenvorschub) innerhalb eines Elements.

Werte	normal, pre, nowrap, inherit
Initialwert	normal
Vererbung	ja
Anwendung	global

Beim Wert normal werden mehrere Leerraumzeichen hintereinander zu einem zusammengezogen. Wo Inhalte länger sind, als ihr Element oder die Breite des Browserfensters es erlaubt, werden Zeilenumbrüche eingefügt. Weitere Zeilenumbrüche lassen sich durch das (X)HTML-Element br einfügen.

Der Wert pre gibt an, dass die Darstellung des Texts der von präformatiertem Text entspricht, also dem XHTML-Element pre. Text wird genau so dargestellt, wie er im Editor notiert wird; Sequenzen von Leerraumzeichen werden vollständig ausgegeben. Elementtypen wie br, die die Zeilenumbrüche der Ausgabe kontrollieren, werden interpretiert.

nowrap bedeutet, dass Zeilen zwar nicht umbrochen werden, Leerraum aber ansonsten wie gewohnt behandelt wird. Elementtypen wie br, die die Zeilenumbrüche der Ausgabe kontrollieren, werden interpretiert.