Adding iOS Text Messages to Your Work

Skip header

Actions

Work Header

Rating:

General Audiences

Archive Warning:

Creator Chose Not To Use Archive Warnings

Fandom:

Original Work

Language:

English

Stats:

Published:: 2019-05-18
Words:: 4,319
Chapters:: 1/1
Comments:: 43
Kudos:: 139
Bookmarks:: 135
Hits:: 5,777

selfishlaundry

Summary:

This is a simple tutorial for using HTML to create basic iOS text messages in Ao3. I'll do my best to make this easy to understand! This is intended for users who have little-to-no experience with this process at all, so bear with me if it's a bit redundant about some features you're already familiar with.

Notes:

(See the end of the work for notes.)

Work Text:

1. The first thing you need to do is make a Work Skin on Ao3. This one is easy, because I've already made it!

- Open this link in a new tab: Work Skin

- In another Ao3 tab (easiest if you just duplicate this one), navigate to your dashboard, and click "Skins" (on the left-hand side).

Skins Button

- Click the button that says "My Work Skins".

My Work Skins

- Then, in the top right-hand corner, click "Create Work Skin".

Create Work Skin

- Name your Work Skin whatever you like.

Name Work Skin

- Copy the entire contents of my Work Skin (the one from the link you opened)...

Copy Work Skin

- Into the body of yours...

- Then "Submit" it.

Submit Work Skin

2. Now let's practice making text messages.

- In yet another Ao3 tab (again, easiest if you just duplicate the one you're in right now, and I promise this is the last one), start a regular draft to practice in by clicking "Post New".

Post New Work

- Set this page up however you want, in regards to archive warnings, titles, etc. In my case, since this is just for practice, I've chosen General Audiences, not to use archive warnings, and "Original Work".

Set up your work

- I named my work "iOS Practice".

Name your work

- If you're practicing this in an existing work, or are accustomed to posting on Ao3 then you already know what to do :)

- In the "Select Work Skin" dropdown, choose the Work Skin you just created a few minutes ago by copying and pasting. Mine is called "selfishlaundry ios".

Work Skin Dropdown

- Make sure your editor is set to HTML as opposed to Rich Text.

HTML Editor

Okay, here we go.

- This first bit of HTML will give you a text conversation with a contact name/number at the top, and a white background (the white background is only visible in preview mode, as the posted work will have a white background anyway - it helps to visualize it though).

<div class="phone">

Contact 
 
Character A:Hi. 
 
Character A:How are you? 
 
Character B:I'm good! 
 
Character B:How have you been doing? 
 
Character A:I've been good. 
 
Character A:Reading too much fanfiction. 
 
Character B:Never.

</div>

Copy this code and paste it into your work, and I'll explain it in more detail below (as pictured, don't forget your work skin and the HTML editor button).

Test code with frame

- When you preview this, it will look like:

With Phone Frame

Close up:

Up close

If you don't want the Contact name or number, you can forgo the "header" line, and change "body" to "bodyNoHeader".

The rationale behind this choice is purely aesthetic. Sometimes it is visually appealing and narratively appropriate to have messages float freely without the contact name at the top.

The resulting HTML will look like this:

<div class="phone">

 
Character A:Hi. 
 
Character A:How are you? 
 
Character B:I'm good! 
 
Character B:How have you been doing? 
 
Character A:I've been good. 
 
Character A:Reading too much fanfiction. 
 
Character B:Never.

</div>

If you want to copy/paste this code to test it out, go ahead! You can even paste it right beneath the other chunk and you'll be able to see both, one on top of the other.

No contact name

With preview:

Side by Side

- Up close:

Phone without frame

Note: These messages will appear over the white background of your posted work transparently. They won't have this off-grey color behind them (that's just the color of the preview screen).

Okay, so let's break it down.

- The "phone" line is required.

OR

- The "body" or "bodyNoHeader" line is required. You simply have to decide which aesthetic you're going for, and change the name accordingly.

Contact

- Only use the "header" line in conjunction with "body" (not "bodyNoHeader"). Use "header" if you want to have the Contact name/number at the top.

Character A:Hi.

- "blueText" is a blue bubble message from the character holding the phone.

Character A:How are you?

- "blueTextTail" is a blue bubble with a "tail".

Character B:I'm good!

- "greyText" is a grey bubble coming from the character not holding the phone.

Character B:How have you been doing?

- "greyTextTail" is a grey bubble with a "tail".

Character A:I've been good. 
 
Character A:Reading too much fanfiction.

- "greenText" and "greenTextTail" are identical to the blue bubbles (show on the right side of the screen), just green in color.

</div>

- The "< /div>" tags will always be the last line in your text conversation HTML code.

In each of the message variants, you will see the actual content of the text. Type whatever you want your characters to say in the places where I have written "Hi.", and "How are you?", etc.

