CSS Textdekoration

Das CSS Textdekoration-Modul definiert Funktionen im Zusammenhang mit Textdekorationen, wie Unterstreichungen, Textschatten und Betonungszeichen. Textdekorationseigenschaften können visuelle Hinweise auf Rechtschreibfehler, Grammatikprobleme und Links bieten. Diese Funktionen können dazu beitragen, die Benutzerfreundlichkeit, Zugänglichkeit, Funktionalität und Ästhetik Ihres Textes zu verbessern.

Durch Variieren der Farbe, des Stils und der Dicke der Textdekoration mithilfe von Pseudo-Klassen und Pseudo-Elementen können Sie die Betonung im Text auf eine Weise hervorheben, die sich nicht nur auf Farbe stützt.

Mehrere Funktionen können helfen, die Lesbarkeit des Textes zu verbessern:

text-decoration-skip-ink kann die Lesbarkeit erhöhen, indem Nachschreibungen übersprungen werden.
text-underline-offset ermöglicht es Ihnen, die Unterstreichungsplatzierung feinzutunen, um besser mit den Schriftmetriken oder dem Designästhetik übereinzustimmen, was insbesondere für einzigartige Schriftarten nützlich sein kann.
text-shadow-Farben, die mit der Text-color kontrastieren, können den Text hervorheben, wenn er auf einem Hintergrund mit unzureichendem Kontrast platziert wird.

Diese Funktionen tragen alle zur besseren Lesbarkeit und damit zur Zugänglichkeit bei. Das Reduzieren von visuellem Rauschen und das Verbessern der Textklarheit ist besonders hilfreich für Benutzer mit Legasthenie oder Sehschwäche.

In den Schriftsystemen einiger Sprachen tragen Überstriche und Unterstriche eine semantische Bedeutung. CSS ermöglicht es Ihnen, das Styling an kulturelle Normen anzupassen. Textdekorationseigenschaften sind besonders nützlich für Sprachen, die keine lateinbasierten Schriftsysteme verwenden und stattdessen andere Unterstrichplatzierungen folgen, wie Japanisch und Koreanisch.

Mit Textdekorationseigenschaften können Sie auch redaktionelle und lokalisationsbezogene Standards aus Druckmedien einhalten. Zum Beispiel können Sie mit einem Durchstrich (line-through) den Status von Inhalten anzeigen. Verwenden Sie ihn, um Benutzer darüber zu informieren, dass Inhalte entfernt oder Preise halbiert wurden. Diese Funktion ermöglicht es Ihnen, sowohl den Original- als auch den aktualisierten Inhalt darzustellen. Überstriche oder doppelte Unterstriche werden häufig für akademische und redaktionelle Anmerkungen verwendet.

Textdekoration in Aktion

p {
  margin: 1em 0;
}
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
  text-underline-offset: -5px;
}
.shadow {
  text-shadow: red 4px 4px 0;
}
.emphasis {
  text-emphasis: triangle red;
}

<p class="under">A red underline</p>
<p class="over">A wavy lime overlines</p>
<p class="line">This has a line-through it</p>
<p class="underover">This has a dashed underline and overline</p>
<p class="thick">An offset solid purple underline</p>
<p class="shadow">This has a red shadow</p>
<p class="emphasis">Emphasized with red triangles</p>

Einführung in Textschatten: Überblick über die Komponenten der text-shadow-Eigenschaft und das Erstellen mehrerer Textschatten

Spezifikationen

Specification
CSS Text Decoration Module Level 3
CSS Text Decoration Module Level 4

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS Textdekoration

Textdekoration in Aktion

Referenz

Eigenschaften

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch

Help improve MDN