text-emphasis

Die CSS-Eigenschaft text-emphasis wird, wie der Name schon sagt, verwendet, um Text in CSS hervorzuheben. Dies geschieht durch das Anwenden spezieller Markierungen auf den Text eines Elements.

.element {
  text-emphasis: circle red;
}

Sie denken vielleicht an Textbetonung wie Kursivschrift oder Fettdruck, aber das ist nicht gemeint! Mit den speziellen Markierungen von text-emphasis können Sie die Aufmerksamkeit auf Textelemente wie Buchstaben und Zahlen lenken (aber nicht auf Leerzeichen oder Steuerzeichen). Dies wird häufig in ostasiatischen Sprachen verwendet.

Syntax

Die Eigenschaft text-emphasis ist eine Kurzform für die Einstellung von text-emphasis-style und text-emphasis-color in einer Deklaration.

text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>

Daher ähnelt die Syntax der vieler anderer Kurzform-Eigenschaften, bei denen sie mehr als einen Wert enthält.

h2 {
  -webkit-text-emphasis: circle red;
  text-emphasis: circle red;
}

Bestandteileigenschaften

Betrachten wir speziell text-emphasis-style und text-emphasis-color, die beiden Eigenschaften, aus denen die Kurzform text-emphasis besteht.

text-emphasis-style

Die CSS-Eigenschaft text-emphasis-style wird verwendet, um das Aussehen von Hervorhebungsmarkierungen festzulegen. Der CSS-Stil für die Textbetonung kann als Schlüsselwortwerte oder als Zeichenfolgenwerte definiert werden.

• Schlüsselwortwerte:
  • filled: Die Hervorhebungsmarkierungen sind solide.
  • open: Die Hervorhebungsmarkierungen sind umrandet, aber nicht mit einer Vollfarbe gefüllt.
  • dot: Die Hervorhebungsmarkierungen sind einfache Punkte.
  • circle: Die Hervorhebungsmarkierungen sind größere, gefüllte Kreise.
  • double-circle: Die Hervorhebungsmarkierungen sind größere, gefüllte Kreise mit einer zusätzlichen Umrandung um jeden Kreis.
  • triangle: Die Hervorhebungsmarkierungen werden als dreieckige Spitzen angezeigt, ähnlich wie Pfeile, die nach oben zeigen.
  • sesame: Die Hervorhebungsmarkierungen werden als schräge Linien angezeigt, ähnlich wie Backslashes (\).
  • none: Die Hervorhebungsmarkierungen werden nicht angezeigt.
• Zeichenfolgenwert: Wir können eine eigene Zeichenfolge als Hervorhebungsmarkierungen angeben. Sie kann ein einzelnes Zeichen enthalten, das als CSS-Hervorhebungssymbol verwendet wird, z. B. 'x', '点', '*' usw.

text-emphasis-color

Die CSS-Eigenschaft text-emphasis-color wird verwendet, um die Hervorhebungsmarkierung einzufärben. Sie ist sehr flexibel, was die verwendbaren Farben angeht, sodass wir benannte Farben, RGB, RGBA, HEX, HSL und HSLA als Werte verwenden können.

Hinweis: Wenn Sie keine Farbe angeben, verwendet die CSS-Textbetonung die Farbe des Textes.

text-emphasis-position

Dies ist zwar kein Teil der Kurzform, aber es lohnt sich, es zu erwähnen, da man oft die Platzierung von Hervorhebungsmarkierungen anpassen muss, während man sie definiert.

Die CSS-Eigenschaft text-emphasis platziert diese Hervorhebungsmarkierungen standardmäßig über dem Text. Die CSS-Eigenschaft text-emphasis-position kann verwendet werden, um diese Platzierung anzupassen.

Auch dies wird häufig in ostasiatischen Sprachen verwendet. Die bevorzugte Position von Hervorhebungsmarkierungen hängt von der Sprache ab. Im Japanischen ist die bevorzugte Position beispielsweise „over right“. Im Chinesischen hingegen ist die bevorzugte Position „under right“.

Hinweis: text-emphasis-position kann nicht mit der Kurzform-Eigenschaft text-emphasis gesetzt und auch nicht zurückgesetzt werden.

Die CSS-Eigenschaft text-emphasis-position verwendet Schlüsselwortwerte wie

• over: Wird verwendet, um Markierungen über dem Text in horizontaler Schreibrichtung zu zeichnen.
• under: Wird verwendet, um Markierungen unter dem Text in horizontaler Schreibrichtung zu zeichnen.
• right: Wird verwendet, um Markierungen rechts vom Text in vertikaler Schreibrichtung zu zeichnen.
• left: Wird verwendet, um Markierungen links vom Text in vertikaler Schreibrichtung zu zeichnen.

Beachten Sie jedoch, dass für die Funktionsweise der Eigenschaft zwei Werte erforderlich sind. Zum Beispiel:

text-emphasis-position: over right;
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left

MDN hat eine informative Tabelle, die die bevorzugten Positionen für Hervorhebungsmarkierungen für Chinesisch, Mongolisch und Japanisch zusammenfasst. Wir drucken sie hier zur Bequemlichkeit erneut ab.

Sprache	Bevorzugte horizontale	Bevorzugte vertikale
Japanisch	over	right
Koreanisch	over	right
Mongolisch	under	right
Chinesisch	under	right

Weitere Informationen

• CSS Text Decoration Module Level 3 Spezifikation
• MDN-Dokumentation
• Khan Academy Demo

Browser-Unterstützung

Verwandt