If you're using a "header", you'll replace the word "Contact", with the name/number of the character you want to be the recipient of the texts.

The speech bubbles with and without tails are purely for aesthetics. Make them all have tails, if you like. Doesn't matter. Totally up to you.

Here I changed "Contact" to "Reader", as well as the content of the messages:

<div class="phone">

Reader 
 
Character A:Now is a good time to go into your work, and play around with these values. 
 
Character A:See what you like. 
 
Character B:Try it out!

</div>

Try it out

Formatting

(For when the Creator's Style is turned off, or when someone is reading from a platform that doesn't support it - like an eReader).

"Character A" and "Character B" are the two characters participating in the text conversation so far in my examples. They appear after the "hide" tags, and these values are invisible most of the time, but they're there so that a reader who can't see your style will still be able to understand what's going on in the story.

You'll want to change these to the names of your characters! (This also helps you keep track of who's saying what.)

So, for example, if Rey is the one holding the phone, and Ben is on the other end of it, we'll change these values to look like this:

<div class="phone">

Ben 
 
Rey: Which program do Jedi use to open PDF files? 
 
Ben: Ugh 
 
Rey: Oh, come on! 
 
Rey: At least have a guess... 
 
Ben: Microsoft Edge 
 
Rey: Microsof... 
 
Rey: Microsoft Edge?!! What even is that?? 
 
Ben: Are you going to tell me the answer or do I have to Bing it? 
 
Rey: Wow 
 
Ben: Rey... 
 
Rey: I honestly don't think you'll get it 
 
Ben: I Bing'd it. What does Adobe Wan Kenobi mean??

</div>

Copy this code into your work, and preview:

In which Ben is bad at technology

Up Close:

Oh Ben

Now click "Save Without Posting".

Save Without Posting

Then "Hide Creator's Style". (We're just doing this so you can see what it will look like. Normally, you'd have no reason to click this.)

Hide Creator's Style

This is how your text conversation will appear to someone who can't see the style:

Hidden Style

Close up:

Enhance

So obviously that's very important! It keeps your work legible across platforms.

Emojis (UPDATED 05.24.19)

The easiest way to use emojis in your text messages is the same way you use them in comments you make here on Ao3 (and the same way you do everything else in this tutorial 😂)...copy/paste.

Update: There's really no need for emoji keyboard extensions, it turns out. (Sorry about that!).

If you use Windows:

You can press Win + ; (Windows key + Semicolon key, in that order), and it will pop up an emoji keyboard for you!

Windows Emojis

On the people emoji tab, you can change skin tone:

Windows Skin Tone

Just click the emoji that you want, and it will automatically show up where you're typing. 👌👌🏻👌🏼👌🏽👌🏾👌🏿

On Windows, we suffer from a lack of emojis. 😭

Here's the issue with that: If you try to use an emoji that is not supported on Windows yet, it will look like this: 🥰. (To all the Mac users looking at this right now, it looks like the cute smiley with hearts all around it). So be aware that there is a difference in platforms regarding what's supported.

If you use Mac:

You can press ^ + ⌘ + Space (Control key + Command key + Space bar, in that order), and you'll see something very similar.

Mac Emoji Keboard

Skin tone options will appear when you click an emoji that has them:

Skin Tone Mac

