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.

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS text-emphasis-position xác định vị trí vẽ các dấu nhấn mạnh. Tương tự như văn bản được hiển thị bởi phần tử HTML <ruby>, nếu không có đủ chỗ cho các dấu nhấn mạnh, chiều cao dòng sẽ được tăng lên.

Try it

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

Cú pháp

css

/* Giá trị ban đầu */
text-emphasis-position: auto;

/* Giá trị từ khóa */
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;

/* Giá trị toàn cục */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;

Giá trị

Thuộc tính nhận một hoặc hai giá trị:

Nếu chỉ có một giá trị được cung cấp, giá trị đó có thể là auto, over hay under. Khi chỉ dùng over hay under, right được giả định là vị trí mặc định.
Nếu có hai giá trị được cung cấp, chúng phải bao gồm một trong over hay under và một trong right hay left. Thứ tự của chúng không quan trọng.

Các giá trị bao gồm:

auto: Vẽ dấu nhấn mạnh bên trên văn bản trong chế độ viết ngang và bên phải văn bản trong chế độ viết dọc.
over: Vẽ dấu nhấn mạnh bên trên văn bản trong chế độ viết ngang.
under: Vẽ dấu nhấn mạnh bên dưới văn bản trong chế độ viết ngang.
right: Vẽ dấu nhấn mạnh bên phải văn bản trong chế độ viết dọc.
left: Vẽ dấu nhấn mạnh bên trái văn bản trong chế độ viết dọc.

Mô tả

Vị trí ưa thích của các dấu nhấn mạnh phụ thuộc vào ngôn ngữ. Ví dụ, trong tiếng Nhật, vị trí ưa thích là over right. Trong tiếng Trung, vị trí ưa thích là under right. Bảng thông tin dưới đây tóm tắt các vị trí dấu nhấn mạnh ưa thích cho tiếng Trung, tiếng Mông Cổ và tiếng Nhật:

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.

Vị trí dấu nhấn mạnh và ruby ưa thích
Ngôn ngữ	Vị trí ưa thích	Minh họa
Nhật Bản	over	right
Hàn Quốc
Mông Cổ
Trung Quốc	under	right

Note: Thuộc tính text-emphasis-position không thể được đặt, và do đó cũng không thể được đặt lại, bằng thuộc tính viết tắt text-emphasis.

Định nghĩa hình thức

Initial value	`auto`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Cú pháp hình thức

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

Ví dụ

Thêm vị trí dấu nhấn mạnh

Sử dụng menu thả xuống để thay đổi vị trí của các dấu nhấn mạnh. Điều này sẽ thay đổi class trên phần tử <section>, từ đó cập nhật vị trí của các dấu nhấn mạnh trên văn bản.

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

Kết quả

Sử dụng menu thả xuống "Emphasis position" để chọn vị trí của các dấu nhấn mạnh. Tùy chọn preferred trong menu thả xuống sử dụng các vị trí ưa thích, như đã giải thích trong phần Mô tả.

Ưu tiên ruby hơn dấu nhấn mạnh

Một số trình soạn thảo thích ẩn dấu nhấn mạnh khi chúng xung đột với ruby. Trong HTML, điều này có thể thực hiện bằng quy tắc kiểu sau:

css

ruby {
  text-emphasis: none;
}

Ưu tiên dấu nhấn mạnh hơn ruby

Một số trình soạn thảo khác thích ẩn ruby khi chúng xung đột với dấu nhấn mạnh. Trong HTML, điều này có thể thực hiện bằng mẫu sau:

css

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

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

Đặc tả kỹ thuật

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

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content

Ngôn ngữ	Vị trí ưa thích		Minh họa
Ngôn ngữ	Ngang	Dọc	Minh họa
Nhật Bản	over	right
Hàn Quốc
Mông Cổ
Trung Quốc	under	right