Mã biểu tượng cảm xúc css

Việc sử dụng tên viết tắt để thay cho biểu tượng cảm xúc thật không xa lạ gì với mọi người. Chẳng hạn khi bạn nhập :joy: thì bài viết sẽ thể hiện cảm xúc

Việc xử lý phân tích alias sang emoji thì không hề khó, chỉ đơn giản là sử dụng regex và thay thế đoạn văn bản đã nhập vào. Vấn đề mình thấy khó hơn cả là công việc tìm kiếm được một bộ dữ liệu ảnh và tên viết tắt được sử dụng trên cả máy khách và máy chủ

Khi bắt đầu mã một ứng dụng liên quan đến trò chuyện, mình gặp phải vấn đề này. Có rất nhiều hướng để thực hiện phần Bộ chọn biểu tượng cảm xúc ở máy khách và phần Trình phân tích biểu tượng cảm xúc trên Máy chủ

Bạn biết biểu tượng cảm xúc là gì. Tìm hiểu cách sử dụng chúng trong các tài liệu web của bạn như một chuyên gia

Từ sự khởi đầu bập bõm của nó vào năm 1999, biểu cảm xúc động là tất cả những cơn thịnh nộ ngày nay. Nó không còn là thứ mà chỉ những người nửa tuổi của chúng tôi sử dụng để giao tiếp. Bạn và tôi sử dụng chúng mọi lúc và hầu hết mọi ứng dụng liên quan đến trò chuyện hoặc liên quan đến nhắn tin dưới ánh mặt trời cung cấp Hỗ trợ tuyệt vời cho nó

Đối với người dùng hàng ngày, biểu tượng cảm xúc là tuyệt vời. Chúng rất vui và dễ sử dụng. Đối với các nhà phát triển web của Hoa Kỳ muốn sử dụng biểu tượng cảm xúc trong HTML, CSS và JavaScript của chúng tôi, câu chuyện hơi khác một chút. Có một vài vòng chúng ta cần học cách nhảy qua, nhưng đừng lo lắng. Hướng dẫn này sẽ giúp bạn thành thạo tất cả các bước nhảy vòng này như một người chuyên nghiệp

trở đi

Biểu tượng cảm xúc chính xác là gì?

Chúng ta đã biết rằng biểu tượng cảm xúc là những biểu tượng cảm xúc nhỏ màu này. Mặc dù điều này có thể cho bạn ấn tượng rằng chúng là hình ảnh theo nghĩa truyền thống, nhưng chúng không. Chúng giống như các chữ cái, số, dấu chấm câu và các biểu tượng kỳ lạ mà chúng ta có xu hướng xô làm văn bản

Đến cuối hướng dẫn này, tôi đi sâu vào chi tiết hơn về biểu tượng cảm xúc và một số chi tiết bên dưới vỏ bọc khiến chúng hoạt động. Bây giờ, chỉ cần biết những điều sau đây

1. Họ chỉ là nhân vật
2. Bạn có thể chọn chúng, sao chép chúng, dán chúng, điều chỉnh kích thước của chúng, v. v
3. Họ có một biểu tượng số nguyên thủy hơn mà bạn có thể sử dụng để hiển thị chúng

Để nói rằng chúng tôi chỉ lướt qua bề mặt trong việc hiểu biểu tượng cảm xúc là một sự việc quá mức, nhưng điều này là đủ để chúng tôi bắt đầu. Đã đến lúc thấy các biểu tượng cảm xúc trong hành động bên trong web tài liệu của chúng tôi

Để sử dụng biểu tượng cảm xúc trong HTML, điều đầu tiên chúng ta cần làm là đặt mã hóa ký tự của tài liệu thành UTF-8. Điều này đảm bảo màn hình biểu tượng cảm xúc của chúng tôi liên tục trên nhiều trình duyệt và thiết bị mà người dùng của bạn có thể chạy. Làm điều này là đơn giản. Bên trong thẻ đầu của bạn, hãy chắc chắn chỉ định thẻ meta sau. head thẻ, đảm bảo chỉ định thẻ meta sau.

