Text – Stile für die Gestaltung von Texten

direction

Der vorgegebene Textfluss geht von links nach rechts für Sprachen wie Deutsch, Englisch und Französisch. Sprachen wie Chinesisch und Hebräisch fließen von rechts nach links. Wenn direction auf einen Inlinetext angewendet werden soll, muss unicode-bidi entweder auf bidi-override oder eingebettete Werte gesetzt werden.

ltr setzt den Text von links nach rechts und ist die Vorgabe.

rtl setzt den Text von rechts nach links.

Beispiel

blockquote.eng { direction: ltr; } 
blockquote.heb { direction: rtl; } oder 
<blockquote style="direction: rtl; unicode-bidi: bidi-override;">
    ABC DEF GHI JKL MNO PQR STU VWX YZ 
</blockquote>        

↑

letter-spacing

normal ist die Standardeinstellung. Die Angabe von normal stellt sicher, dass vorangegangene Deklarationen den Raum zwischen aufeinander folgenden Zeichen nicht beeinflussen – mit einer Ausnahme. Der Raum kann auch nach der Angabe normal aufgrund der Ausrichtung durch die Eigenschaft text-align verändert worden sein.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Beispiel

.raum_normal { letter-spacing: normal; font-size: 24px }
.raum_pixel { letter-spacing: 3px; font-size: 24px }
.raum_ems { letter-spacing: 1em; font-size: 24px }
.raum_0 { letter-spacing: 0; font-size: 24px }
...
<p class="raum_ems">  Stil mit Stil</p>
 <p class="raum_normal">Stil mit Stil</p>
 <p class="raum_pixel">Stil mit Stil</p>
 <p class="raum_0">Stil mit Stil</p> 

↑

text-align

left ist die Standardeinstellung: Text wird linksbündig ausgerichtet.

right richtet den Text rechtsbündig aus.

center zentriert den Text mit gleichem Weißraum nach rechts und links.

justify richtet den Text im Blocksatz aus und fügt dafür zusätzlichen Weißraum zwischen Zeichen und Wörter ein. Beachten Sie, dass bislang kein Browser automatische Silbentrennung aufweist, so dass Texte im Blocksatz auf dem Monitor mit großer Wahrscheinlichkeit unschöne Lücken aufweisen werden. Auch die weiche Silbentrennung, die durch ­ im Quelltext des HTML-Dokuments verwendet werden kann, wird nur von Microsoft Internet Explorer verlässlich erkannt, während andere Browser die weichen Trennstriche schon mal unversehens mitten im Text anzeigen.

Die Eigenschaft letter-spacing kann die Ausrichtung im Blocksatz überschreiben.

Beispiel

 .links { text-align: left; width: 250px}
 .rechts { text-align: right; width: 250px}
 .zentriert { text-align: center; width: 250px}
 .blocksatz { text-align: justify; width: 250px}

 ... 

 <p class="links"> Als es klingelte, ... </p>
 <p class="rechts"> Als es klingelte, ... </p>
 <p class="zentriert"> Als es klingelte, ... </p>
 <p class="blocksatz"> Als es klingelte, ... </p>

↑

text-decoration

none ist die Standardeinstellung. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen den Text nicht beeinflussen.

underline zieht eine Linie unter dem Text. Wenn der Text in unterschiedlichen Farben zusammengestellt ist, wird die Linie die Farbe des ersten Elements annehmen.

overline zieht eine Linie über dem Text. Wenn der Text in unterschiedlichen Farben zusammengestellt ist, wird die Linie die Farbe des ersten Elements annehmen.

line-through zieht eine Linie mitten durch den Text. Wenn der Text in unterschiedlichen Farben zusammengestellt ist, wird die Linie die Farbe des ersten Elements annehmen.

blink veranlasst, dass der Text blinkt.

Beispiel

