16 Text

Die in den folgenden Abschnitten definierten Eigenschaften beeinflussen die visuelle Darstellung von Zeichen, Leerzeichen, Wörtern und Absätzen.

16.1 Einrückung: die 'text-indent'-Eigenschaft

Diese Eigenschaft gibt die Einrückung der ersten Textzeile in einem Block an. Genauer gesagt, sie gibt die Einrückung der ersten Box an, die in die erste Zeilen-Box des Blocks einfließt. Die Box wird relativ zur linken Kante der Zeilenbox eingerückt (für ein Rechts-nach-Links-Layout relativ zur rechten Kante). Benutzerprogramme sollten diese Einrückung als Leerzeichen darstellen.

Die Werte haben die folgenden Bedeutungen:

<length>

Die Einrückung erfolgt um einen feststehenden Betrag.

<percentage>

Die Einrückung erfolgt um einen Prozentsatz der Breite des umschließenden Blocks.

Der Wert 'text-indent' kann negativ sein, aber es gibt von der Implementierung abhängige Grenzen.

  P { text-indent: 3em }

16.2 Ausrichtung: die 'text-align'-Eigenschaft

Diese Eigenschaft beschreibt, wie Inline-Inhalt eines Blocks ausgerichtet wird. Die Werte haben die folgenden Bedeutungen:

left, right, center und justify

Richtet einen Text linksbündig, rechtsbündig, zentriert bzw. beidseitig aus.

<string>

Gibt einen String an, nach dem die Zellen einer Tabelle ausgerichtet werden (detaillierte Informationen und ein Beispiel finden Sie im Abschnitt 17.5.4 über die horizontale Ausrichtung in einer Spalte). Dieser Wert gilt nur für Tabellenzellen. Wird er für andere Elemente gesetzt, wird er wie 'left' oder 'right' behandelt, abhängig davon, ob 'direction' 'ltr' oder 'rtl' ist.

Ein Textblock ist ein Stapel aus Zeilen-Boxen. Für 'left', 'right' und 'center' gibt diese Eigenschaft an, wie die inzeiligen Boxen innerhalb jeder Zeilen-Box entlang der linken oder rechten Seiten der Zeilen-Box ausgerichtet sind; die Ausrichtung erfolgt nicht relativ zum Viewport. Im Fall von 'justify' kann das Benutzerprogramm die inzeiligen Boxen zusätzlich strecken, um sie an ihren Positionen auszurichten. (Weitere Informationen finden Sie auch unter 'letter-spacing' und 'word-spacing', siehe weiter unten).

DIV.center { text-align: center }

16. 3 Ausschmückung

16.3.1 Unterstreichen , Überstreichen , Durchstreichen und Blinken: die 'text-decoration'-Eigenschaft

Diese Eigenschaft beschreibt Ausschmückungen, die dem Text eines Elements hinzugefügt werden. Wird die Eigenschaft für ein Element auf Blockebene angegeben, beeinflusst sie alle Ableitungen des Elements auf Inline-Ebene. Wird sie für ein Element auf Inline-Ebene angegeben (oder betrifft sie dieses), beeinflusst sie auch alle von dem Element erzeugten Boxen. Hat das Element keinen Inhalt oder keinen Textinhalt (z.B. das IMG-Element in HTML), müssen Benutzerprogramme diese Eigenschaft ignorieren .

Die Werte haben die folgenden Bedeutungen:

none

Erzeugt keine Textausschmückung.

underline

Jede Textzeile ist unterstrichen.

overline

Jede Textzeile hat eine Überstreichung.

line-through

Jede Textzeile ist mittig durchgestrichen.

blink

Der Text blinkt (er wechselt zwischen sichtbar und unsichtbar). Konforme Benutzerprogramme müssen diesen Wert nicht unterstützen.

Die für die Textausschmückung benötigten Farben sollen vom Wert der 'color'-Eigenschaft abgeleitet werden.

Die Eigenschaft wird nicht vererbt, aber die abgeleiteten Boxen einer Block-Box sollten mit derselben Ausschmückung formatiert werden (z.B. sollten sie alle unterstrichen dargestellt sein). Die Farbe der Ausschmückungen sollte immer dieselbe bleiben, selbst wenn die abgeleiteten Elemente andere 'color'-Werte haben.

A[href] { text-decoration: underline }

16.3.2 Textschatten: die 'text-shadow'-Eigenschaft

