Skip to content

πŸ™ƒ Turn text with emoji into text with accessible emoji

License

Notifications You must be signed in to change notification settings

glasnt/emojificate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
BumpFile-bot
Feb 2, 2025
5b1fcbb Β· Feb 2, 2025
Jan 5, 2023
Jan 9, 2023
Jan 12, 2023
Feb 2, 2025
Aug 8, 2020
Aug 6, 2016
Aug 6, 2016
Aug 8, 2020
Jan 9, 2023
Oct 21, 2022
Oct 6, 2022
Oct 21, 2022

Repository files navigation

emojificate

status release date

Emojificate is a Python implementation of a concept of using fallback images, alt text, title text and aria labels to represent emoji in HTML, a more accessible method than browser defaults.

Installation

emojificate is available on pypi:

pip install emojificate

Usage

To convert a string from the command line:

$ python3 -m emojificate "I πŸ’œ emoji 😊"
I
<img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/1f49c.png"
     css="emojificiate" alt="πŸ’œ" title="Purple Heart"
     aria-label="Emoji: Purple Heart">
emoji
    <img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/1f60a.png"
    css="emojificiate" alt="😊" title="Smiling Face With Smiling Eyes"
    aria-label="Emoji: Smiling Face With Smiling Eyes">

Change the class with --css-class (default "emojificate"). To get SVG instead of PNG, use --filetype svg.

Or, if you've got a Django project, put emojificate into your INSTALLED_APPS, and then use the following in a template:

{% load emojificate %}
This is some {{ user_content|emojificate }} that has emoji in it.

{% emojified %}
This is some template content that πŸ’œ emoji as well.
{% endemojified %}

Configure with EMOJIFICATE_FILETYPE and EMOJIFICIATE_CSS_CLASS in your settings.py, and add some css to make the emoji not huge.

Implementation

TL;DR: Take a string, split it into tokens, and if a token is emoji, process it into a nice format.

As of 0.4.0, string-splitting is now handled by grapheme.

Given a list of tokens, we can leverage the native unicodedata to:

  • see if a token is a unicode Symbol (an emoji)
  • get the codepoint for the emoji, and
  • get the name of the emoji.

If a token is a grapheme and not a character, there won't be a record of what it is in unicodedata. In that case emojificate defaults to a human-readable version of the shortcode provided by emoji.

From there, we construct an <img> replacement for the emoji:

  • Use images from twemoji, Twitter's emoji set (if the URL exists)
  • Have an alt parameter containing the original emoji. This allows for copying-pasting.
  • Use the name of the emoji in the title parameter. This allows for hover-tooltips.
  • Add an aria-label for screen-reader accessibility.

For more information, see Solve For Emoji.

Implementation in other languages

Ruby

require 'gemoji'

def cdn
    "https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/"
end

def emojificate(string)
  string.split("").each do |s|
      e = Emoji.find_by_unicode(s)
      if e then
           u = s.ord.to_s(16) # e.g. 1f431
           d = e.description  # e.g. "cat face"
           img = "<img src=\"#{cdn}/#{u}.png\" alt=\"#{s}\" title=\"#{d}\" aria-label=\"Emoji: #{d}\">"
           print img
       else
           print s
       end
   end
 end

About

πŸ™ƒ Turn text with emoji into text with accessible emoji

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages