Nếu mối quan tâm chính của bạn là buộc hiển thị đơn sắc để biểu tượng cảm xúc không quá nổi bật so với văn bản, các bộ lọc CSS, một mình hoặc kết hợp với bộ chọn biến thể Unicode, có thể là thứ bạn muốn.
p.gscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
a {
color: #999;
-webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}
<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>
<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>
Không giống như bộ chọn biến thể, biểu tượng cảm xúc được hiển thị như thế nào không quan trọng vì các bộ lọc CSS áp dụng cho mọi thứ. (Tôi sử dụng chúng để tạo thang độ xám cho các biểu tượng "loại liên kết" định dạng PNG trên các siêu liên kết đã được sửa đổi để trỏ đến Wayback Machine.)
Chỉ cần lưu ý báo trước . Bạn không thể ghi đè bộ lọc của phần tử mẹ trong phần tử con, do đó, không thể sử dụng kỹ thuật này để tạo thang độ xám cho một đoạn văn, sau đó tô màu lại các liên kết trong đó. 😢
... vẫn còn, nó hữu ích cho những trường hợp bạn sắp biến toàn bộ thành siêu liên kết hoặc không cho phép đánh dấu chi tiết bên trong nó. (ví dụ: tiêu đề và mô tả)
Tuy nhiên, điều này sẽ không hoạt động trừ khi CSS thực sự được áp dụng, vì vậy tôi sẽ đưa ra tùy chọn thứ hai đáng tin cậy hơn trong <title> các phần tử so với bộ chọn biến thể Unicode (Tôi đang xem bạn GitHub. Tôi không thích các biểu tượng giả mạo trong tab trình duyệt):
Nếu bạn đang đặt một chuỗi do người dùng cung cấp vào một <title>phần tử, hãy lọc ra biểu tượng cảm xúc cùng với bất kỳ chữ in đậm / nghiêng / gạch dưới / v.v. nào. đánh dấu. (Vâng, đối với những người đã bỏ lỡ nó, tiêu chuẩn yêu cầu nội dung của <title>phải là văn bản thuần túy ngoại trừ dấu và thoát và các trình duyệt mà tôi đã thử nghiệm giải thích tất cả các thẻ bên trong dưới dạng văn bản nghĩa đen.)
Hai cách tôi có thể nghĩ ra là:
- Trực tiếp sử dụng regex được bảo trì thủ công phù hợp với các khối mà phiên bản Unicode mới nhất đặt biểu tượng cảm xúc và các bộ sửa đổi của chúng.
- Lặp lại thông qua các cụm grapheme và loại bỏ bất kỳ cụm từ nào có chứa mã biểu tượng cảm xúc được công nhận. (Một cụm grapheme là một glyph cơ sở cộng với tất cả các dấu phụ và các bổ ngữ khác tạo nên ký tự hiển thị. Ví dụ tôi liên kết để sử dụng công cụ regex của Python để mã hóa và sau đó là
emojigói cho cơ sở dữ liệu, nhưng Rust là một ví dụ điển hình về một ngôn ngữ trong đó việc lặp lại các cụm grapheme nhanh chóng và dễ dàng thông qua một thùng như unicode-segmentation.)