.linien       {  text-decoration: underline overline line-through; }
.keine_linien {  text-decoration: none}
.blinkend     {  text-decoration: blink; color: #003366}

 ...

<p class="linien"> Auf einer Linie</p>
<p class="keine_linien">Auf einer Linie</p>
<p class="blinkend">Auf einer Linie</p>

Bemerkung

blink wird nur von Netscape 4 unterstützt.

↑

text-indent

length kann in einer der folgenden Maßeinheiten angegeben werden:

percentage (Prozentsatz) basiert auf der vollen Länge des Textblocks, der als 100% angesehen wird.

Beispiel

.zentimeter { text-indent: 0.5cm; width: 250px} 
.picas { text-indent: -15pc; width: 250px} 
.punkt { text-indent: 24pt; width: 250px} 
.prozent { text-indent: 5.5%; width: 250px} 
.negativ { text-indent: -8%; width: 250px}
...

<p class="zentimeter"> Als es klingelte,... </p>
<p class="picas"> Als es klingelte, ... </p>
<p class="punkt">Als es klingelte, ... </p>
<p class="prozent">Als es klingelte, ... </p>
<p class="negativ">Als es klingelte, ... </p> 

↑

text-shadow

none ist die Voreinstellung. Durch die Angabe von none wird kein Schatteneffekt erzeugt.

color ist optional und steuert die Farbe des Schatteneffekts. Wenn keine Farbe für den Schatteneffekt notiert ist, wohl aber color explizit als Textfarbe, wird diese Farbe für den Effekt benutzt. Der Wert für die Farbe kann sowohl vor als auch nach den Längenangaben notiert werden.

length length length?: Der erste Wert steuert den horizontalen Abstand, um den sich der Effekt nach rechts oder links erstreckt, wobei ein positiver Wert nach rechts und ein negativer Wert nach links ausdehnt. Ein Wert von 0 unterdrückt den horizontalen Schatteneffekt.

Der zweite Wert steuert den vertikalen Abstand nach oben oder unten, wobei ein positiver Wert den Effekt nach oben ausdehnt, ein negativer Wert nach unten. Ein Wert von 0 unterdrückt den vertikalen Schatteneffekt.

Der optionale dritte Wert setzt den Radius, um den der Weichzeichnungseffekt des Schattens den Effekt ausdehnt.

Wenn der erste und der zweite Wert auf 0 gesetzt werden, tritt nur der Weichzeichnungseffekt in Kraft.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Textschatten können auch zusammen mit den Pseudoelementen :first-letter und :first-line benutzt werden.

:first-letter wendet den Textschatten mit einem fiktionalen Tag auf den ersten Buchstaben eines Absatzes an. Die Syntax ist <p:first-letter> ... </p:first-letter>. Das schließende Tag ist zwingend erforderlich.

Beispiel

h3:first-letter { font-size: 36px; 
                  color: darkslategray; 
                  text-shadow: red 0px 0px 5px;} ...  
<h3>Schattenwelt</h3>  

↑

text-transform

capitalize stellt den ersten Buchstaben jedes Wortes als Großbuchstaben dar.

uppercase stellt alle Buchstaben eines Textes in Großbuchstaben dar.

lowercase stellt alle Buchstaben eines Textes in Kleinbuchstaben dar.

none ist die Voreinstellung. Die Angabe von none stellt sicher, dass keine vorangegangenen Deklarationen den ausgewählten Text beeinflussen.

Beispiel

.trans_none { text-transform: none}
.trans_cap { text-transform: uppercase}
.trans_klein { text-transform: lowercase}
.trans_erster { text-transform: capitalize} 


<p class="trans_erster">  
Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p>
<p class="trans_cap">
Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p>
<p class="trans_klein">
Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p>
<p class="trans_none">
Wie gro&szlig; kann ein kleiner Hund ohne H&uuml;tte werden?</p> 

↑

unicode-bidi

Wenn direction auf einen Inlinetext angewandt wird, muss unicode-bidi entweder auf bidi-override oder auf embed gesetzt werden.

bidi-override überschreibt die Textrichtung in einem Inline- oder Blockelement, das nur Inlineelemente enthält.

embed wird benutzt, um bis zu 15 Inlineelemente in den Textfluss einzusetzen.

normal ist die Voreinstellung und erlaubt die Nutzung des bidirektionalen Algorithmus, der die Textrichtung steuert.

Das Beispiel funktioniert am besten in IE5.0 oder IE5.5/6:

Beispiel

<blockquote style="direction: rtl; unicode-bidi: bidi-override;">
   ABC DEF GHI JKL MNO PQR STU VWX YZ 
</blockquote>        

↑

white-space

normal ist die Standardeinstellung.

pre verhält sich wie das HTML-Tag <pre>.

nowrap lässt den Text auf einer Zeile laufen, bis der Text beendet ist oder ein HTML-Tag <br> entdeckt wird. <br> erzeugt einen Zeilenumbruch auf die nächste Zeile.

Beispiel

p { white-space: normal; } 
p { white-space: pre; } 
p { white-space: nowrap; }  oder 

<p style="white-space: pre;">
 Wie gro&szlig; kann ein kleiner Hund ohne 
 H&uuml;tte werden?</p> 

↑

word-spacing

normal ist die Standardeinstellung. Die Angabe normal verhindert, dass vorangegangene Deklarationen den Text beeinflussen.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Beispiel

p { word-spacing: normal; }
p { word-spacing: 1mm; }
p { word-spacing: 2.5em; } oder 

<p style="word-spacing: 20px;"> 
   Wie gro&szlig; kann ein kleiner Hunde ohne Hundeh&uuml;tte werden?</p>
<p style="word-spacing: -10px;"> 
  Wie gro&szlig; kann ein kleiner Hunde ohne Hundeh&uuml;tte werden?</p>

↑