skip to content

🐦Improving Emoji Support On Your Website

Don't let unsupported emojis ruin your website's design, enhance your website's user experience by using Twemoji for proper emoji display.

The Question Mark❓

If the operating system or device that a user is viewing your blog on does not support the emojis that you have used, the emojis may not be displayed properly. This can happen if:

  • The device or operating system does not have the necessary font files to display the emojis.

  • The device or operating system does not have built-in support for the emojis.

  • The browser or app that the user is using to view your blog does not have built-in support for the emojis.

When an emoji is not supported by a device, operating system or browser, it will typically be displayed as a �.

For example, if your blog uses an emoji that is not supported by a user’s device, it might appear like this: I'm so excited! �

This can be confusing for users and can also affect the overall design and readability of your blog.

It is open-source and free to use.

Twemoji🎉

Twemoji is a JavaScript library for parsing and replacing Twitter’s Emoji Unicode characters with Twitter’s own emoji images. It is a lightweight library that allows you to easily add Twitter emojis to your website or web application.

Twemoji allows you to use these Twitter emojis in your website or web application by parsing the text and replacing the emoji Unicode characters with the corresponding Twitter emoji images.

Usage

There are several methods to implement the Twemoji library in your website or web application, including a quick and easy option for immediate implementation, as well as a more performance-efficient method of checking for native emoji support before loading the library

Quick And Easy🐰

Use the following in the <head> tag of your HTML document

<script
    src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js"
    crossorigin="anonymous"></script>
<script
    src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js"
    crossorigin="anonymous"></script>

After importing the script we can parse the document to replace the unicode text with the twitter emojis

twemoji.parse(document.body);
twemoji.parse(document.body);

Finally we can add some css to make sure that emojis align with the text

img.emoji {
    display: inline;
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
}
img.emoji {
    display: inline;
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
}

Check Before Load🔬

Checking if Twemoji is needed before using it can help to improve the performance of your website. If a user is accessing your website that natively supports emojis, there is no need to use Twemoji as it would be redundant. The use Twemoji can cause layout shifts because the emojis are being replaced with images.

By only using Twemoji when it is needed, you can prevent layout shifts from occurring, which can lead to a more stable and consistent user experience. Additionally you can save on the additional resources required for loading and running the library, which can lead to a faster and more responsive website for your users.

// Function to check if Twemoji is needed
const isTwemojiNeeded = async (): Promise<boolean> => {
    // Check if the user is on a mobile device
    if (navigator?.userAgentData?.mobile) return false;
    // Check if the user is on a Mac, Android, iPhone or iPad
    if (navigator.userAgent.match(/(Mac|Android|iPhone|iPad)/i))
        return false;
    // Check if the user is on a Windows device
    if (navigator?.userAgentData?.platform !== 'Windows') return true;
    // Get the platform version for Windows
    let userAgent =
        await navigator?.userAgentData?.getHighEntropyValues([
            'platformVersion',
        ]);
    if (!userAgent) return true;
    // Get the major version number
    const majorPlatformVersion = parseInt(
        userAgent?.platformVersion?.split('.')[0]
    );
    // Return true if the windows version is less than 13 i.e. Windows 10
    return majorPlatformVersion < 13;
};
const useTwemoji = () => {
    var script = document.createElement('script');
    // On load of the script
    script.onload = (ev) => {
        // Parse the document body for emojis
        twemoji?.parse(document.body);
    };
    script.setAttribute(
        'src',
        'https://unpkg.com/twemoji@latest/dist/twemoji.min.js'
    );
    script.setAttribute('crossorigin', 'anonymous');
    document.getElementsByTagName('head')[0]?.appendChild(script);
};
// Check if Twemoji is needed and use it if needed
if (await isTwemojiNeeded()) {
    useTwemoji();
}
// Function to check if Twemoji is needed
const isTwemojiNeeded = async (): Promise<boolean> => {
    // Check if the user is on a mobile device
    if (navigator?.userAgentData?.mobile) return false;
    // Check if the user is on a Mac, Android, iPhone or iPad
    if (navigator.userAgent.match(/(Mac|Android|iPhone|iPad)/i))
        return false;
    // Check if the user is on a Windows device
    if (navigator?.userAgentData?.platform !== 'Windows') return true;
    // Get the platform version for Windows
    let userAgent =
        await navigator?.userAgentData?.getHighEntropyValues([
            'platformVersion',
        ]);
    if (!userAgent) return true;
    // Get the major version number
    const majorPlatformVersion = parseInt(
        userAgent?.platformVersion?.split('.')[0]
    );
    // Return true if the windows version is less than 13 i.e. Windows 10
    return majorPlatformVersion < 13;
};
const useTwemoji = () => {
    var script = document.createElement('script');
    // On load of the script
    script.onload = (ev) => {
        // Parse the document body for emojis
        twemoji?.parse(document.body);
    };
    script.setAttribute(
        'src',
        'https://unpkg.com/twemoji@latest/dist/twemoji.min.js'
    );
    script.setAttribute('crossorigin', 'anonymous');
    document.getElementsByTagName('head')[0]?.appendChild(script);
};
// Check if Twemoji is needed and use it if needed
if (await isTwemojiNeeded()) {
    useTwemoji();
}

Summary

We discuss a common issue that can occur when using emojis on your website or web application. If the operating system or device that a user is viewing your blog on does not support the emojis that you have used, the emojis may not be displayed properly. To solve this problem, we used Twemoji, to easily add Twitter emojis to your website. Twemoji works by parsing the text and replacing the emoji Unicode characters with the corresponding Twitter emoji images.