Thuộc tính text-emphasis-position trong CSS
Bùi Tấn Lực - 900
- 03/10/2025
Chức năng của Thuộc tính text-emphasis-position trong CSS
Thuộc tính text-emphasis-position trong CSS dùng để đặt vị trí của các biểu tượng nằm ở trên, dưới, trái, phải văn bản trong phần tử HTML, biểu tượng do thuộc tính text-emphasis-style hoặc thuộc tính text-emphasis tạo ra.
Các vị trí của Thuộc tính text-emphasis-position trong CSS
over: Biểu tượng được đặt phía trên văn bản, text-emphasis-position: over;
under: Biểu tượng được đặt phía dưới văn bản, text-emphasis-position: under;
left: Biểu tượng được đặt bên trái văn bản, kết hợp với thuộc tính writing-mode: vertical-rl, text-emphasis-position: over right; writing-mode: vertical-rl;
right: Biểu tượng được đặt bên phải văn bản, kết hợp với thuộc tính writing-mode: vertical-rl, text-emphasis-position: under left; writing-mode: vertical-rl;
Code Thuộc tính text-emphasis-position trong CSS
text-emphasis-position: over; Biểu tượng được đặt phía trên văn bản.
text-emphasis-position: under; Biểu tượng được đặt phía dưới văn bản.
text-emphasis-position: over right; writing-mode: vertical-rl;
Biểu tượng được đặt bên phải văn bản.
text-emphasis-position: under left; writing-mode: vertical-rl;
Biểu tượng được đặt bên trái văn bản.
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-emphasis-position trong CSS</title>
<style>
p{margin-bottom:20px; text-emphasis-style: double-circle;}
</style>
</head>
<body>
<h1>Code Thuộc tính text-emphasis-position trong CSS</h1>
<span>Dùng để đặt vị trí của các biểu tượng nằm ở trên, dưới, trái, phải văn bản trong phần tử HTML, biểu tượng do thuộc tính text-emphasis-style hoặc thuộc tính text-emphasis tạo ra:</span>
<p style="text-emphasis-position: over;">text-emphasis-position: over; Biểu tượng được đặt phía trên văn bản.</p>
<p style="text-emphasis-position: under;">text-emphasis-position: under; Biểu tượng được đặt phía dưới văn bản.</p>
<p style="text-emphasis-position: over right; writing-mode: vertical-rl;">RIGHT</p>
<p style="text-emphasis-position: under left; writing-mode: vertical-rl;">LEFT</p>
</body>
</html>
Những lỗi thường gặp khi sử dụng text-emphasis-position trong CSS
Trong thực tế, text-emphasis-position có thể cho kết quả khác với mong đợi nếu cách viết CSS, hướng văn bản hoặc kiểu chữ không phù hợp. Nhận biết đúng nguyên nhân sẽ giúp việc đặt dấu nhấn ổn định hơn trên các nội dung cần trình bày bằng văn bản dọc hoặc chữ Đông Á.
Vị trí dấu nhấn không hiển thị như mong muốn
Một lỗi phổ biến là dấu nhấn xuất hiện ở vị trí khác với dự kiến. Nguyên nhân thường đến từ việc hiểu chưa đúng ý nghĩa của các giá trị như over, under, right và left. Trong đó, vị trí thực tế còn chịu ảnh hưởng bởi writing-mode, vì thuộc tính này quyết định hướng trình bày của văn bản.
Vì vậy, không nên chỉ thay đổi text-emphasis-position mà bỏ qua hướng văn bản. Khi cần kiểm soát vị trí dấu nhấn, hãy xác định trước văn bản đang được hiển thị theo chiều ngang hay chiều dọc, sau đó chọn giá trị phù hợp.
text-emphasis-position không hoạt động với một số kiểu chữ
Không phải mọi kiểu chữ hoặc môi trường hiển thị đều đem lại kết quả giống nhau khi sử dụng dấu nhấn. Với nội dung tiếng Việt hoặc chữ Latin, hiệu quả trực quan có thể không rõ ràng như khi áp dụng cho các hệ chữ thường xuyên sử dụng dấu nhấn.
Ngoài ra, trình duyệt và phông chữ cũng có thể ảnh hưởng đến cách dấu nhấn được thể hiện. Nếu vị trí không đúng như thiết kế, nên kiểm tra cả font-family, writing-mode và khả năng hỗ trợ CSS của trình duyệt thay vì chỉ thay đổi giá trị của thuộc tính.
Cách kết hợp text-emphasis-position với text-emphasis để đạt hiệu quả tốt
text-emphasis-position chỉ quyết định vị trí của dấu nhấn, trong khi text-emphasis có thể được dùng để xác định kiểu và màu sắc của dấu nhấn. Kết hợp hai thuộc tính giúp kiểm soát cả hình thức lẫn vị trí mà không cần tạo thêm phần tử HTML chỉ để trang trí văn bản.
<p class="highlight">Nội dung cần nhấn mạnh</p>
Cách kết hợp này phù hợp khi muốn tạo điểm nhấn trực tiếp trên văn bản. Tuy nhiên, nên kiểm tra trên các trình duyệt mục tiêu và lựa chọn vị trí có độ tương phản tốt với nội dung để dấu nhấn không làm giảm khả năng đọc.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-emphasis-position trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