Khi bạn đã thực hiện điều này, bây giờ là phần thú vị của công việc thực sự nhận được biểu tượng cảm xúc để hiển thị. Bạn có hai cách để có thể làm điều này, mỗi cách có một mức độ vui vẻ khác nhau. Một cách là bằng cách sử dụng biểu tượng cảm xúc trực tiếp trong HTML của bạn. Một cách khác là bằng cách chỉ định biểu tượng cảm xúc thông qua biểu thức nguyên thủy của nó. Chúng tôi sẽ xem xét cả hai trường hợp này

Sử dụng biểu tượng cảm xúc trực tiếp

Cách dễ nhất để hiển thị biểu tượng cảm xúc liên quan đến công việc sao chép và dán. Bạn chỉ cần một ứng dụng hoặc trang web cho phép bạn sao chép biểu tượng cảm xúc dưới dạng ký tự, địa chỉ của họ. Một nơi tuyệt vời để làm điều đó là biểu tượng cảm xúc. Bạn có thể sử dụng biểu tượng cảm xúc để tìm kiếm hoặc duyệt bất kỳ biểu tượng cảm xúc nào bạn đang tìm kiếm. Khi bạn đã tìm thấy biểu tượng cảm xúc của mình, có một phần mà bạn có thể dễ dàng nhìn thấy và sao chép biểu tượng cảm xúc

Khi bạn đã sao chép nó, chỉ cần dán nó vào đích dự kiến ​​của nó trong các đánh dấu của bạn

🍔

Bởi vì biểu tượng cảm xúc được coi là nội dung dựa trên văn bản, bạn có thể dán chúng vào hầu hết mọi nơi trong tài liệu của bạn, nơi văn bản được hỗ trợ. Bây giờ, nếu đây là lần đầu tiên bạn nhìn thấy biểu tượng cảm xúc xuất hiện ngẫu nhiên bên trong mã dựa trên văn bản hoặc trình chỉnh sửa mã của bạn, nó sẽ trông hơi lạ

Môi trường chỉ có văn bản truyền thống của bạn, nơi bạn đã viết những dấu ấn của bạn trong suốt những năm qua sẽ tự nhiên có một cái gì đó trực quan trong đó. đừng lo. Nó thật tuyệt. Khi bạn xem trước tài liệu HTML của mình trong trình duyệt, mọi thứ vẫn sẽ hoạt động

Trước khi chúng ta kết thúc cái nhìn của chúng ta về biểu tượng cảm xúc trong HTML, hãy nói về khả năng tiếp cận. Cuối cùng các biểu tượng cảm xúc là những tác nhân tạo ra giác quan, nhưng chúng có thể hiển thị dưới dạng văn bản bên dưới các biểu tượng sử dụng các yếu tố như P và Span không rõ ràng về mặt ngữ nghĩa trong trường hợp này. Trình đọc màn hình và các công cụ liên quan không thể diễn giải những gì biểu tượng cảm xúc đang cố gắng biểu thị đúng, nhưng giải pháp rất đơn giản. Để sử dụng biểu tượng cảm xúc trong khả năng truy cập (a11y như những đứa trẻ tuyệt vời gọi nó là. ) p và span không rõ ràng về mặt ngữ nghĩa trong trường hợp này. Trình đọc màn hình và các công cụ liên quan có thể không diễn giải chính xác những gì biểu tượng cảm xúc đang cố biểu thị, nhưng giải pháp rất đơn giản. Để sử dụng biểu tượng cảm xúc trong khả năng truy cập (a11y như những đứa trẻ tuyệt vời gọi nó. ) một cách thân thiện, đặt thuộc tính vai trò và aria-label trên .

🍔

Với sự thay đổi này, bạn vẫn có thể sử dụng biểu tượng cảm xúc trong HTML và được truy cập cùng một lúc. Đó là chiến thắng, chiến thắng,. chiến thắng. Cảm ơn Eva Larumbe đã chỉ ra điều này

