Actions

Work Header

How to Make iOS Text Messages on AO3

Chapter Text

dad

Dad there's a moth on the outside of the bathroom door can you get rid of it?

Pls hurry because I'm going to cry

Dad

Dad

Dad is dead. You're next. Love, Moth


HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to start with the following:

#workskin .phone {
  max-width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
  margin: auto;
}

This is basics of our phone "screen" so to say. Right now, there's coding that the message is put in the middle of your work, but if you don't want that, remove margin: auto; and your text messages will move to the left.

Next, if you want a header displaying the contact name (which is entirely up to you), put the following:

#workskin .header {
  min-width: 300px;
  background-color: #f6f6f6;
  border-bottom: 1px solid #b2b2b2;
  color: #000000;
  font-weight: bold;
  padding-bottom: .5em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -2em;
  text-align: center;
  text-transform: capitalize;
  display: table;
}

Notice it's min-width is the same as our phone's max-width. Make sure if you change the width of one, you change the width of the other.

Now for the actual messages themselves. First you need a separate body for those:

#workskin .messagebody {
  background-color: #FFFFFF;
  display: table;
  padding-left: .5em;
  padding-right: .5em;
}

And then the actual messages themselves. There's the message that's been received (the gray ones):

#workskin .text {
  float: left;
  color: #000000;
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  background: #e5e5ea;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .text::after {
  content: "";
  position: absolute;
  left: -.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

As for sent messages, you can have the typical iMessages (the blue ones):

#workskin .breply {
  float: right;
  color: #FFFFFF;
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  background: #1289fe;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .breply::after {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}

Or standard text messages (the green ones):

#workskin .greply {
  float: right;
  color: #FFFFFF;
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.5em 1em;
  background: #35cb24;
  max-width: 75%;
  clear: both;
  position: relative;
}

#workskin .greply::after {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #35cb24;
  border-bottom-left-radius: 1em 0.5em;
}

And that's your basic text message skin! (Other things you can add will be explained later on in this tutorial)

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the iOS text messages. Now to implement it.

Go to your the work you want the text messages, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and how you want you want your text messages formatted will change what coding you use.

If you wanted something similar to the example we've already used, you would write the following in your Work Text:

<div class="phone">
<p class="messagebody">
<span class="header">contact</span><br><br>
<span class="breply">iOS reply</span><br><br>
<span class="text">Other person's reply</span><br><br>
<span class="greply">SMS reply</span><br><br>
</p></div>

And get something like the following:

contact

iOS reply

Other person's reply

SMS reply

Notice how we have <br><br> after every message. This isn't needed for the coding per se, but more so when the Creator's Style is turned off, your lines aren't jumbled on top of each other.

If you just want simple text messages with no header, you would first change two parts in your workskin, the .phone and the .messagebody:

/* Remove margin: auto; like we talked about earlier */
#workskin .phone {
  max-width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
}

/*Add width:300px; because the text messages don't have a header to spread the screen out wide, if that makes sense. */
#workskin .messagebody {
  width: 300px;
  background-color: #FFFFFF;
  display: table;
  padding-left: .5em;
  padding-right: .5em;
}

And then in the Work Text, we put the following:

<div class="phone">
<p class="messagebody">
<span class="breply">iOS reply</span><br><br>
<span class="text">Other person's reply</span><br><br>
<span class="greply">SMS reply</span><br><br>
</p></div>

And get something like this:

iOS reply

Other person's reply

SMS reply


What do I do if the Creator's Style is hidden?

If you're not familiar with work skins, you might not know that their coding only applies to when the fic is on the AO3 site itself, and not when it's downloaded from the web onto an e-reader. Therefore, you might want a way to distinguish your text messages that will only show up when the style is unavailable.

First, add the following to you work skin:

#workskin .hide {
  display: none;
}

Then, if we use the previous example of just messages and no header, we can change the coding in our Work Text to the following:

<div class="phone"><p class="messagebody">
<span class="breply"><span class="hide"><b>Character A:</b></span>iOS reply</span><br><br>
<span class="text"><span class="hide"><b>Character B:</b></span>Other person's reply</span><br><br>
<span class="greply"><span class="hide"><b>Character A:</b></span>SMS reply</span><br><br>
</p></div>

Which looks like this with style on:

Character A: iOS reply

Character B: Other person's reply

Character A: SMS reply

But with style off, looks like this:

Character A: iOS reply

Character B: Other person's reply

Character A: SMS reply

You could even do it where the text message has narrative exposition that shows up only when the Creator's Style is hidden. For example, the text message at the very top of this tutorial looks like this with the style on:

