text-decoration-skip

Die Eigenschaft text-decoration-skip gibt an, wo ein Text-Unterstrich, Oberstrich oder Durchstreich unterbrochen werden soll. Dies verbessert die Lesbarkeit von dekoriertem Text und korrigiert die Grammatik von Satzzeichen für einige Sprachen.

Hier ist ein Beispiel

a {
  text-decoration-skip: ink;
}

Achtung! Der Wert ink wurde zu einer völlig neuen Eigenschaft geändert, text-decoration-skip-ink: auto;.

Wenn Ihr Browser diese Eigenschaft unterstützt, werden Sie hier feststellen, dass die Unterlängen jedes Zeichens (wie „y“ und „p“) kleine weiße Leerzeichen am Rand haben

Wenn Ihr Browser diese Funktion nicht unterstützt, sollten Sie dies von der Eigenschaft in einem unterstützenden Browser erwarten

Werte

• objects: der Standardwert. Die Dekorationslinie überspringt Inline-Objekte wie Bilder oder Inline-Block-Elemente.
• none: Die Dekorationslinie durchquert alles, einschließlich Inline-Objekte, die normalerweise übersprungen würden.
• spaces: Die Dekorationslinie überspringt Leerzeichen, Worttrennerzeichen und alle Leerzeichen, die mit letter-spacing oder word-spacing gesetzt sind.
• ink: Die Dekorationslinie überspringt Glyphen oder Unterlängen.
• edges: Die Dekorationslinie beginnt leicht nach der Startkante des Inhalts und endet leicht vor der Endkante des Inhalts. Diese Eigenschaft wurde entwickelt, um zu verhindern, dass zwei nebeneinander liegende unterstrichene Elemente so aussehen, als würden sie eine einzige Unterstreichung teilen. Dies ist nützlich für Texte in chinesischer Sprache, die Unterstreichungen für Satzzeichen verwenden.
• box-decoration: Die Dekorationslinie überspringt geerbte Ränder, Rahmen und Auffüllungen.

Update: Anscheinend wurde der Wert trailing-spaces jetzt als veraltet eingestuft, da er nicht mehr in der Spezifikation zu finden ist.

Da diese Eigenschaft noch von keinem Browser unterstützt wird, gibt es keine Demo, aber hier ist ein Beispiel dafür, wie jeder der Werte aussehen könnte, sobald text-decoration-skip implementiert ist.

text-decoration-skip in OSX und iOS

Ende 2014 hat Apple eine Änderung an text-decoration in Safari und iOS-Browsern vorgenommen, die imitiert, wie text-decoration-skip: ink; funktionieren sollte. Obwohl noch keiner der Werte von text-decoration-skip offiziell implementiert ist, können Sie dieses Standardverhalten mit -webkit-text-decoration-skip: none; deaktivieren.

Weitere Informationen

• CSS Text Decoration Module Level 4
  Editor's Draft
• text-decoration-skip bei MSDN.
• Diskussion über die Hinzufügung von trailing-spaces als Wert aus der W3C-Mailingliste.
• Verbesserung der Textlesbarkeit für dyslektische Benutzer mit Skip-Ink-Unterstrichen
• text-decoration-skip auf MDN
• text-decoration-skip-ink auf MDN

Browser-Unterstützung

Verwandt