2.5.4 Text-Formatierung

1 Allgemein

• Web Design Group: Text Properties

2 Zeichenabstand (letter spacing)

a) Beispiel 1: So kann der Zeichenabstand im Text verändert werden

<p>
<span style="letter-spacing:1pt">
Beispieltext mit Zeichenabstand 1pt</span><br>
<span style="letter-spacing:3pt">
Beispieltext mit Zeichenabstand 3pt</span><br>
<span style="letter-spacing:5pt">
Beispieltext mit Zeichenabstand 5pt</span><br>
<span style="letter-spacing:7pt">
Beispieltext mit Zeichenabstand 7pt</span>
</p>

Beispieltext mit Zeichenabstand 1pt
Beispieltext mit Zeichenabstand 3pt
Beispieltext mit Zeichenabstand 5pt
Beispieltext mit Zeichenabstand 7pt

• SELFHTML: letter-spacing (Zeichenabstand)
  SELFHTML: Beispiel

b) Beispiel 2: Angabe im Stylesheet

Mit dieser Fomatierung im Stylesheet könnte für z.B. alle Titel der Zeichenabstand verändert werden

• h1 {letter-spacing: 0.1em }
• h2 {letter-spacing: -3px }
• h4 {letter-spacing: 0.5cm }

• W3Schools: Beispiel: Specify the space between characters

c) Beispiel 3: Angabe in em

Es wird empfohlen, die Zeichenabstände in em anzugeben.

h1 {font-size:1.69em;font-weight:bold;
letter-spacing:0.1em;
background:transparent;color:red;}

d) Syntax

• Web Design Group: Syntax: letter-spacing

3 Wortabstand (word-spacing)

a) Beispiel

<p>
 <span style="word-spacing:6pt">Beispieltext mit
 Wortabstand 6pt</span><br>
 <span style="word-spacing:10pt">Beispieltext mit
 Wortabstand 10pt</span><br>
 <span style="word-spacing:14pt">Beispieltext mit
 Wortabstand 14pt</span><br>
 <span style="word-spacing:24pt">Beispieltext mit
 Wortabstand 24pt</span>
</p>

Beispieltext mit Wortabstand 6pt
Beispieltext mit Wortabstand 10pt
Beispieltext mit Wortabstand 14pt
Beispieltext mit Wortabstand 24pt

• SELFHTML: word-spacing (Wortabstand)
  SELFHTML: Beispiel

b) Syntax

• Web Design Group: Syntax:word-spacing

4 Zeilenhöhe (line-height)

a) Bezeichnungen

• line-height = Zeilenhöhe = Zeilenabstand

b) Beispiel 1

<p style="line-height:1.4em;font-size:1em;
 margin-left:20%;margin-right:20%">
 Die Zeilenhöhe ist ein altbekanntes DTP-Feature
 zur Formatierung von Absätzen.
 Um damit richtig umzugehen, sind jedoch Kenntnisse
 in der typografischen Wirkung von Text hilfreich. ...
</p>

Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der typografischen Wirkung von Text hilfreich. ...

• SELFHTML: line-height (Zeilenhöhe)
  SELFHTML: Beispiel

c) Beispiel 2: mit <p class="xxx" >

• W3Schools: Beispiel: Increase the space between lines

d) Syntax

• Web Design Group: Syntax: line-height

5 Physische Auszeichnungen im Text

a) Elemente

Elemente und Bedeutung der physischen Auszeichnungen im Text

• <b>...</b> = zeichnet einen Text als fett aus
• <i>...</i> = zeichnet einen Text als kursiv aus
• <tt>...</tt> = dicktengleich (tt = Teletyper = Fernschreiber)
• <u>...</u> = zeichnet einen Text als unterstrichen aus
• <strike>...</strike> = zeichnet einen Text als durchgestrichen aus
• <s>...</s> = zeichnet einen Text als durchgestrichen aus
• <big>...</big> = zeichnet einen Text grööer als normal aus
• <small>...</small> = zeichnet einen Text kleiner als normal aus
• ^... = zeichnet einen Text als hochgestellt aus
• _... = zeichnet einen Text als tiefgestellt aus

b) Beispiel 1

<p>
<b>ein Text fett aus</b><br>	
<i>ein Text kursiv</i><br>	
<tt>dicktengleich (tt = Teletyper 
= Fernschreiber)</tt><br>	
<u>ein Text unterstrichen</u><br>	 	
<strike>ein Text durchgestrichen</strike>
<br>
<s>ein Text durchgestrichen</s><br>	 
<big>ein Text grööer als normal</big>	 	
<small>ein Text kleiner als normal</small>
<br>		
<sup>ein Text hochgestellt</sup><br>	 	
<sub>ein Text tiefgestellt</sub>
<br>
</p>	 	

