jockles.com

Thanks to CodenameCarrot and La_Temperanza, whose How to Make iOS Text Messages on AO3 this module is built on. Copied and adapted from it: picture messages, the typing dots, and the hidden text for readers with the style off.

4.1 Chapter Contents

• 4.2 A One-to-One Chat
• 4.3 A Group Chat
• 4.4 The iMessage Window
• 4.5 Simple Messages
• 4.6 Date and Time Lines
• 4.7 Tapback Reactions
• 4.8 Pictures
• 4.9 Delivered and Read
• 4.10 Edited Messages
• 4.11 Typing Dots
• 4.12 Message Bar
• 4.13 Group Chats
• 4.14 Green Text Messages
• 4.15 Tapbacks in a Group Chat

Before we begin, here's the two kinds of chat you can build: a message between two people, or a group chat. The full HTML is underneath each, which you can copy and modify yourself. The rest of the chapter takes the HTML apart so that you can modify all the individual parts to say exactly what you want.

4.2 A One-to-One Chat

<div class="mob imsg theme-auto">
  <p class="mob-head">Ilya<span class="hide"> - </span><span>iMessage</span></p>
  <div class="mob-body">
    <p class="mob-sys">Today 11:48 PM</p>
    <p class="msg in"><span class="hide"><em>Ilya:</em> </span>are you awake</p>
    <p class="msg out"><span class="hide"><em>Shane:</em> </span>no</p>
    <p class="msg in tapped"><span class="hide"><em>Ilya:</em> </span>liar<span class="imsg-tap me"><span class="hide"> [Shane reacted </span>😂<span class="hide">]</span></span></p>
    <p class="msg out tapped"><span class="hide"><em>Shane:</em> </span>ok yes. go to sleep, you have a game tomorrow<span class="imsg-tap"><span class="hide"> [Ilya reacted </span>👎<span class="hide">]</span></span></p>
    <p class="msg in"><span class="hide"><em>Ilya:</em> </span>cannot sleep. hotel is too quiet. but there is a cat</p>
    <p class="msg in pic"><span class="hide"><em>Ilya:</em> </span><img src="https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg" alt="A cat curled up inside an open suitcase"></p>
    <p class="msg in pic text"><span class="hide"><em>Ilya:</em> </span>[A blurry photo of the same cat, now asleep on Ilya's hotel bed]</p>
    <p class="msg out"><span class="hide"><em>Shane:</em> </span>call me?</p>
    <p class="imsg-status">Read 11:52 PM</p>
    <p class="typing-indicator"><span></span><span></span><span></span></p>
  </div>
  <p class="imsg-input"><span class="imsg-plus">+</span><span class="hide"> </span><span class="imsg-field">iMessage<span class="hide"> </span><span class="imsg-mic">&#127908;</span></span></p>
</div>

4.3 A Group Chat

<div class="mob imsg theme-auto">
  <p class="mob-head">gays and europeans (and hayden)<span class="hide"> - </span><span>iMessage group</span></p>
  <div class="mob-body">
    <p class="mob-sys">Today 6:12 AM</p>
    <p class="who">Hayden<span class="hide">:</span></p>
    <p class="msg in">day two of camp. who's awake</p>
    <p class="who">Scott<span class="hide">:</span></p>
    <p class="msg in">unfortunately me</p>
    <p class="msg out"><span class="hide"><em>Shane:</em> </span>been up since 5. the cones are in my car</p>
    <p class="who">Max<span class="hide">:</span></p>
    <p class="msg in">do we have enough pucks for the little ones or do I need to stop by the rink office</p>
    <p class="msg in">also some kid left a mouthguard in my bag yesterday. gross</p>
    <p class="msg out sms"><span class="hide"><em>Shane:</em> </span>can't check, the signal in this rink is terrible</p>
    <p class="msg out sms"><span class="hide"><em>Shane:</em> </span>these are going as texts. it's like 2009 in here</p>
    <p class="who">Ryan<span class="hide">:</span></p>
    <p class="msg in">I've got the pucks. and the orange slices</p>
    <p class="mob-sys">Ilya added Wyatt to the conversation</p>
    <p class="who">Wyatt<span class="hide">:</span></p>
    <p class="msg in">👋</p>
    <p class="who">Scott<span class="hide">:</span></p>
    <p class="msg in tapped">reminder that nobody is letting Ilya run the drills again<span class="imsg-tap me"><span class="hide"> [Shane reacted </span>😂<span class="hide">]</span></span><span class="imsg-tap"><span class="hide"> [Hayden reacted </span>‼️<span class="hide">]</span></span><span class="imsg-tap"><span class="hide"> [Ryan reacted </span>👍<span class="hide">]</span></span></p>
    <p class="msg out tapped"><span class="hide"><em>Shane:</em> </span>the kids loved it though<span class="imsg-tap"><span class="hide"> [Ilya reacted </span>❤️<span class="hide">]</span></span><span class="imsg-tap"><span class="hide"> [Scott reacted </span>👎<span class="hide">]</span></span></p>
    <p class="who">Ilya<span class="hide">:</span></p>
    <p class="msg in">they loved me. I am the fun coach</p>
    <p class="who">Max<span class="hide">:</span></p>
    <p class="msg in">you made a nine year old cry</p>
    <p class="who">Wyatt<span class="hide">:</span></p>
    <p class="msg in tapped">I thought I was the fun coach.<span class="imsg-tap"><span class="hide"> [Ilya reacted </span>👎<span class="hide">]</span></span></p>
  </div>
  <p class="imsg-input"><span class="imsg-plus">+</span><span class="hide"> </span><span class="imsg-field">iMessage<span class="hide"> </span><span class="imsg-mic">&#127908;</span></span></p>
</div>

4.4 The iMessage Window

Every iMessage chat starts with the container, <div class="mob imsg theme-auto">, and everything else goes inside it. First comes the header, with the contact's name:

<p class="mob-head">Ilya<span class="hide"> - </span><span>iMessage</span></p>

mob-head is the header bar. The last <span> adds the smaller grey line under the name, like "iMessage" or "Mobile" - leave it out if you only want the name. After the header comes <div class="mob-body">, which holds all of the messages.

4.5 Simple Messages

Each message is a paragraph with the class msg, plus one more class that says who sent it. in is a message from the other person, which shows as a grey bubble on the left, and out is a message from your point-of-view character, which shows as a blue bubble on the right. Give every message its own <p>, one after another, inside mob-body:

<p class="msg in"><span class="hide"><em>Ilya:</em> </span>are you awake</p>
<p class="msg out"><span class="hide"><em>Shane:</em> </span>no</p>

4.6 Date and Time Lines

For a centred line with the time or date, use mob-sys:

<p class="mob-sys">Today 11:48 PM</p>

It works for anything that isn't a message - a timestamp, "Yesterday", or a note partway through the chat, like when someone joins the group:

<p class="mob-sys">Ilya added Wyatt to the conversation</p>

4.7 Tapback Reactions

When someone reacts to a message, iMessage shows a tapback - a little bubble on the top corner of the message, with a tail of two dots. Add tapped to the message to make room above it, then put a span with imsg-tap at the end of the message text, with the emoji inside. imsg-tap on its own is grey, for someone else's reaction, and imsg-tap me is blue, for your point-of-view character's:

<p class="msg in tapped"><span class="hide"><em>Ilya:</em> </span>liar<span class="imsg-tap me"><span class="hide"> [Shane reacted </span>😂<span class="hide">]</span></span></p>
<p class="msg out tapped"><span class="hide"><em>Shane:</em> </span>ok yes. go to sleep, you have a game tomorrow<span class="imsg-tap"><span class="hide"> [Ilya reacted </span>👎<span class="hide">]</span></span></p>

4.8 Pictures

To send a picture, add pic to a message and put a picture tag inside it. The corners are rounded for you. The picture has to be hosted somewhere else (see Pictures and Alt Text, in the Core, Themes, and Extras chapter), and your link goes in src, with your description in alt:

<p class="msg in pic"><span class="hide"><em>Ilya:</em> </span><img src="https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg" alt="A cat curled up inside an open suitcase"></p>

If you'd rather describe the picture than show it, add text as well and write the description in square brackets:

<p class="msg in pic text"><span class="hide"><em>Ilya:</em> </span>[A blurry photo of the same cat, now asleep on Ilya's hotel bed]</p>

4.9 Delivered and Read

iMessage shows a little status line under your last message. Add it with imsg-status, straight after the message it belongs to, and write "Delivered", "Read 11:52 PM" or whatever you like:

<p class="msg out"><span class="hide"><em>Shane:</em> </span>call me?</p>
<p class="imsg-status">Read 11:52 PM</p>

4.10 Edited Messages

iMessage puts a small blue "Edited" under a message that's been edited. Add it with imsg-edited, straight after the message, just like the status line. For a message from the other person, use imsg-edited-in instead, so it sits on the left:

<p class="msg in"><span class="hide"><em>Ilya:</em> </span>see you at 8</p>
<p class="imsg-edited-in">Edited</p>
<p class="msg out"><span class="hide"><em>Shane:</em> </span>see you at 7</p>
<p class="imsg-edited">Edited</p>

4.11 Typing Dots

For the three dots that show someone is typing, add a typing-indicator paragraph with three empty spans at the very end of the chat:

<p class="typing-indicator"><span></span><span></span><span></span></p>

4.12 Message Bar

To finish off the screen with the "iMessage" box along the bottom, add an imsg-input paragraph after the mob-body, still inside the chat. The + button is imsg-plus, the box is imsg-field, and the microphone is imsg-mic. The hide spans keep a space between them for readers with the workskin off, so it reads "+ iMessage 🎤" rather than running together. Keep it all on one line:

<p class="imsg-input"><span class="imsg-plus">+</span><span class="hide"> </span><span class="imsg-field">iMessage<span class="hide"> </span><span class="imsg-mic">&#127908;</span></span></p>

For a message someone is halfway through writing, add typed to the box so the words go black, swap "iMessage" for what they're typing, and swap the microphone for the blue send arrow, imsg-send. Long messages wrap onto more lines, the same as on the phone:

<p class="imsg-input"><span class="imsg-plus">+</span><span class="hide"> </span><span class="imsg-field typed">ok so about last night, I think we need to talk about what happened before your mum<span class="hide"> </span><span class="imsg-send">&#8593;</span></span></p>

4.13 Group Chats

In a group, put a who line above a message to show who sent it. Your own messages don't get one, the same as on a real phone, so they keep the hidden label instead. Change the header to the name of the group chat, and use the span for the members or "iMessage group":

<p class="who">Hayden<span class="hide">:</span></p>
<p class="msg in">day two of camp. who's awake</p>
<p class="who">Scott<span class="hide">:</span></p>
<p class="msg in">unfortunately me</p>
<p class="msg out"><span class="hide"><em>Shane:</em> </span>been up since 5. the cones are in my car</p>

The who line shows whether the workskin is on or off, so it only needs a hidden colon after the name, to read "Hayden:" followed by the message.

4.14 Green Text Messages

When your point-of-view character's message goes as a normal text instead of an iMessage, it turns green - like Shane's, because the signal in the rink is too bad for iMessage. The same thing happens when they're messaging someone without an iPhone. Add sms to an out message to make it green:

<p class="msg out sms"><span class="hide"><em>Shane:</em> </span>can't check, the signal in this rink is terrible</p>
<p class="msg out sms"><span class="hide"><em>Shane:</em> </span>these are going as texts. it's like 2009 in here</p>

Only sent messages turn green, the same as on a real phone. Messages from someone without an iPhone are grey like everyone else's, so they don't need anything extra.

4.15 Tapbacks in a Group Chat

When more than one person reacts to the same message, iMessage stacks the tapbacks on the corner, overlapping, with the first one at the front. Put the imsg-tap spans one after another at the end of the message. The first one gets the tail, and each one after it tucks in behind, a bit further along the bubble:

<p class="who">Scott<span class="hide">:</span></p>
<p class="msg in tapped">reminder that nobody is letting Ilya run the drills again<span class="imsg-tap me"><span class="hide"> [Shane reacted </span>😂<span class="hide">]</span></span><span class="imsg-tap"><span class="hide"> [Hayden reacted </span>‼️<span class="hide">]</span></span><span class="imsg-tap"><span class="hide"> [Ryan reacted </span>👍<span class="hide">]</span></span></p>
<p class="msg out tapped"><span class="hide"><em>Shane:</em> </span>the kids loved it though<span class="imsg-tap"><span class="hide"> [Ilya reacted </span>❤️<span class="hide">]</span></span><span class="imsg-tap"><span class="hide"> [Scott reacted </span>👎<span class="hide">]</span></span></p>