She was terrified, and quickly sent a message to her dad.

"Dad there's a moth on the outside of the bathroom door can you get rid of it?" she typed.

A few seconds later she added, "Pls hurry because I'm going to cry"

She waited, but there was no response. "Dad" She tried again.

And again. "Dad"

Finally, her phone beeped in response. "Dad is dead. You're next. Love, Moth"

But with creator's style off, it looks like this:

She was terrified, and quickly sent a message to her dad.

"Dad there's a moth on the outside of the bathroom door can you get rid of it?" she typed.

A few seconds later she added, "Pls hurry because I'm going to cry"

She waited, but there was no response. "Dad" She tried again.

And again. "Dad"

Finally, her phone beeped in response. "Dad is dead. You're next. Love, Moth"

Which is done by having the following coding in our work text:
<div class="phone">
<p class="messagebody">
<span class="header"><span class="hide">She was terrified, and quickly sent a message to her</span> dad</span><span class="hide">.</span><br>
<br>
<span class="greply"><span class="hide">"</span>Dad there's a moth on the outside of the bathroom door can you get rid of it?</span><span class="hide">" she typed.</span><br>
<br>
<span class="greply"><span class="hide">A few seconds later she added, "</span>Pls hurry because I'm going to cry</span><span class="hide">"</span><br>
<br>
<span class="greply"><span class="hide">She waited, but there was no response. "</span>Dad</span><span class="hide">" She tried again.</span><br>
<br>
<span class="greply"><span class="hide">And again. "</span>Dad</span><span class="hide">"</span><br>
<br>
<span class="text"><span class="hide">Finally, her phone beeped in response. "</span>Dad is dead. You're next. Love, Moth</span><span class="hide">"</span><br>
<br>
</p></div>

If you notice, the word "dad" is capitalized when the style is on, but isn't when it's off. That's because in our work skin, under .header, we have text-transform: capitalize; which will automatically capitalize whatever you put as a contact name. If you don't want this feature, simply remove it from the workskin.

Can the characters text images?

Yep! First, you need to add the following coding to your workskin:

#workskin .image {
  float: right;
  margin: 0 0 0.5em;
  border-radius: 1em;
  width: 50%;
  min-height: 75%;
  clear: both;
  position: relative;
  background-image: url("YOUR IMAGE URL HERE");
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  padding-top: 50%;
}

What this will do is have the curved thumbnail look that images sent in text messages have without you actually having to curve the images corners yourself. This is created by having the image be the background of the span element. We can also have the span element linked so that readers can click the picture to see a bigger version of it. This is possible by placing the following text in our Work Text:

<div class="phone">
<p class="messagebody">
<a href="YOUR IMAGE URL HERE"><span class="image" title="Image Description: put a description of your image here"></span></a><br>
<br>
<span class="text">...You spend way too much time on the internet.</span><br>
<br>
</p></div>

And then we get the following:

Character A has sent an image!

Character B:...You spend way too much time on the internet.

Two things left to mention about this:
1) If you want the image to be on the received side instead of the sent, go into you work skin, and under .image, change it from float: right to float: left.

2) When Creator's Style is turned off, there will be no sign of the image at all. And sadly, we can't hide it with our usual method, because img src doesn't want to stay in the span element when we're implementing the display: none feature. All I've been able to come up with is using the hidden narrative exposition as demonstrated before, with something along the lines of "Character A has sent an image!"

EDIT: 1/22/17 If for some reason your image is longer than it is wider, you might have to add padding-bottom: 25%; to the image section to make sure the entire length of the picture shows.

EDIT: 5/11/17 Thanks to Leslie_Knope for figuring out how to do a time stamp! If we add the following to our skin:

#workskin .time {
min-width: 299px;
color: #7B7C80;
font-size: .75em;
padding-bottom: .5em;
padding-top: .5em;
margin-left: -.5em;
margin-right: -.5em;
margin-bottom: -.5em;
text-align: center;
display: table;
}

Then in your work text you can have something like this:

<div class="phone"><p class="messagebody">
<span class="header">Mom</span><br /><br />
<span class="time"><b>Yesterday</b> 10:15 PM</span><br />
<span class="text">Can you call me as soon as you get this message?</span><br />
<span class="time"><b>Today</b> 9:05 AM</span><br />
<span class="text">Hello?</span><br />
<span class="text">Are you going to answer me?</span><br />
</p></div>

Which gives us the following:

Mom

Yesterday 10:15 PM
Can you call me as soon as you get this message?
Today 9:05 AM
Hello?
Are you going to answer me?

