flamebyrd: (Default)
[personal profile] flamebyrd
Yesterday I learned that AO3 really, really does not like emoji, to the point of deleting everything after the offending character in the work box. It's described in the Known Issues page as having no workaround. HTML entities also didn't work (I didn't dive into why this might be).

So I thought, there must be a service that converts emoji into a remotely hosted image out there! And then there wasn't, at least, not that I could find by googling and which would create images appropriate for AO3. But in the process I found Javascript libraries for doing it. Twitter's Twemoji seemed like the best bet, and I very quickly got a conversion script going, only to discover that:
a) It inserts the original emoji character as the alt="" attribute for the image, which AO3 still rejects, and
b) This was not configurable.

OK, I thought. Keep moving forwards. I looked at the Twemoji source code and found it a bit opaque, so I moved on. I found EmojiOne, which looked promising as an open library of emoji images if I were forced to write and host the thing myself. But I didn't really feel like doing that.

I wasted a while messing around with other JS libraries that turned out to only convert :smile: shortcodes and :) ASCII characters to images. Oops.

And then, through googling something else, I discovered that EmojiOne also provides Javascript conversion libraries, and that it was available hosted by a CDN. Awesome! But the demo code didn't include any usage instructions beyond the default, so I dove into the source code. And I discovered that the "use unicode as the alt attribute" is configurable with this script - it will include the :smile: type emoji code as the alt instead, which seemed reasonable.

So I set all that up on my test page, and discovered that the images are output at 64x64 and resized with CSS. This is a decent solution for webpage usage but I didn't want to force anybody including these emoji images in an AO3 work to include a custom skin.

Forwards, always forwards. RIGHT, I thought. The HTML output for the EmojiOne library isn't overridable, but I have the source code and I mostly understand it, how about I just copy and paste the bulk of the function and set it up to allow the coder to provide some HTML attributes for the img tag*? So that's what I did.

And here's the final result:
(I may tweak it so that you can choose - or manually enter - the image dimensions later. And I'll probably also tweak it so that it converts the shortcodes, since this is a feature EmojiOne provides.)

I feel like if I'd searched more way, way back in the first ten minutes I could have found an existing site that does this. I mean. It MUST exist! But this was an interesting code spiral to get into and I learned some things - and discovered a neat project!

*The quicker option here would have been to just enter the dimensions in the img tag, but my brain wouldn't let me harcode like that
Anonymous (will be screened)
OpenID (will be screened if not validated)
Identity URL: 
Account name:
If you don't have an account you can create one now.
HTML doesn't work in the subject.


If you are unable to use this captcha for any reason, please contact us by email at support@dreamwidth.org

Notice: This account is set to log the IP addresses of people who comment anonymously.
Links will be displayed as unclickable URLs to help prevent spam.

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated October 23rd, 2017 01:34 pm
Powered by Dreamwidth Studios