Chỉ định biểu tượng cảm ứng Codepoint

Nếu chỉ một biểu tượng cảm xúc trực tiếp không hoạt động, có một con đường ít thú vị hơn bạn có thể đi. Bạn có thể sử dụng biểu tượng số của biểu tượng cảm xúc và chỉ định nó trong phần đánh dấu của bạn thay thế. Nếu bạn cuộn xuống trong biểu tượng cảm xúc để chọn bất kỳ biểu tượng cảm xúc nào, bạn sẽ thấy biểu thức số (được gọi chính thức hơn là CodePoint) được hiển thị. mật mã) được hiển thị

Đối với biểu tượng hamburger cảm ứng, CodePoint là U+1F354. Để chỉ định biểu tượng cảm xúc này trong HTML bằng cách sử dụng CodePoint, chúng ta phải sửa đổi giá trị một chút. Thêm các ký tự &#x, xóa U+1 từ đầu của CodePoint và chỉ cần thêm các số còn lại từ CodePoint như một phần của bất kỳ phần tử văn bản nào. U+1F354. Để chỉ định biểu tượng cảm xúc này trong HTML bằng điểm mã, chúng tôi phải sửa đổi giá trị một chút. Thêm các ký tự &#x, xóa U+1 khỏi đầu điểm mã và chỉ thêm các chữ số còn lại từ điểm mã như một phần của bất kỳ thành phần văn bản nào

Đây là biểu tượng cảm xúc hamburger của chúng tôi ở dạng Codepoint

🍔

Khi bạn xem trước tài liệu của mình trong quá trình duyệt, bạn vẫn sẽ thấy hamburger biểu tượng cảm xúc được hiển thị chính xác. mặc dù nó có vẻ lạ trong các dấu ấn của chúng tôi vì vậy với giải pháp sao chép/dán mà chúng tôi đã xem trước đó

Biểu tượng cảm xúc trong CSS

Bạn hoàn toàn có thể sử dụng biểu tượng cảm xúc trong CSS. Những thủ thuật tương tự mà chúng tôi đã thấy cho các biểu tượng cảm xúc trong HTML sẽ chỉ hoạt động với một số sửa đổi nhỏ. You can only select the icon sensor direct

h2::before  {
  content: "🍔";
}

Bạn cũng có thể chỉ định biểu tượng cảm xúc bằng cách đặt CodePoint

h2::before  {
  content: "\01F354";
}

Cách bạn chỉ định CodePoint khác một chút so với những gì tôi thấy đối với HTML. Tất cả những gì bạn phải làm là xóa U+ khỏi điểm cuối Unicode và thêm các ký tự \ 0 (chém 0) ngay trước nó. U+ từ điểm cuối unicode và thêm ký tự \0 (gạch chéo số 0) ngay trước nó

Biểu tượng cảm xúc trong JavaScript

Điều cuối cùng chúng ta sẽ xem xét xem làm thế nào để sử dụng biểu tượng cảm xúc trong JavaScript. Cách tiếp cận sử dụng nó trực tiếp cũng sẽ hoạt động ở đây. Chỉ cần đảm bảo coi biểu tượng cảm xúc là văn bản

document.body.innerText = "😀";

Để sử dụng biểu tượng cảm xúc thông qua giá trị CodePoint của nó, chúng ta phải chuyển chúng qua phương thức Chuỗi. Từ Codepoint. Phương thức này lấy giá trị CodePoint làm đối số của nó. Chuỗi. phương thức fromCodePoint . Phương thức này lấy một giá trị điểm mã làm đối số của nó.

document.body.innerText = String.fromCodePoint(0x1F354);

