CSS-Textdekoration

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

Indem Sie die Farbe, den Stil und die Dicke der Textdekoration mithilfe von Pseudoklassen und Pseudoelementen variieren, können Sie die Betonung im Text auf eine Weise hervorheben, die sich nicht nur auf Farbe verlässt.

Mehrere Funktionen können die Lesbarkeit von Text verbessern:

• text-decoration-skip-ink kann die Lesbarkeit erhöhen, indem es Unterlängen überspringt.
• text-underline-offset ermöglicht es Ihnen, die Platzierung der Unterstreichung fein abzustimmen, um besser zu den Schriftmetriken oder Designästhetiken zu passen, was besonders nützlich für einzigartige Schriftarten sein kann.
• text-shadow-Farben, die im Kontrast zur Textcolor stehen, können den Text visuell hervorheben, wenn er auf einem Hintergrund mit unzureichendem Kontrast platziert wird.

Diese Funktionen helfen alle, die Lesbarkeit und damit die Zugänglichkeit zu verbessern. Die Reduzierung von visuellem Rauschen und die Verbesserung der Textklarheit ist besonders hilfreich für Nutzer mit Legasthenie oder Sehschwäche.

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

Textdekorationsfunktionen ermöglichen es Ihnen auch, redaktionelle und Lokalisierungsstandards aus Printmedien zu folgen. Beispielsweise können Sie mit einem Durchstreichen (line-through) den Status von Inhalten angeben. Verwenden Sie es, um Benutzer darüber zu informieren, dass Inhalte entfernt wurden oder dass Preise halbiert wurden. Diese Funktion ermöglicht es Ihnen, sowohl den ursprünglichen als auch den aktualisierten Inhalt zu präsentieren. Überstriche oder doppelte Unterstreichungen werden häufig für akademische und redaktionelle Anmerkungen verwendet.

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>