zeichnet einen Text als fett aus
zeichnet einen Text als kursiv aus
dicktengleich (tt = Teletyper = Fernschreiber)
zeichnet einen Text als unterstrichen aus
zeichnet einen Text als durchgestrichen aus
zeichnet einen Text als durchgestrichen aus
zeichnet einen Text grööer als normal aus zeichnet einen Text kleiner als normal aus
^{zeichnet einen Text als hochgestellt aus}
_{zeichnet einen Text als tiefgestellt aus}

• SELFHTML: Physische Auszeichnungen im Text
  SELFHTML: HTML-Elemente für physische Auszeichnung im Text

c) Beispiel 2: Formatierung im Text mit HTML

<p>Das Schwein ist<b>fett</b>
und der Turm von Pisa ist<i>schief</i>.
<br>
Und was ist<b><i>fett und schief</i>
</b>?
</p>

Das Schwein ist fett und der Turm von Pisa ist schief.
Und was ist fett und schief?

• SELFHTML: HTML-Elemente für physische Auszeichnung im Text
  SELFHTML: Beispiel

d) Beispiel 3: Formatierung im Text mit CSS

<p>Das Schwein ist
<b style="background-color:#FFCCCC">fett</b>
und der Turm von Pisa ist
<i style="font-weight:bold;background-color:#FFFF00">
schief</i>.
</p>

Das Schwein ist fett und der Turm von Pisa ist schief.

• SELFHTML: Physische Elemente für Textauszeichnung zusätzlich formatieren mit CSS
  SELFHTML: Beispiel

6 Text-Dekoration wie Unterstreichen etc. (text decoration)

a) Prinzip

Mit "text-decoration:..." kann eine zusätzliche Formatierung bestimmt werden.

• underline = unterstrichen
• overline =überstrichen
• line-through = durchgestrichen
• blink = blinkend
• none = normal (keine Text-Dekoration)

b) Beispiel 1: ganzer Abschnitt

<p style="text-decoration: underline">
Beispiel eines unterstrichenen Abschnittes
</p>

Beispiel eines unterstrichenen Abschnittes

c) Beispiel 2: nur ein Teil des Abschnittes

<p >
(sollte aber normalerweise 
<span style="text-decoration: underline">
nur für Links</span>
verwendent werden)
</p>

(sollte aber normalerweise nur für Links verwendent werden)

d) Workshops

• SELFHTML: text-decoration (Textdekoration)
  SELFHTML: Beispiel

• W3Schools: Beispiel: Decorate the text

e) Syntax

• Web Design Group: Syntax: text-decoration

7 Text-Transformation (text-transform)

a) Bezeichnungen

• text-transform = text transformation = Text-Umwandlung

b) Prinzip

Mit dieser Eigenschaft kann in einem Textbereich Klein- oder Grossbuchstaben oder Kapitälchen erzwungen werden, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.

• capitalize = Wortanfänge als Grossbuchstabe (capitalizes first character of each word)
• uppercase = Nur Grossbuchstaben (capitalizes all characters of each word)
• lowercase = Nur Kleinbuchstaben (uses small letters for all characters of each word)
• none = normal = keine Text-Transformation (the initial value)

c) Beispiel: Alles Grossbuchstaben (uppercase)

<p style="text-transform:uppercase">
Dieser Text wurde in Gross- und Kleinbuchstaben 
geschrieben aber so formatiert, dass er in 
Grossbuchstaben dargestellt wird.
</p>	 

Dieser Text wurde in Gross- und Kleinbuchstaben geschrieben aber so formatiert, dass er in Grossbuchstaben dargestellt wird.

d) Workshops

• SELFHTML: text-transform (Text-Transformation)
  SELFHTML: Beispiel

e) Syntax

• Web Design Group: Syntax: text-transform

8 Text-Schatten (text-shadow)

a) Bezeichnungen

• text-shadow = Textschatten

b) Prinzip

Mit dieser Angabe kann für Text ein Schatteneffekt erzeugt werden.
Der Schatten wird drei Pixel nach rechts und zwei Pixel nach unten versetzt angezeigt.
Diese Eigenschaft, die zu CSS 2.0 gehört, wird bislang nur von Safari 1.2 und Konqueror 3.4 interpretiert.
Diese Eigenschaft wird in CSS 2.1 voraussichtlich nicht mehr enthalten sein.

c) Beispiel

• SELFHTML: text-shadow (Textschatten)
  SELFHTML: Beispiel

9 Sprachauszeichnung (lang)

a) :lang (Pseudoklasse für Sprachauszeichnung)

• SELFHTML: :lang (Pseudoklasse für Sprachauszeichnung)
  SELFHTML: Beispiel: Viele Websites enthalten fremdsprachige Wörter

b) Für Elemente

Verschiedene Sprachvarianten (":lang"):
Allows the author to specify a language to use in a specified element

• W3Schools: Pseudo-classe ":lang"
• W3Schools: Beispiel

10 Automatische Anführungszeichen

f) Automatische Anführungszeichen

• SELFHTML: Automatische Anführungszeichen
  SELFHTML: Beispiel: Sie sagte

↑