Dekorativer Text

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Die Eigenschaft text-decoration kann man zusammen mit den folgenden vier Werten als Gestaltungsmittel einsetzen:

  • underline für unterstrichenen Text
  • overline für überstrichenen Text
  • blink für blinkenden Text
  • line-through für durchgestrichenen Text

Zusätzlich zu diesen vier Werten gibt es noch den Standardwert none. Er erzeugt einfachen Normaltext ohne besondere Merkmale.

Blinkenden Text werden wir in unseren Erklärungen vernachlässigen. Schon als Netscape das <blink>-Tag als nicht standardkonformes HTML-Tag einführte, stieß es auf Ablehnung bei den meisten Designern und Benutzern. Heute steht blinkender Text als Synonym für schlechtes und amateurhaftes Design. Viele aktuelle Browser unterstützen den CSS-Wert daher erst gar nicht.

Auch unterstrichener Text, der von vielen Browsern immer noch unterstützt wird, gilt für die Gestaltung von Webseiten als keine gute Idee. Er führt schnell zur Irritation beim Benutzer, weil standardmäßig Links mit Unterstreichungen hervorgehoben werden und daran vom Benutzer als solche erkannt werden.

Oberstriche hingegen können nützlich sein, wenn sie als Begrenzungslinien eingesetzt werden, die der Breite eines Textteils entsprechen sollen. Das unterscheidet übrigens den überstrichenen Text von der Rahmenlinie, die nicht nur die Inhaltsbreite, sondern auch den Innenrand einer Box umfasst. In der folgenden Abbildung finden Sie overline und border im direkten Vergleich und darunter den zugehörigen HTML-Code.

overline erzeugt eine Linie von gleicher Länge wie der Text

Abbildung: overline erzeugt eine Linie von gleicher Länge wie der Text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>overline erzeugt eine Linie von gleicher Laenge wie der Text</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    body {
      background-color: #FFFFFF;
      font-family: helvetica, arial, sans-serif;
    }
    h1 {
      margin-top: 70px;
      text-align: center;
      text-decoration: overline;
    }
    h2 {
      text-align: center;
      border-top: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Diese Überschrift benutzt overline</h1>
  <h2>Diese Überschrift benutzt einen Box-Rahmen</h2>
</body>
</html>

Für die obere Überschrift haben wir die Eigenschaft text-decoration mit dem Wert overline verwendet. Nur der Text wird überstrichen. Die Rahmenlinie über der zweiten Überschrift verläuft über die ganze Seitenbreite, weil sie das Kopfende der Box des Blockelements h1 anzeigt.

Um eine Trennlinie zwischen zwei Textelementen einzusetzen, kann man auch das HTML-Tag <hr> einsetzen. Doch auch wenn man seine Breite und Ausrichtung genau bestimmen kann, empfiehlt sich trotzdem der Einsatz von overline. Egal wie breit eine Seite dargestellt wird oder welche Schriftgröße angewandt wird, die Linie entspricht immer genau der Länge des Textes, zu dem sie gehört.

Der vierte Wert für text-decoration ist line-through. Mit ihm erzeugt man einen durchgestrichenen Text. HTML bietet dafür auch das Tag <del> an, das eine semantische Bedeutung besitzt und etwa beim Redigieren von HTML-Texten durchaus hilfreich ist. Möchte man jedoch nur aus Designgründen eine Durchstreichung vornehmen, sollte der CSS-Wert zum Einsatz kommen. Die nächste Abbildung und der daran anschließende HTML-Code zeigen Wirkung und Einsatz von line-through.

Durchgestrichener Text mit line-through

Abbildung: Durchgestrichener Text mit line-through.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Durchgestrichener Text mit line-through</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    body {
      background-color: #FFFFFF;
      font-family: helvetica, arial, sans-serif;
      font-size: 1.1em;
    }
    .durchgestrichen {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <p>Dieser Absatz hat keine besonderen Parameter und sieht deswegen ganz normal aus.</p>
  <p class="durchgestrichen">Dieser Absatz wiederum wurde im HTML-Tag der CSS-Klasse "durchgestrichen" zugewiesen, so dass er später im Dokument durchgestrichen erscheint.</p>
  <p>Hier werden nur ein paar Wörter <span class="durchgestrichen">auffällig durchgestrichen</span>. Ich habe einfach einen span-Abschnitt und eine CSS-Regel dafür definiert.</p>
</body>
</html>

Das del-Element
Dieses Element wird hauptsächlich bei Textbearbeitungen benutzt, um deutlich zu machen, dass der betreffende Text gelöscht wurde. Zu diesem Zweck ist es in der HTML-Spezifikation enthalten. Browser stellen einen so ausgezeichneten Text durchgestrichen dar.
Durchgestrichenen Text mit dieser Bedeutung sollten Sie deshalb mit del auszeichen, um die Semantik zu erhalten. Wenn Sie diesen Effekt aus anderen Gründen verwenden möchten, sollten Sie hingegen ein div- oder ein span-Element benutzen, dem Sie eine CSS-Regel zuweisen.
Hand in Hand mit dem del-Element geht das ins-Element, mit dem eingefügter Text kenntlich gemacht werden kann.

Ein paar abschließende Worte sollen noch dem Wert none der Eigenschaft text-decoration gehören: Natürlich kommt er nur äußerst selten zum Einsatz, da Text auch standardmäßig keine Dekoration hat. Manchmal ist er aber durchaus nützlich: Mit kann man zum Beispiel die Unterstreichungen von Hyperlinks ausschalten oder auch die Vererbung von Textdekorationen an untergeordnete Elemente verhindern.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg