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.
Browserunterstützung
- Alle Browser
- Die Eigenschaft
text-indent
wird von allen modernen Browsern ohne Einschränkung unterstützt.
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.
Browserunterstützung
- Alle Browser
- Die hier vorgestellten Werte der Eigenschaft
text-align
werden von allen modernen Browsern ohne Einschränkung unterstützt. Darüber hinaus sieht CSS 2 die Möglichkeit vor, Text innerhalb von Tabellenzellen anhand einer vorgegebenen Zeichenkette auszurichten, beispielsweise Fließkommazahlen anhand des Kommas (text-align: ',';
). Aufgrund mangelnder Browserunterstützung ist dies in CSS 2.1 nicht mehr möglich.
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-Elementdel
in Verbindung mitins
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
Browserunterstützung
Die Eigenschaft text-decoration
wird von allen modernen Browsern unterstützt mit folgenden
Einschränkungen:
- Internet Explorer 6 und 7
- IE erkennt den Wert
blink
nicht. - Opera
- Ein Nachkommenelement kann den Wert
blink
nicht erben, auch nicht durch die Deklarationinherit
. - Konqueror
- Konqueror akzeptiert den Wert
blink
nicht.
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.
Browserunterstützung
- Alle Browser
- Die Eigenschaft
letter-spacing
wird von allen modernen Browsern ohne Einschränkung unterstützt.
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).
Browserunterstützung
Die Eigenschaft word-spacing
wird
von allen modernen Browsern unterstützt mit folgender
Einschränkung:
- Opera
- Deklarieren Sie einen negativen Wert, der größer ist als der normale Raum zwischen Wörtern, würden sich benachbarte Wörter überlappen. Opera bis Version 7 fügt einfach einen Zeilenvorschub ein, sodass jedes Wort am Beginn einer neuen Zeile steht. Ab Version 8 werden in diesem Fall die Wörter ohne Abstand hintereinandergesetzt. Dies widerspricht nicht der Spezifikation.
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.
Browserunterstützung
- Alle Browser
- Die Eigenschaft
text-transform
wird von allen modernen Browsern ohne Einschränkung unterstützt.
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.
Browserunterstützung
- Alle Browser
- Die vorgestellten Werte der Eigenschaft
white-space
werden von allen modernen Browsern ohne Einschränkung unterstützt. CSS 2.1 erlaubt darüber hinaus die Wertepre-wrap
undpre-line
, die jedoch noch von keinem Browser richtig verstanden und daher an dieser Stelle nicht vorgestellt werden.