CSS text decoration

Module CSS text decoration định nghĩa các tính năng liên quan đến trang trí văn bản, như gạch chân, text shadow và emphasis mark. Các tính năng trang trí văn bản có thể cung cấp các gợi ý thị giác cho lỗi chính tả, vấn đề ngữ pháp và các liên kết. Những tính năng này có thể giúp cải thiện tính khả dụng, khả năng truy cập, chức năng và tính thẩm mỹ của văn bản của bạn.

Bằng cách thay đổi màu sắc, kiểu dáng và độ dày của trang trí văn bản bằng pseudo-class và pseudo-element, bạn có thể nhấn mạnh văn bản theo những cách không chỉ dựa vào màu sắc.

Một số tính năng có thể giúp cải thiện khả năng đọc của văn bản:

text-decoration-skip-ink có thể tăng tính dễ đọc bằng cách bỏ qua các descender.
text-underline-offset cho phép bạn tinh chỉnh vị trí gạch chân để phù hợp hơn với font metric hoặc thiết kế thẩm mỹ, điều này đặc biệt hữu ích cho các typeface độc đáo.
Màu text-shadow tương phản với color văn bản có thể làm cho văn bản nổi bật thị giác khi đặt trên nền có độ tương phản không đủ.

Tất cả những tính năng này giúp cải thiện khả năng đọc, và do đó, khả năng truy cập. Giảm nhiễu thị giác và cải thiện độ rõ nét của văn bản đặc biệt hữu ích cho người dùng bị chứng khó đọc hoặc thị lực kém.

Trong các hệ thống chữ viết của một số ngôn ngữ, overline và underline mang ý nghĩa ngữ nghĩa. CSS cho phép bạn điều chỉnh styling theo các chuẩn mực văn hóa. Các tính năng trang trí văn bản đặc biệt hữu ích cho các ngôn ngữ không sử dụng script dựa trên Latin và thay vào đó theo các vị trí gạch chân khác nhau, chẳng hạn như tiếng Nhật và tiếng Hàn.

Các tính năng trang trí văn bản cũng cho phép bạn tuân theo các tiêu chuẩn biên tập và bản địa hóa từ phương tiện in ấn. Ví dụ, với gạch ngang (line-through), bạn có thể chỉ ra trạng thái của nội dung. Sử dụng nó để thông báo cho người dùng rằng nội dung đã bị xóa hoặc giá cả đã giảm một nửa. Tính năng này cho phép bạn trình bày cả nội dung gốc và nội dung đã cập nhật. Overline hoặc double underline thường được sử dụng cho chú thích học thuật và biên tập.

Text decoration trong thực tế

p {
  margin: 1em 0;
}
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
  text-underline-offset: -5px;
}
.shadow {
  text-shadow: red 4px 4px 0;
}
.emphasis {
  text-emphasis: triangle red;
}

<p class="under">A red underline</p>
<p class="over">A wavy lime overlines</p>
<p class="line">This has a line-through it</p>
<p class="underover">This has a dashed underline and overline</p>
<p class="thick">An offset solid purple underline</p>
<p class="shadow">This has a red shadow</p>
<p class="emphasis">Emphasized with red triangles</p>