Diese Eigenschaft nimmt eine Liste durch Kommas voneinander getrennter Schatteneffekte entgegen, die auf den Text des Elements angewendet werden. Die Schatteneffekte werden in der angegebenen Reihenfolge angewendet und können sich somit überlagern, aber sie überlagern niemals den eigentlichen Text. Schatteneffekte verändern die Größe einer Box nicht, können sich aber über ihre Grenzen hinaus erstrecken. Die Stapelebene der Schatteneffekte ist dieselbe wie für das eigentliche Element.

Jeder Schatteneffekt muss einen Abstand für den Schatten und kann optional einen Überblendradius und eine Schattenfarbe angeben.

Ein Schattenabstand wird mit zwei <length>-Werten angegeben, die den Abstand vom Text spezifizieren. Der erste Längenwert bestimmt den horizontalen Abstand zur rechten Textseite. Ein negativer Wert für die horizontale Länge platziert den Schatten links vom Text. Der zweite Längenwert gibt den vertikalen Abstand unterhalb des Texts an. Ein negativer Wert für die vertikale Länge platziert den Schatten oberhalb des Textes.

Optional kann nach dem Schattenabstand ein Überblendradius angegeben werden. Der Überblendradius ist ein Längenwert, der die Grenzen des Überblendeffekts bestimmt. Der genaue Algorithmus für die Berechnung des Überblendeffekts ist nicht vorgegeben.

Optional kann vor oder hinter den Längenwerten des Schatteneffekts ein Farbwert angegeben werden. Der Farbwert wird als Grundlage für den Schatteneffekt verwendet. Wird keine Farbe angegeben, wird stattdessen auf den Wert der 'color'-Eigenschaft zurückgegriffen.

Textschatten können in Kombination mit den Pseudo-Elementen :first-letter und :first-line verwendet werden.

Beispiel

Das folgende Beispiel setzt einen Textschatten rechts und unterhalb des Elementtexts. Weil keine Farbe angegeben wurde, hat der Schatten dieselbe Farbe wie das eigentliche Element, und weil kein Überblendradius angegeben ist, wird der Textschatten langsam ausgeblendet:

H1 { text-shadow: 0.2em 0.2em }

Das nächste Beispiel platziert einen Schatten rechts und unterhalb des Elementtexts. Der Schatten hat eine 5px breiten Überblendradius und ist rot.

H2 { text-shadow: 3px 3px 5px red }

Das nächste Beispiel gibt eine Liste mit Schatteneffekten an. Der erste Schatten liegt rechts und unterhalb des Elementtexts und ist rot ohne Überblendung. Der zweite Schatten überlagert den ersten Schatteneffekt, er ist gelb, wird langsam ausgeblendet und links und unterhalb des Texts platziert. Der dritte Schatteneffekt wird rechts und oberhalb des Texts platziert. Weil für den dritten Schatteneffekt keine Schattenfarbe angegeben ist, wird der Wert der 'color'-Eigenschaft des Elements verwendet:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Betrachten Sie das folgende Beispiel:

SPAN.glow { 
    background: white; 
    color: white;
    text-shadow: black 0px 0px 5px;
}

Hier haben die 'background'- und 'color'-Eigenschaften denselben Wert, und die 'text-shadow'-Eigenschaft wird verwendet, um einen „Sonnenfinsterniseffekt“ zu erzeugen:

Hinweis. Diese Eigenschaft ist in CSS1 nicht definiert. Einige Schatteneffekte (wie beispielsweise der aus dem letzten Beispiel) zeigt diesen Text in Benutzerprogrammen, die nur CSS1 unterstützen, möglicherweise unsichtbar an.

16.4 Buchstaben- und Wortabstände: die 'letter-spacing'- und 'word-spacing'-Eigenschaften

Diese Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an. Die Werte haben die folgenden Bedeutungen:

normal

Der Abstand ist der normale Abstand für die aktuelle Schrift. Dieser Wert erlaubt, dass das Benutzerprogramm den Abstand zwischen Zeichen ändert, um Text auszurichten.

<length>

Dieser Wert gibt den Abstand zwischen den Zeichen zusätzlich zu dem Standardabstand zwischen Zeichen an. Werte können negativ sein, aber es kann von der jeweiligen Implementierung abhängige Grenzen geben. Benutzerprogramme dürfen den Leeraum zwischen den Buchstaben nicht weiter vergrößern oder verkleinern, um Text auszurichten.

Algorithmen für die Zeichenabstände sind vom Benutzerprogramm abhängig. Die Zeichenabstände können auch durch die Ausrichtung beeinflusst werden (siehe auch die Beschreibung der 'text-align'-Eigenschaft oben).

