Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 8

8.7 Zeichen- und Wortabstaende

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>
      



index  |  Kapitel 8  |  8.6  <<  | 8.7 |  >>  8.8   Moegliche Grundlinien und das tpath-Element