text-emphasis-position
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Die text-emphasis-position
CSS Eigenschaft legt fest, wo Hervorhebungszeichen gezeichnet werden. Ähnlich wie der Text, der durch das <ruby>
HTML-Element gerendert wird, wird die Zeilenhöhe erhöht, wenn nicht genügend Platz für Hervorhebungszeichen vorhanden ist.
Probieren Sie es aus
Syntax
/* Initial value */
text-emphasis-position: auto;
/* Keyword values */
text-emphasis-position: over;
text-emphasis-position: under;
text-emphasis-position: over right;
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;
text-emphasis-position: left over;
text-emphasis-position: right over;
text-emphasis-position: right under;
text-emphasis-position: left under;
/* Global values */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;
Werte
Die Eigenschaft akzeptiert einen oder zwei Werte:
- Wenn nur ein Wert angegeben ist, kann dieser
auto
,over
oderunder
sein. Wenn nurover
oderunder
verwendet wird, wirdright
als Standardposition angenommen. - Wenn zwei Werte angegeben werden, müssen sie einen von
over
oderunder
und einen vonright
oderleft
enthalten. Ihre Reihenfolge spielt keine Rolle.
Die Werte sind:
auto
-
Zeichnet Zeichen über dem Text im horizontalen Schreibmodus und rechts vom Text im vertikalen Schreibmodus.
over
-
Zeichnet Zeichen über dem Text im horizontalen Schreibmodus.
under
-
Zeichnet Zeichen unter dem Text im horizontalen Schreibmodus.
right
-
Zeichnet Zeichen rechts vom Text im vertikalen Schreibmodus.
left
-
Zeichnet Zeichen links vom Text im vertikalen Schreibmodus.
Beschreibung
Die bevorzugte Position der Hervorhebungszeichen hängt von der Sprache ab. Im Japanischen ist beispielsweise die bevorzugte Position over right
. Im Chinesischen hingegen ist die bevorzugte Position under right
. Die informative Tabelle unten fasst die bevorzugten Positionen der Hervorhebungszeichen für Chinesisch, Mongolisch und Japanisch zusammen:
Sprache | Bevorzugte Position | Illustration | ||
---|---|---|---|---|
Horizontal | Vertikal | |||
Japanisch | over | right | ||
Koreanisch | ||||
Mongolisch | ||||
Chinesisch | under | right |
Hinweis: Die text-emphasis-position
kann nicht gesetzt und daher auch nicht zurückgesetzt werden, indem die text-emphasis
Kurzform verwendet wird.
Offizielle Definition
Initialer Wert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Offizieller Syntax
Beispiele
Positionen von Hervorhebungszeichen hinzufügen
Verwenden Sie das Dropdown-Menü, um die Position der Hervorhebungszeichen zu ändern. Dies ändert die Klasse auf dem <section>
Element, was wiederum die Position der Hervorhebungszeichen im Text aktualisiert.
HTML
<section id="setting" class="auto">
<p class="horizontal" lang="zh">你好世界</p>
<!-- Hello World in Chinese -->
<p class="vertical" lang="ja">世界、こんにちは。</p>
<!-- Hello World in Japanese -->
</section>
CSS
section p {
text-emphasis: filled circle tomato;
text-emphasis-position: auto;
}
.over-right p,
.preferred p [lang="ja"] {
text-emphasis-position: over right;
}
.over-left p {
text-emphasis-position: over left;
}
.under-right p,
.preferred p [lang="zh"] {
text-emphasis-position: under right;
}
.under-left p {
text-emphasis-position: under left;
}
.preferred p [lang="ja"] {
}
Ergebnis
Verwenden Sie das Dropdown-Menü "Emphasis position", um den Ort der Hervorhebungszeichen auszuwählen. Die Option preferred
im Dropdown verwendet die bevorzugten Positionen, wie im Abschnitt Beschreibung erklärt.
Bevorzugen von Ruby über Hervorhebungszeichen
Einige Editoren bevorzugen es, Hervorhebungszeichen auszublenden, wenn sie mit Ruby in Konflikt stehen. In HTML kann dies mit der folgenden Stilregel geschehen:
ruby {
text-emphasis: none;
}
Bevorzugen von Hervorhebungszeichen über Ruby
Andere Editoren bevorzugen es, Ruby auszublenden, wenn es mit Hervorhebungszeichen in Konflikt steht. In HTML kann dies mit dem folgenden Muster geschehen:
em {
text-emphasis: dot; /* Set text-emphasis for <em> elements */
}
em rt {
display: none; /* Hide ruby inside <em> elements */
}
Spezifikationen
Specification |
---|
CSS Text Decoration Module Level 3 # text-emphasis-position-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
text-underline-position
text-emphasis-style
text-emphasis-color
text-emphasis
Kurzform-Eigenschaftwriting-mode