Die folgenden Attribute gehören, wie im Kapitel zuvor, ebenfalls zur Attributgruppe
PresentationAttributes-TextContentElements.
- Zeichenabstand - letter-spacing
- Wortabstand - word-spacing
letter-spacing
Voreinstellung: normal.
Den Abstand der einzelnen Zeichen einer Zeichenkette zueinander, also den
Zeichenabstand, können Sie mit
dem Attribut letter-spacing verändern. Mögliche
Werte für dieses Attribut sind entweder normal oder
eine Längenangabe, wobei auch negative Zahlen möglich sind.
word-spacing
Voreinstellung: normal.
Der Wortabstand innerhalb einer Zeichenkette wird mit dem Attribut
word-spacing eingestellt. Dieses Attribut akzeptiert
ebenfalls normal oder eine Längenangabe als Wert.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="190"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Abstände im Text</title>
<desc>Die Attribute letter-spacing und word-spacing</desc>
<defs>
<style type="text/css"><![CDATA[
text {font-family:Verdana,sans-serif;
font-size:20px;}
.rot {fill:red;}
.blau {fill:blue;}
]]></style>
</defs>
<!-- Zeichenabstand -->
<g class="rot">
<text x="20" y="40" letter-spacing="10">
Zeichenabstand 10
</text>
<text x="20" y="70" letter-spacing="-2">
Zeichenabstand -2
</text>
</g>
<!-- Wortabstand -->
<g class="blau">
<text x="20" y="120" word-spacing="10">
Abstand der Worte 10
</text>
<text x="20" y="150" word-spacing="-5">
Abstand der Worte -5
</text>
</g>
</svg>
|