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

css
/* 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 oder under sein. Wenn nur over oder under verwendet wird, wird right als Standardposition angenommen.
  • Wenn zwei Werte angegeben werden, müssen sie einen von over oder under und einen von right oder left 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.

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:

Bevorzugte Position von Hervorhebungszeichen und Ruby
Sprache Bevorzugte Position Illustration
Horizontal Vertikal
Japanisch over right Hervorhebungszeichen erscheinen über jedem betonten Zeichen im horizontalen japanischen Text. Hervorhebungszeichen erscheinen rechts von jedem betonten Zeichen im vertikalen japanischen Text.
Koreanisch
Mongolisch
Chinesisch under right Hervorhebungszeichen erscheinen unter jedem betonten Zeichen im horizontalen vereinfachten chinesischen Text.

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 Wertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Offizieller Syntax

text-emphasis-position = 
[ over | under ] &&
[ right | left ]?

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

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

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:

css
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:

css
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