EDIT: 8/30/17 Ashtyn asked if there's a way we could have it so that time stamps only show when the creator's style is turned on but hidden when the style is off. Honestly I don't how I didn't think of this before, but long story short, yes there is with the use of pseudoclasses. However, you're going to need to create one for every separate date and time and put it in your workskin. To clarify what I mean, if we use the example above, we need to add the following to our workskin:
#workskin .ts1 {
  color: #7B7C80;
  font-size: .75em;
  padding-bottom: 2.5em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -.5em;
  text-align: center;
  display: table;
  min-width: 299px;
}

#workskin .ts1::before {
  content: 'Yesterday';
  font-weight: bold;
}

#workskin .ts1::after {
  content: '10:15 PM';
}

#workskin .ts2 {
  color: #7B7C80;
  font-size: .75em;
  padding-bottom: 2.5em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -.5em;
  text-align: center;
  display: table;
  min-width: 299px;
}

#workskin .ts2::before {
  content: 'Today ';
  font-weight: bold;
}

#workskin .ts2::after {
  content: '9:05 AM';
}

HOWEVER, if you do this as is, it's going to create an awkward space between the contact name (Mom) and the rest of the text, so let's not only change the contact name into a pseudoclass (and hide it so it only shows up when the style is turned off by each text), but adjust our header as well. (For this, you'll have to create a separate header section for each contact, i.e. .header2, .header3, .header4, etc.)

#workskin .header2 {
  min-width: 300px;
  background-color: #f6f6f6;
  border-bottom: 1px solid #b2b2b2;
  color: #000000;
  font-weight: bold;
  padding-bottom: .5em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: 1em;
  text-align: center;
  text-transform: capitalize;
  display: table;
}

#workskin .header2::before {
  content: 'Mom';
}

This has different padding aspects than the original header section, so make sure you use this one if you are using this method! Then in our work text we would put the following (notice how we don't use <br> after any of our pseudoclasses; this makes it so we don't have weird spacing when our style is turned off):

<div class="phone">
<p class="messagebody">
<span class="header2"></span>
<span class="ts1"> </span>
<span class="hide"><b>Mom: </b></span><span class="text">Can you call me as soon as you get this message?</span><br >
<span class="ts2"></span>
<span class="hide"><b>Mom: </b></span><span class="text">Hello?</span><br >
<span class="hide"><b>Mom: </b></span><span class="text">Are you going to answer me?</span><br >
</p></div>

Which gives us something that looks the same as our previous example, but now when the creator's style is turned off, the timestamps disappear:

Mom: Can you call me as soon as you get this message?
Mom: Hello?
Mom: Are you going to answer me?

Laura_Kaye then pointed out that this can also be used for names in group messaging as well with a few tweaks. So if we add the following to our work skin:
#workskin .grouptext {
  color: #7B7C80;
  font-size: .75em;
  padding-bottom: .5em;
  padding-top: 0;
  margin-left: .5em;
  margin-bottom: -2.5em;
  text-align: left;
  display: table;
  clear: both;
}

Then in your work text you can have something like this:

<div class="phone">
<p class="messagebody">
<span class="header">4 People</span><br />
<br />
<span class="grouptext">Sarah</span><br />
<span class="text">So what's the plan for this weekend you guys?</span><br />
<span class="greply">I've got work</span><br />
<span class="grouptext">Tim</span><br />
<span class="text">Same here. And I think Ben does too.</span><br />
<span class="grouptext">Sarah</span><br />
<span class="text">Ugh, really?</span><br />
</p></div>

Which gives us the following:

4 People

Sarah
So what's the plan for this weekend you guys?
I've got work
Tim
Same here. And I think Ben does too.
Sarah
Ugh, really?

NOTES

- First off, I want to say a huge thanks to CodenameCarrot, who first created a work skin for text messages that was the basis for this one. (You can find a live example of it at the bottom of the page here and the coding for its work skin here) CodenameCarrot is also responsible for the beginning of the next chapter on emojis.

- This is modeled after iOS messages, but I do have plans on eventually modifying it to mimic Android, Skype, etc. Or if you can't wait for that, feel free to play around with it yourself! I'd love to see what you come up with. EDIT: Here's an awesome tutorial on how to do Android messaging!

- As always, if you have any questions or concerns, feel free to leave a comment here or send me an ask at to-skin-a-fic.tumblr.com

- If you're wondering about emojis, well, they get their own separate chapter... ;)

Chapter Text

CodenameCarrot:

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.

Best,
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. ♥


La_Temperanza:

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>
<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>
<br>
<span class="text"><span class="hide"><b>Character A: </b></span>DID YOU JUST</span><br>
<br>
</p></div>

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