Những thứ được trả lại là ký tự tại vị trí CodePoint đó. Cách bạn chỉ định CodePoint khác với cả HTML và CSS. Nếu CodePoint là U+ 1F354, hãy thay thế U+ bằng 0x (0 và X) trước khi chuyển nó vào. That is it. Nếu bạn muốn đi xa hơn, vì bạn đang ở JavaScript, bạn có thể thực hiện tất cả các loại JavaScript. Bạn có thể có một mảng biểu tượng cảm xúc, bạn có thể tạo ra chúng một cách tự động, v. v. U+1F354, thay thế U+ bằng 0x (không và x) trước khi chuyển vào. Đó là nó. Nếu bạn muốn tiến xa hơn, vì bạn đang sử dụng JavaScript, bạn có thể làm mọi thứ bằng JavaScript. Bạn có thể có một loạt biểu tượng cảm xúc, bạn có thể tự động tạo chúng, v.v.

Nếu bạn tò mò muốn xem một ví dụ hoạt động sử dụng biểu tượng cảm xúc được xác định trong JavaScript, hãy xem trò chơi Koncentration của tôi. Repo GitHub (đặc biệt là board. js) chứa mọi thứ bạn cần để xem trò chơi được gắn với nhau như thế nào

Một số chi tiết biểu tượng cảm xúc

Chúng tôi đã che giấu những gì biểu tượng cảm xúc thực sự là gì và mục tiêu mà CodePoints phục vụ. Để bắt đầu từ những gì chúng tôi đã nói trước đó, biểu tượng cảm xúc chỉ là những nhân vật như tất cả các văn bản mà chúng tôi nhập. Đó thường là một điều khó hiểu. Một phần lý do khiến sự nhầm lẫn này là do chúng ta có xu hướng nghĩ về các nhân vật như những gì bàn phím của chúng ta hỗ trợ. This is problems. Những thứ bàn phím của chúng tôi cho phép chúng tôi đại diện là một tỷ lệ rất nhỏ trong tổng số các ký tự có sẵn cho chúng tôi. Những gì bàn phím của chúng tôi cho phép chúng tôi đại diện là một tỷ lệ phần trăm rất nhỏ trong tổng số các ký tự có sẵn cho chúng tôi

Nếu bạn muốn tự mình xem cái này, bạn có thể xem tất cả các ký tự mà hệ điều hành của bạn hỗ trợ bằng cách sử dụng bản đồ ký tự trên Windows hoặc Trình xem ký tự trên máy Mac

Lưu ý rằng bạn có nhiều loại ký tự vượt ra ngoài những điều khiển thông thường mà chúng ta thấy trên bàn phím điển hình. Nếu chúng tôi phải có một bàn phím để hỗ trợ mọi nhân vật mà hệ điều hành của chúng tôi hỗ trợ, thì nó sẽ cần ít nhất. lớn hơn ba lần so với bàn phím thông thường

Được. Please go deep more than agrade. Chúng tôi thấy rằng biểu tượng cảm xúc mà chúng tôi muốn sử dụng có một đại diện kỳ ​​quái. Hóa ra, tất cả các ký tự mà chúng tôi sử dụng cũng có cùng một đại diện bất kỳ bên dưới các danh hiệu. Trên màn hình của chúng tôi, chúng tôi có thể thấy các ký tự chữ cái như A, B, C, D, E, F, G. Theo dõi, các ký tự này trông giống như sau. U+0041, U+0042, U+0043, U+0044 , U+0045, U+0046 và U+0047. Chúng tôi đã nói rằng đại diện này được gọi là CodePoint, nhưng thuật ngữ chính xác hơn là Unicode CodePoint. Chi tiết này rất quan trọng cần biết, vì Unicode là một tiêu chuẩn công nghiệp để đảm bảo văn bản bạn thấy trên màn hình của bạn giống nhau trên một màn hình khác ở một nơi khác - bất kể ngôn ngữ, địa phương, khả năng . v. Codepoint là đơn vị cơ bản nhất của công việc có thể hiển thị thông tin trong Unicode. Một loạt các CodePoint đại diện cho các ký tự và văn bản. Phù. A, B, C, D, E, F, G. Dưới vỏ bọc, những ký tự này trông giống như sau. U+0041, U+0042, U+0043, U+0044, U+0045, U+0046 và U+0047. Chúng tôi đã nói rằng biểu diễn này được gọi là điểm mã, nhưng thuật ngữ chính xác hơn là điểm mã Unicode. Chi tiết này rất quan trọng để biết, vì Unicode là một tiêu chuẩn ngành để đảm bảo văn bản bạn nhìn thấy trên màn hình của mình giống trên một màn hình khác ở một nơi khác - bất kể ngôn ngữ, ngôn ngữ, khả năng của hệ thống, hệ điều hành, v.v. Điểm mã là đơn vị cơ bản nhất để biểu diễn thông tin trong Unicode. Một loạt các điểm mã đại diện cho các ký tự và văn bản. Phù

