`text-emphasis-position` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die text-emphasis-position CSS Eigenschaft legt fest, wo Hervorhebungszeichen gezeichnet werden. Ähnlich wie der durch das <ruby> HTML-Element gerenderte Text, wird die Zeilenhöhe erhöht, wenn nicht genügend Platz für Hervorhebungszeichen vorhanden ist.

Probieren Sie es aus

text-emphasis-position: auto;

text-emphasis-position: over right;

text-emphasis-position: under right;

text-emphasis-position: auto;
writing-mode: vertical-rl;

text-emphasis-position: over left;
writing-mode: vertical-rl;

text-emphasis-position: over right;
writing-mode: vertical-rl;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled double-circle #ffb703;
}

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 ein 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 sind, müssen diese entweder over oder under und right oder left enthalten. Die Reihenfolge spielt keine Rolle.

Die Werte umfassen:

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 von Hervorhebungszeichen hängt von der Sprache ab. Für Japanisch ist beispielsweise die bevorzugte Position over right. Für Chinesisch hingegen ist die bevorzugte Position under right. Die informative Tabelle unten fasst die bevorzugten Positionen von Hervorhebungszeichen für Chinesisch, Mongolisch und Japanisch zusammen:

Hervorhebungszeichen erscheinen über jedem hervorgehobenen Zeichen in horizontalem japanischem Text.

Hervorhebungszeichen erscheinen rechts von jedem hervorgehobenen Zeichen in vertikalem japanischem Text.

Bevorzugte Position von Hervorhebungs- und Ruby-Zeichen
Sprache	Bevorzugte Position	Illustration
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 Kurzeigenschaft verwendet wird.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Positionen der Hervorhebungszeichen hinzufügen

Verwenden Sie das Dropdown-Menü, um die Position der Hervorhebungszeichen zu ändern. Dies wird die Klasse des <section> Elements ändern, die wiederum die Position der Hervorhebungszeichen im Text aktualisiert.

HTML

<p class="unsupported">
  The <code>auto</code> value is not supported in your browser.
</p>
<label for="position">Emphasis position:</label>
<select id="position">
  <option value="auto">auto</option>
  <option value="over-right">over right</option>
  <option value="over-left">over left</option>
  <option value="under-right">under right</option>
  <option value="under-left">under left</option>
  <option value="preferred">preferred</option>
</select>

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

.unsupported {
  color: red;
}
@supports (text-emphasis-position: auto) {
  .unsupported {
    display: none;
  }
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}
section {
  display: flex;
  justify-content: space-around;
}

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"] {
}

const position = document.querySelector("#position");
const setting = document.querySelector("#setting");
const updateClass = () => {
  const currentClass = setting.classList;
  setting.classList.replace(currentClass, position.value);
};
position.addEventListener("change", updateClass);

Ergebnis

Verwenden Sie das Dropdown-Menü "Emphasis position", um den Ort der Hervorhebungszeichen auszuwählen. Die preferred Option im Dropdown verwendet die bevorzugten Positionen, wie im Abschnitt Beschreibung erläutert.

Ruby über Hervorhebungszeichen bevorzugen

Einige Editoren bevorzugen es, Hervorhebungszeichen auszublenden, wenn sie mit Ruby kollidieren. In HTML kann dies mit der folgenden Stilregel erreicht werden:

css

ruby {
  text-emphasis: none;
}

Hervorhebungszeichen über Ruby bevorzugen

Andere Editoren bevorzugen es, Ruby auszublenden, wenn sie mit Hervorhebungszeichen kollidieren. In HTML kann dies mit dem folgenden Muster erreicht werden:

css

em {
  text-emphasis: dot; /* Set text-emphasis for <em> elements */
}

em rt {
  display: none; /* Hide ruby inside <em> elements */
}

Spezifikationen

Spezifikation
CSS Text Decoration Module Level 3 # text-emphasis-position-property

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Sprache	Bevorzugte Position		Illustration
Sprache	Horizontal	Vertikal	Illustration
Japanisch	over	right
Koreanisch
Mongolisch
Chinesisch	under	right

text-emphasis-position CSS property

HTML

CSS

Ergebnis

Help improve MDN

`text-emphasis-position` CSS property