Work Header

How to Make iOS Text Messages on AO3

Chapter Text


As of April 1st, 2016, the Archive of our own does not support emoji... Why?

Short answer: the languages team have prioritised actual languages. (See the ticket AO3-4056)

Long answer: what we think of as "emoji" are actually not a single thing. They descend from the orignal dingbats for Windows, NTT DoCoMo e-moji, and other places. Each of which did them a different way: a dingbat is a different font for a letter, the Japanese phone companies implemented them as new letters.

Which brings us to today: with the introduction of Unicode 8, we are beginning to reach a consensus on how to implement emoji (Unicode 8 emoji List), but not all systems support them. In general, emoji will always display correctly in Twitter, on Apple devices, and when using EmojiOne. They are most likely to be messed up in Windows 7, and there are a number of platforms that are in-between. Like AO3.

Each emoji corresponds to a character code (hexadecimal code point). Or multiple character codes in the case of human characters or national flags. Most of the time a special character could be entered into a story though the use of that code or the HTML numerical equivalent. AO3 only supports HTML special characters up to 9999. Any use of a character above that number will cause the chapter/story to truncate at that point.

Hi there,

Many thanks for contacting us about this issue.

I’m afraid that our database’s encoding can’t store emoji with higher numbers than #9999 (✏). This causes the errors you have experienced with them not displaying and text being truncated. Apologies for the inconvenience, and please don’t hesitate to contact us again if you have any questions or run into any problems.

AO3 Support

Putting emoji directly into the story - as with the pencil above - is the easiest. But most emoji aren't available in this range. David Thatcher has a full list of the available characters if that's a path that works for you.

Fortunately, each story in AO3 has two parts - they story and the skin (formatting). While most emoji can't be stored in the database holding the fic, and adding them in though the formatting is a different story. La_Temperanza has a great description of the method below; and if you don't want to brave the web, All the Emoji has a series of tables showing emoji in A03 with HTML and CSS ready to copy-paste into your work and work sking.

Adding in support for emoji is just as much work for the volunteers who keep the archive going as adding a new language. If you want to contact support about adding emoji please, 1) BE POLITE, 2) reference the ticket number (AO3-4056), and 3) remember that these are volunteers, doing their best to support fan works everywhere. ♥


So, is there currently a way to display emoji that aren't in the range? Well, technically, there's two. The first--and probably the most straightforward solution--is to use static images of emojis. However, that means gathering images and hosting them somewhere, using bandwidth.

The next option is the one CodenameCarrot briefly mentioned in that we can add emojis through the formatting of the story, specifically by using the CSS attribute content. We do this by adding the following bit to our workskin:

#workskin .emoji:after {
  content: "\emoji hedecimal code point";

So say we want the poo emoji, so we would put the following in our workskin:

#workskin .emoji:after {
  content: "\1F4A9";

Then in our Work Text we would put:

<span class="emoji" title="Poo symbol"></span>

And then we'd get:

One caveat of this method is that the emoji will look different depending on the platform it's viewed upon. On most web browsers, it will be a solid single color symbol with no definition, but on mobile it'll show the actual emoji related to the system in question (on iOS it will be the iOS style, Android will be the Android style, etc.) So that's something you might want to keep in mind.

But the thing you might be wondering is, "How do I find the code for the emoji that I want?" Well, if we go back to the Unicode 8 emoji List, if we look on the 2nd column, we see a string of characters by each emoji, usually prefaced by "UT+" (like the code for the poo emoji is "UT+1F4A9"). So if we remove the "UT+" and replace it with "\", that's what we can pop in to our workskin. EDIT: Or CodenameCarrot has graciously made a cheatsheet for all the emojis that you can find HERE.

Say we wanted a couple emojis on one line. We could make multiple lines of emoji coding in our work skin (and name them emoji1, emoji2, emoji3, etc. or after the names of the emoji themselves) or we can combine them in one line. For example, if we put the following in our workskin:

#workskin .emoji:after {
  content: "\1F61A \2665 \1F495 \1F496 \1F497";

Then we would get:

We can utilize this single line of coding to do the combo emojis. For example, if we did a male couple with a heart, it would be:

#workskin .emoji:after {
  content: "\1F468 \200D \2764 \FE0F \200D \1F468";

Which would produce:

Which might not look too conjoined on web browsers, but will on most mobile ones.

A problem mentioned before is that not all systems (mostly the web browsers) will support every emoji, and the seems to include the Emoji Modifier Fitzpatrick series which is responsible for giving the different skin options for certain emojis. Which means that on mobile you might see the image for a woman with dark skin, but on most web browsers it would it be the generic woman symbol followed by a block.

Now, if the creator's style is hidden, then the emojis will not be displayed. Therefore, the best you can do is use the familiar hide feature to put a description in for the emojis.

Here's an example of emojis in our text message with descriptions that show when the creator's style is hidden:

Character A: have u ever thought about dating an (alien emoji)? Asking for a fellow humanoid meatbag

Character B: I bet their idea of a date is out of this world

Character A: DID YOU JUST

With the creator's style hidden, it looks like this:

Character A: have u ever thought about dating an (alien emoji)? Asking for a fellow humanoid meatbag

Character B: I bet their idea of a date is out of this world

Character A: DID YOU JUST

And it's created by this coding in the Work Text (with the code "\1F47D" under our .emoji section in the work skin):

<div class="phone"><p class="messagebody">
<span class="text"><span class="hide"><b>Character A: </b></span>have u ever thought about dating an <span class="alien" title="Alien symbol"><span class="hide">(alien emoji)</span></span>? Asking for a fellow humanoid meatbag</span><br>
<span class="breply"><span class="hide"><b>Character B: </b></span>I bet their idea of a date is out of this world</span><br>
<span class="text"><span class="hide"><b>Character A: </b></span>DID YOU JUST</span><br>

If you have any questions about certain emojis or formatting, feel free to leave a comment here!