HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Use images instead of Unicode characters

This discussion is related to the Emoji Pro addon.

Hello,

i try to support as many as browsers as possible so i thought i show the CSS image instead of the actual Unicode character.

I saw that php-emoji offers emoji_unified_to_html(), which you already use in your code, but i have issues getting it to work, so it adds the including the correct CSS class to it. Can you help me out?

Comments

  • AnonymooseAnonymoose ✭✭
    edited August 2014

    Emoji Pro does not use images and uses actual unicode. emoji_unified_to_html() converts to &# entities ; for compatibility with the database.

    Converting unicode to images is a bad idea, because: ❌ You can't copy the text with emoji. ❌ Images don't scale well at different sizes and when printed. ❌ You have to keep up with the standard when more emoji are added. ❌ Need to use free libraries of Emoji images, which may or may not exist. ❌ Images can not be stored in the database with the text inline. Once plugin is removed, they dissapear. ✅ With EmojiPro even if you remove the plugin, emoji in existing posts will remain.

  • I am aware of this, but since Chrome doesnt support them yet. I don't want to stick with the actual Emoji character. I mean, how does GitHub, Discourse, Trello and whatever handles this then? I can see and use their Emojis as Chrome user (probably images) as well as iOS user (real Emoji)

  • hgtonighthgtonight ∞ · New Moderator

    You could add a processor (either JS or use a PHP formatter) to replace the emoji characters with the appropriate markup on render.

    As far as not being able to copy text with images, trying copying this sentence into a plain text editor and see what happens ;).

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    Shadowdare
  • AnonymooseAnonymoose ✭✭
    edited August 2014

    @frdmn said:
    show the CSS image instead of the actual Unicode character.

    @hgtonight said:
    You could add a processor (either JS or use a PHP formatter) to replace the emoji characters with the appropriate markup on render.

    The older Emoji plugin does this. http://vanillaforums.org/addon/emoji-plugin

    hgtonight
  • AnonymooseAnonymoose ✭✭
    edited August 2014

    @hgtonight said:
    As far as not being able to copy text with images, trying copying this sentence into a plain text editor and see what happens ;).

    Magic. ;)

    hgtonight
  • hgtonighthgtonight ∞ · New Moderator

    Ah, the wonders of accessibility!

    :D

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • AnonymooseAnonymoose ✭✭
    edited August 2014

    Now that got me thinking. You could put the actual emoji unicode in the alt text too.

  • hgtonighthgtonight ∞ · New Moderator

    @Anonymoose said:
    Now that got me thinking. You could put the actual emoji unicode in the alt text too.

    Yes, the solution seems obvious in retrospect. :D

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • AnonymooseAnonymoose ✭✭
    edited August 2014

    The problem is, those Apple Color Emoji images don't come with a free license.

  • @hgtonight‌ Another solution is to use webfonts. http://blog.symbolset.com/making-ss-emoji

  • @hgtonight‌ @Anonymoose‌ great ideas, thanks for that. My plan right now is just to use the CSS/image variant to quickly provide the Emoji for all platforms no matter what. I am aware that copy and paste might not work that well then. However, im not quite sure what i have to remove of the code to realize such behaviour. Can you help me out a bit?

Sign In or Register to comment.