BLOCKQUOTE { letter-spacing: 0.1em }

BLOCKQUOTE { letter-spacing: 0cm }   /* Wie '0' */

Wenn der resultierende Abstand zwischen zwei Zeichen nicht derselbe wie der Standardabstand ist, sollten die Benutzerprogramme keine Ligaturen verwenden.

Konforme Benutzerprogramme könnten den Wert der 'letter-spacing'-Eigenschaft als 'normal' interpretieren.

Diese Eigenschaft gibt das Abstandsverhalten zwischen Wörtern an. Die Werte haben die folgenden Bedeutungen:

normal

Der normale Abstand zwischen Wörtern, wie durch die aktuelle Schrift und/oder das Benutzerprogramm definiert.

<length>

Dieser Wert gibt den Abstand zwischen Wörtern zusätzlich zum Standardabstand zwischen Wörtern an. Die Werte können negativ sein, aber möglicherweise gibt es von der Implementierung abhängige Obergrenzen.

Algorithmen für den Wortabstand sind vom Benutzerprogramm abhängig. Der Wortabstand wird außerdem durch die Ausrichtung beeinflusst (siehe auch die Informationen zur 'text-align'-Eigenschaft).

H1 { word-spacing: 1em }

Konforme Benutzerprogramme können den Wert der 'word-spacing'-Eigenschaft als 'normal' interpretieren.

16.5 Großschreibung: die 'text-transform'-Eigenschaft

Diese Eigenschaft steuert die Effekte zur Großschreibung von Text. Die Werte haben die folgenden Bedeutungen:

capitalize

Schreibt das erste Zeichen eines jeden Wortes in Großbuchstaben.

uppercase

Wandelt alle Zeichen eines jeden Wortes in Großbuchstaben um.

lowercase

Wandelt alle Zeichen eines jeden Wortes in Kleinbuchstaben um.

none

Keine Effekte zur Großschreibung.

Die eigentliche Umwandlung ist für jeden dieser Fälle von der geschriebenen Sprache abhängig. Möglichkeiten, die Sprache eines Elements festzustellen, finden Sie in RFC 2070 ([RFC2070]).

Konforme Benutzerprogramme können den Wert von 'text-transform' für Zeichen, die nicht aus dem Latin-1-Repertoire stammen auf 'none' setzen, ebenso für Elemente in Sprachen, für die sich die Umwandlung von der in den Fallumwandlungstabellen von ISO 10646 ([ISO10646]) unterscheidet.

H1 { text-transform: uppercase }

16.6 Leerraum: die 'white-space'-Eigenschaft

Diese Eigenschaft deklariert, wie Leerraum innerhalb des Elements behandelt wird. Die Werte haben die folgenden Bedeutungen:

normal

Dieser Wert weist Benutzerprogramme an, Leerraum-Folgen zu komprimieren und bei Bedarf Zeilen umzubrechen, um Zeilen-Boxen zu füllen. Es können zusätzliche Zeilenumbrüche erzeugt werden, wenn „\A“ in erzeugtem Inhalt (z.B. für das BR-Element in HTML) auftritt.

pre

Dieser Wert verhindert, dass Benutzerprogramme Leerraum-Folgen komprimieren. Zeilen werden nur an Neuezeile-Zeichen der Quelle umbrochen, oder wenn im erzeugten Inhalt „\A“ auftritt.

nowrap

Dieser Wert komprimiert Leerraum wie für 'normal', unterdrückt aber Zeilenumbrüche innerhalb von Text, außer diejenigen, die durch „\A“ in erzeugtem Inhalt erzeugt werden (z.B. für das BR-Element in HTML).

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

You are on the German version of the site, but your system indicates that you prefer to use the English language.
The entire site is not translated yet, but the menus and buttons on the interface are largely translated.

Would you like to reach the page in English?
Click here to continue in English: Consult the English version of this page

U bevindt zich op de Duits versie van de site, maar uw systeem geeft aan dat u liever de Nederlandse taal gebruikt.
De hele site is nog niet vertaald, maar de menu's en knoppen op de interface zijn grotendeels vertaald.

Wilt u de pagina in het Nederlands bereiken?
Klik hier om door te gaan in het Nederlands: Raadpleeg de Nederlandse versie van deze pagina

Vous vous trouvez sur la version allemande du site, mais votre système indique que vous préférez utiliser la langue française.

Souhaitez-vous atteindre la page en français?
Cliquez ici pour continuer en français: Consulter la page en français