emoji

From IndieWeb
(Redirected from OpenMoji)


Emoji are “picture characters” often used like emoticons, either expressively or as punctuation in text notes, as self-standing responses in conversations, or as reactions (reacji).

Why

Emoji can be used to briefly communicate an impression, or more creatively punctuate and add emotional context to plain text.

How to

How to support

As a developer of IndieWeb related software and services, supporting emoji requires paying careful attention to three areas:

  • user input: make sure wherever a user can enter text that you handle emoji either by allowing and supporting it, or providing good feedback to the user where it may be disallowed (e.g. perhaps in a username)
  • storage: make sure your software and interfaces which store textual content support full fidelity Unicode both storing and retrieving
  • display: either directly render emoji via its Unicode characters, or if you are doing the extra work to display representative images (like many social media silos do), consider putting the respective Unicode characters in the alt text of the images

See this article for more support and implementation tips:

  • 2016-08-06: Solve for emoji originally posted at: http://glasnt.com/blog/2016/08/06/solve-for-emoji.html

How to markup

How to markup emoji depends a lot on the use and context.

If the emoji is a shorthand for a word, you may wish to mark it up with an <span role="img"> element and put the complete word or phrase (that you meant or would otherwise read aloud) in the aria-label= attribute, e.g.

I had a <span role="img" aria-label="coffee">☕️</span>

See WCAG 2.2: Example 1: Marking up emojis in a sentence for more details.

If the emoji is purely decorative, you should mark it up with <span aria-hidden="true"> for accessibility, e.g. in order to avoid having it read out loud by screen readers.

I had a <span aria-hidden="true">☕️</span> coffee

IndieWeb Examples

Emoji are prominently used in reacji responses and tagmoji aggregation pages, and sometimes decoratively

Aaron Parecki

James G

capjamesg has an emoji coffee-cup on his blog posts index which changes seasonally.

Tantek

Tantek Çelik uses both in-content (or explicit linktext) emojis and decorative emojis in his homepage. In-content emojis are marked up with role="img" aria-label= and decorative emojis (e.g. in his subhead since 2026-01-12 when he made an 88x31 button based on emojis, and others longer than that) are marked up with aria-hidden="true" (since 2026-05-20). Both of these techniques are documented above in the How to section.

Tantek Çelik uses a decorative northeast arrow (➚) immediately after hyperlinks in post content (in the styling of all 2026 and newer posts, since 2026-05-13) as a visual indicator of a hyperlink that does not depend on color (e.g. blue) or text-decoration like underlines. This is done with CSS generated content and thus avoids being part of copy/pasted text or read by screenreaders.

Michael Kupietz

Mike Kupietz comes from a family of highly disparate characters with little in common except that they all have a hamsa hanging somewhere in their homes, so he hung a small decorative hamsa emoji 🪬 in the upper right corner of his site, rotated 180° with CSS because of an ancestral tradition that the fingers point up to ward off evil or down to attract good luck. He also has code that adds a class that appends a superscripted up-right arrow emoji ↗️ to the link text of every external link within site article bodies. There is no ancestral tradition dictating which direction an up-right arrow should point.

Tools

  • OpenMoji is an open source set of emojis licensed under Creative Commons Share Alike License 4.0 (CC BY-SA 4.0)

Issues

standardized vs platform-specific display

Many silos standardize their emoji display by replacing them with the same image on all platforms. (e.g. WhatsApp, Twitter, Telegram, Threma). Replacing them with images also allows to show colored emoji everywhere, which is very difficult using fonts, since there are conflicting standards for multi-colored glyphs. Several permissively-licensed image sets are available, e.g. by Twitter, Emoji One and Google. If a site replaces emoji with images, it should set the alt="" attribute to the text version of the emoji.

Criticism

miscommunication

Emoji are rendered differently on different platforms, devices, and operating systems, with some examples leading to differing interpretations of the same emoji, depending on how they are displayed to the user.

Sometimes these differences can be stark enough to cause a miscommunication between senders and readers.

may harm accessibility

Many people have begun to put large strings of emojis into usernames. Accessibility experts argue those who use screen readers must get through verbal explanations of each emoji in a field that was designed for a name and not biographical information. See tweet

Implementing

Articles

Articles and papers about emoji that have particular relevance and connection to the indieweb or independent creatives.

  • 2015 Social Media + Society journal: The Conservatism of Emoji: Work, Affect, and Communication

    We argue that emoji characters both embody and represent the tension between affect as human potential, and as a productive force that capital continually seeks to harness through the management of everyday biopolitics. Emoji are instances of a contest between the creative power of affective labor and its limits within a digital realm in the thrall of market logic.

    • 2014-08-20 The Conservatism of Emoji / Emoji offer you new possibilities for digital expression, but only if you’re speaking their language

      [Emoji] are also agents in turning emotions into economic value. As a blip in the continuing evolution of platform languages, emoji may be remembered as ultimately conservative: digital companions whose bright colors and white faces had nothing much to say about our political impasses.

History

Emoji were originally associated with cellular telephone usage in Japan, but now popular worldwide. The word emoji comes from the Japanese 絵 (e ≅ picture) + 文字 (moji ≅ written character).

See Also