Kết luận

Nếu bạn có thể thoát khỏi nó, sao chép và dán biểu tượng cảm xúc là điều dễ dàng nhất bạn có thể thực hiện trên HTML, CSS và JavaScript. Sẽ có những vấn đề mà bạn không thể làm điều đó, vì vậy bạn cách tiếp cận dự phòng liên quan đến CodePoints. Có một điều cuối cùng có thể quan trọng đối với bạn. Bởi vì biểu tượng cảm xúc có nguồn gốc từ ứng dụng hoặc nền tảng bạn đang sử dụng, biểu tượng cảm xúc có thể trông khác nhau đối với những người sử dụng khác nhau

Tiêu chuẩn Unicode chắc chắn rằng các điểm mã thích hợp, trong trường hợp này là một con mèo. Mỗi người thực hiện đều có tự do sáng tạo hoàn toàn trong việc giải thích điều đó như họ muốn. Đối với một số nhà phát triển, sự không quán nhất này không phải là mong muốn. Thay vào đó, những gì họ đã làm là tạo lại biểu tượng cảm xúc ở định dạng SVG hoặc PNG để họ có thể đảm bảo tính nhất quán. Một ví dụ về một người làm điều đó là Twitter. Chúng tôi đã sử dụng ảnh chụp màn hình cảm xúc của họ để bắt đầu hướng dẫn điều này ngay từ đầu và mọi biểu tượng cảm xúc mà bạn thấy không có từ hệ điều hành hoặc nền tảng của chúng tôi. Đó là từ dự án twemoji thực sự tuyệt vời. Có nhiều thư viện biểu tượng cảm xúc bên ngoài mà bạn có thể sử dụng, vì vậy hãy sử dụng bất cứ thứ gì bạn thích nếu hỗ trợ biểu tượng cảm xúc bản địa chỉ thứ bạn đang tìm kiếm không phải là

Làm thế nào để bạn thêm biểu tượng cảm xúc để phản hồi js?

Để đưa nó vào các thuộc tính của bạn, chỉ cần chạy NPM I Emoji-Picker-React. Nó cung cấp một tùy chọn thả xuống cho biểu tượng mà bạn cảm thấy muốn chọn. Một bộ tùy chọn thả xuống biểu tượng cảm xúc được tìm thấy ở đây. Gói NPM không sử dụng móc phản ứng, vì vậy bạn sẽ cần sử dụng React 16. 8 trở lên. chạy npm i emoji-picker-react . Nó cung cấp tùy chọn thả xuống cho biểu tượng cảm xúc bạn muốn chọn. Bộ chọn thả xuống biểu tượng cảm xúc được tìm thấy ở đây. Gói npm sử dụng React Hook, vì vậy bạn sẽ cần sử dụng React 16. 8 hoặc cao hơn.

Làm thế nào để bạn thêm biểu tượng cảm xúc vào url của bạn?

Đây là cách nó hoạt động. .

Dán url dài của bạn vào cửa sổ bật lên, giống như bạn đã làm khi tạo một liên kết có nhãn hiệu tiêu chuẩn

Chọn miền duy nhất của bạn và trong hộp thẻ chém, nhấn Control + Command (Alt) + Shift để bàn phím biểu tượng cảm xúc bật lên