text-emphasis-position

Baseline 廣泛可用 *

此特性已經十分成熟，可在許多裝置和瀏覽器版本上使用。自 2022 年 3 月起，它已在各瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

text-emphasis-position CSS 屬性設定著重號的繪製位置。與 <ruby> HTML 元素渲染的文字類似，如果著重號沒有足夠的空間，行高會增加。

試一試

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;
}

語法

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;

值

該屬性接受一個或兩個值

如果只提供一個值，它可以是 auto、over 或 under。當只使用 over 或 under 時，right 被假定為預設位置。
如果提供兩個值，它們必須包含 over 或 under 中的一個，以及 right 或 left 中的一個。它們的順序無關緊要。

值包括

auto: 在水平書寫模式下在文字上方繪製標記，在垂直書寫模式下在文字右側繪製標記。
over: 在水平書寫模式下在文字上方繪製標記。
下: 在水平書寫模式下在文字下方繪製標記。
right: 在垂直書寫模式下在文字右側繪製標記。
left: 在垂直書寫模式下在文字左側繪製標記。

描述

著重號的首選位置取決於語言。例如，在日語中，首選位置是 over right。而在中文中，首選位置是 under right。下面的資訊表格總結了中文、蒙古語和日語的首選著重號位置。

Emphasis marks appear over each emphasized character in horizontal Japanese text.

Emphasis marks appear on the right of each emphasized character in vertical Japanese text.

首選著重號和注音位置
語言	首選位置	圖示
日語	over	right
韓語
蒙古語
中文	下	right

注意： text-emphasis-position 不能使用 text-emphasis 縮寫屬性設定，因此也不能重置。

正式定義

初始值	`auto`
應用於	所有元素
繼承性	是
計算值	同指定值
動畫型別	離散

正式語法

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

示例

新增著重號位置

使用下拉選單更改著重號的位置。這將更改 <section> 元素上的類，從而更新文字上著重號的位置。

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);

結果

使用“著重號位置”下拉選單選擇著重號的位置。下拉選單中的 preferred 選項使用首選位置，如描述部分所述。

著重號優先於注音

一些編輯者傾向於在著重號與注音衝突時隱藏著重號。在 HTML 中，這可以透過以下樣式規則實現

css

ruby {
  text-emphasis: none;
}

注音優先於著重號

另一些編輯者傾向於在注音與著重號衝突時隱藏注音。在 HTML 中，這可以透過以下模式實現

css

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

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

規範

規範
CSS 文字裝飾模組級別 3 # text-emphasis-position-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題

語言	首選位置		圖示
語言	水平	垂直	圖示
日語	over	right
韓語
蒙古語
中文	下	right