Mac users beware! There are emojis that Windows users can't see! If you're worried about that, stay away from the newest ones. (Or maybe you just don't care 😈).

Emojipedia, is also a wonderful resource for emojis. It takes a little more work to find what you want, but if you're on Windows you'll be able to see which ones don't work for you.

Emoji Limitations:

I'm still working this out, but as of right now, you can't use "combination" emojis. By "combination", I mean like the families 👩👩👧👧 and the occupations 👩🏫 ...or this is how they will look.

I'm not sure how many others are like this, so it'll just have to be trial-and-error to figure it out.

The "gendered" emojis, like these: 🤷♀ 🤷♂ show up with gender symbols after them.

Sorry about this, I am still a bit confused about it - I don't know if this is just a limitation of Ao3 or what. But I'm working on getting around it. Also wondering if I'm just missing something.

To have emojis appear on their own lines:

I'm going to introduce two new types of messages here, "emojiRight", and "emojiLeft". You will use them exactly the same way as you use the text messages.

<div class="phone">

Finn 
 
Rey: You like jokes right? You like laughing and smiling like a normal, non-Ben human person? *Eyes Emoji*👀 
 
Finn: YES 
 
Rey: *Clapping Hands Emoji*👏 
 
Rey: Why was Mon Mothma banned from Jedi training?*Thinking Emoji* 🤔 
 
Finn: Because she wasn't Force-sensitive? 
 
Rey: Because she kept trying to fly into the lightsabers. 
 
Finn: *Joy Emoji*😂😂😂 
 
</div>

Copy and paste this code into your work, and hit preview:

Emojis!

Close up:

Enhance!

Breakdown:

Rey: *Clapping Hands Emoji*👏

- "emojiRight" will make the emoji appear on the right side of the screen, sent by the person holding the phone. In this case, Rey.

Finn: *Joy Emoji*😂😂😂

- "emojiLeft" will appear on the left, sent by the person on the other end. Or, Finn.

You'll notice the "hide" tags are still being used here - this is once again to compensate for a platform that doesn't support the style. This is what the reader will see instead of the emoji:

Where have all the emojis gone

I chose asterisks and the official emoji descriptions, but it's completely up to you! Use whatever you believe will best represent your emoji usage textually.

The emojis will work themselves out across platforms, as far as the appearance they take on. I wrote this tutorial on a PC, so in the screenshots so far you've seen them how they look with Windows (the style is really lacking in my opinion but 🤷).

But if I look at my practice work on my iPhone, they will look like Apple emojis.

Proof (it's huge so you can see them, sorry):

Sent from my iPhone

Well! 😅 *long, slow exhale*

That just about covers it for basic back-and-forth iOS text messages, with emojis.

Simply copy and paste this HTML code exactly as it is, and fill out the pertinent information to your specifications. Like a form! No need to change any of the "spans" or brackets or anything.

As you add text messages, just choose whether you want blue ones (blueText, blueTextTail), green ones (greenText, greenTextTail), grey ones on the left side (greyText, greyTextTail), or emojis on their own lines (emojiRight, emojiLeft). And, of course, whether you want a contact at the top (header + body, bodyNoHeader).

And always, always preview your work periodically, to make sure you like how everything looks!

It gets a little bit more complicated (but not a whole lot!) to add images/gifs, timestamps, read receipts, and other cool stuff into your conversation. I will definitely be getting to that soon!

Posting

If you are already used to posting into the HTML editor on Ao3, then just keep doing what you're doing, and copy/paste your new text messages in between the paragraphs where you want to see them!

If you typically use the Rich Text editor, and without me knowing exactly what sort of formatting you're accustomed to, this is probably the easiest solution if you'd like text messages in your fics:

I have tested the following method, and at least as far as I know right now, this is what I think your best option is. (If anyone knows of a better way, definitely let me know. I have never posted anything so I don't have clearly defined thoughts/preferences on this just yet).

You'll have to copy your text (a chapter you're ready to post) and paste it into an HTML converter. I believe google docs offers a converter already, and there are plenty of them online. I write in Word, and I tried this one out and it seems to work well: Word to HTML

It looks a little fly-by-night, but I didn't have any issues with it.

HTML Converter

Take the lovely words you've written (and now converted to clunky HTML), and paste them into your work. Then take the lovely text messages you've made and paste them into the space between paragraphs where you want them.

😎👌

Bonus:

(Copy/Paste the code below into your work to see an example of how texts can be woven in between written words, and also forgive me because I wrote this in five minutes and it's silly).

-A Conclusion-

Rey smiled warmly at the screen, leaned back, and threw her feet up on the desk, content. At least Finn thought she was funny.

Her phone buzzed again.

<div class="phone">

Ben 
 
Ben: Okay, I get it. 
 
Ben: Like Obi-Wan Kenobi. 
 
</div>

His Binging had served him well, it seemed. Only took ten minutes.

Perhaps out of spite - both for his apparent inability to find her amusing, and because now, thanks to him, she was using Bing as a verb, too - she wrote:

<div class="phone">

Rey: If you date someone who doesn't like Star Wars puns... 
 
Rey: ...then you're looking for love in Alderaan places 
 
</div>

She supposed it was probably a good thing he didn't just pretend to laugh at her jokes. That was a dangerous precedent to set, and anyway his general taciturnity was one of her favorite things about him. If he suddenly started sending her rofl emojis, she'd have to get in contact with an old priest and a young priest.

<div class="phone">

Ben: Are you ready? 
 
Rey: Born ready 
 
Rey: Wait for what? 
 
Ben: For me to throw you the ultimate Star Wars punchline layup. 
 
</div>

Rey laughed. She seriously doubted his ability to do any such thing but...what the hell.

<div class="phone">

Rey: Let's go Solo 
 
</div>

The typing indicator flashed at the bottom of the screen for far too long - a visual representation of his indecision. Rey didn't know much about basketball, but she was fairly certain layups didn't take 100 years to execute.

Maybe he was imagining it in slow-motion.

<div class="phone">

Ben: I love you. 
 
</div>


Oh.


Rey blinked down at her screen.

"Oh!" she said, out loud. To no one. She smiled so big it made her cheeks hurt.


Well.


She couldn't just leave him hanging in the middle of the ultimate Star Wars punchline layup, could she?

Rey typed all five letters as fast as her shaking thumbs would allow.

<div class="phone">

Rey: I know 
 
</div>

---UPDATE (05.31.20)---

For using the grouptext functionality, and inserting pictures or gifs...

4 People 
 
Jane 
Jane: "https://media.giphy.com/media/huJmPXfeir5JlpPAx0/giphy.gif" 
Jess: Um...what is? 
John 
John: You don't know? 
John: Omg, she doesn't know! 
Jess: Are you going to tell me or...? 
Jane 
Jane: "https://media.giphy.com/media/RG4IXFG1YmLOU/source.gif" 
Jess: "https://media.giphy.com/media/y9v6gGKHjBX7W/source.gif" 
Jack 
Jack: ASFHISHDLKJLSJ 
Jack: "https://i.imgur.com/Nlbyr00.jpg" 
 
 
</div>

For simulating a group text conversation, I've changed the phone header to "4 People", though I think it's up to you what you put here. Maybe a nickname for a group chat, or a list of names...

4 People 

The grouptext line puts the name of the senders over their messages, followed immediately by the message they're going to send:

John 

John: You don't know? 

In order for photos and gifs to work in your text messages, you'll have to update the Work Skin you made at the beginning of the tutorial.

For the set of messages I've provided above, you will need to add the following CSS:

#workskin .matt {
float: left;
margin: 0 0 0.5em;
border-radius: 1em;
width: 50%;
min-height: 75%;
clear: both;
position: relative;
content: url("https://i.imgur.com/Nlbyr00.jpg");
display: inline-block;
}

#workskin .itsHappening {
float: left;
margin: 0 0 0.5em;
border-radius: 1em;
width: 50%;
min-height: 75%;
clear: both;
position: relative;
content: url("https://media.giphy.com/media/huJmPXfeir5JlpPAx0/giphy.gif");
display: inline-block;
}

#workskin .laughingWitch {
float: left;
margin: 0 0 0.5em;
border-radius: 1em;
width: 50%;
min-height: 75%;
clear: both;
position: relative;
content: url("https://media.giphy.com/media/RG4IXFG1YmLOU/source.gif");
display: inline-block;
}

#workskin .annoyed {
float: right;
margin: 0 0 0.5em;
border-radius: 1em;
width: 50%;
min-height: 75%;
clear: both;
position: relative;
content: url("https://media.giphy.com/media/y9v6gGKHjBX7W/source.gif");
display: inline-block;
}

Any time you want to add a picture or gif, you will need to create one of these elements in your Work Skin first, and give it a unique name. Once it's there, if you ever want to use it again, you can.

Keep the names unique! If you create two with the same name, one of them won't work properly.

There are only three lines that need to change every time you add an image to your Work Skin:

#workskin .annoyed {
float: right;
margin: 0 0 0.5em;
border-radius: 1em;
width: 50%;
min-height: 75%;
clear: both;
position: relative;
content: url("https://media.giphy.com/media/y9v6gGKHjBX7W/source.gif");
display: inline-block;
}

.annoyed is the name I've given to this gif. You can name your images anything you want. Just remember that you will have to reference this name in your HTML:

Jess: "https://media.giphy.com/media/y9v6gGKHjBX7W/source.gif"

float: right; indicates which side of the "phone screen" the image will appear on. Change to float: left; if you want the image on the left side.

And content: url("https://media.giphy.com/media/y9v6gGKHjBX7W/source.gif"); is the URL for the image, and it will also be referenced in the HTML:

Jess: "https://media.giphy.com/media/y9v6gGKHjBX7W/source.gif"

Once you've updated your Work Skin with those four image elements, go ahead and copy/paste the HTML above into your practice work and see how it looks!

You will have to search the internet for the picture or gif you want to use, and find a suitable URL for it. After some testing, I believe this will only work if the link ends in .png, .jpg, or .gif

Sites like imgur and giphy have been my primary sources for these.

As far as image sizing goes, I think this format is the best I've found for handling various resolutions in a way that is similar to how a real phone does. Low-quality images will be smaller than high-quality ones. Sometimes you might find an image you want to use that just simply doesn't look good in this format 😑. It may be a matter of trial and error in some cases! But, ultimately, this is my preferred method.

I meant to do an entirely separate chapter on images and gifs when I made this tutorial but I never quite had the time. Hopefully this helps! It really does add a more lifelike quality to text conversations when there are memes and gifs in them, I think.

If you have any questions, please don't hesitate to ask. I really do enjoy helping when I can.

Notes:

If you see any mistakes/issues with any of this, or have any suggestions for better methods, please let me know!
And if you have any questions at all you can comment here, email me at [email protected], or find me on Twitter @selfishlaundry.
Also, thank you to slipgoingunder, who uses text messages so perfectly in her work, and who let me ask her a bunch of questions about it!

Archive of Our Own^beta

Actions

Work Header