Archive of Our Own ^beta

Chapter Text

This is a texting system that works with any screen, and it keeps its readability if the skin ins't available, for ereaders and screenreaders

Let's start with a preview of the work skin, you can play with the browser size and turn off the work skin to see how it reacts:

Now here's the css you have to put in the work skin you're creating:

#workskin .box {
  max-width: 320px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

This is the space you're defining for the text to appear. The max width makes sure it doesn't go beyond a mobile size. Margin-left+margin:right auto makes sure it's centered in the window (you can delete one and edit the value of the remaining to change where it lands. The font for the texts is defined here too.

#workskin .insidetext {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  margin-left: 2px;
  margin-right: 2px;
}

#workskin .get,
#workskin .get2,
#workskin .send,
#workskin .send2 {
  position: relative;
  padding: 12px 20px 7px 20px;
  border-radius: 30px;
  width: min-content;
  color: #000;
  background: #e5e5ea;
  margin-bottom: -5px;
}

#workskin .get,
#workskin .get2 {
  margin-left: 0;
}
#workskin .send,
#workskin .send2 {
  background: #1289fe;
  color: #fff;
  margin-right: 0px;
}

#workskin .send2,
#workskin .get2 {
  margin-bottom: -15px;
}

This is what defines the text bubbles and how the text behaves inside it. They're put together so if you want to change the shapes you only need to do it once to affect them all. The repeated class names are there for the ways they vary (ie, .send and .send2 have a different background color than .get, and are aligned to the right instead of left.

#workskin .get:after,
#workskin .send:after {
  content: "";
  position: absolute;
  width: 2em;
  height: 1.5em;
}

#workskin .get:after {
  left: -2em;
  bottom: 0;
  border-right: 0.5em solid #e5e5ea;
  border-bottom-right-radius: 1em 0.5em;
}

#workskin .send:after {
  right: -2em;
  bottom: 0;
  border-left: 0.5em solid #1289fe;
  border-bottom-left-radius: 1em 0.5em;
}

These are the arrows of the text bubbles. You can change them for other shapes, as it's possible to see in the next chapter.

#workskin .hide {
  display: none;
}

This is the class that hides text in the skin, so you can have complementing content for accessibility. It works so this:

Merlin: did you perform your own vanishing act or…

becomes this when the work skin is off:

Merlin: did you perform your own vanishing act or…

Now on the html side this looks like:

<div class="box">
<p class="get">
    <span class="insidetext"><span class="hide"><b>Merlin: </b></span>did you perform your own vanishing act or…</span>
  </p>

<p class="send">
    <span class="insidetext"><span class="hide"><b>Arthur: </b></span>Can’t make it tonight, sorry</span>
  </p>

<p class="get2">
    <span class="insidetext"><span class="hide"><b>Merlin: </b></span>??? u could have said earlier</span>
  </p>

<p class="get">
    <span class="insidetext"><span class="hide"><b>Merlin: </b></span>prat</span></p>
</div>

"insidetext" is the span class for the text to fit properly inside the bubble. what's on the "hide" only shows without the work skin. "get2" is the version of the speech bubble without the arrow, so you can pile several texts from the same person.

The workskin as it is works fine if you want one line of text, but if it goes for too long this happens:

Merlin: did you perform your own vanishing act or did you maybe fall and hit your head somewhere?

To make the lines break you have to input them manually into the text. The easier way to do this is add < br > where you want it to cut, but this will force the break even when the workskin is turned off.

To make sure the lines break where you want them with the workskin on while making sure it stays as one line when it's off, you need to add this to your css:

#workskin .break {
  display: block;
}

On the html this will look like:

<p class="get">
    <span class="insidetext"><span class="hide"><b>Merlin: </b></span><span class="break">did you perform your own vanishing act or did </span>you maybe fall and hit your head somewhere?</span>
  </p></div>

You use the class "break" on the beginning on the line you'll be cutting off, and close the span class where you want the break to happen. The end result will look like this:

Merlin: did you perform your own vanishing act or did you maybe fall and hit your head somewhere?

If you're looking for a more complete texting visual, I 100% recommend the guide How to Make iOS Text Messages on AO3 by @CodenameCarrot and @La_Temperanza. They have a complete texting window look which includes:

So do check out that guide if you want all of these amazing stuff, and many more!

Here, next chapter is about bubble speech for Signal

Chapter Text

Same as before, this works on any screen, and it keeps its readability if the skin ins't available, for ereaders and screenreaders

This template is set for Signal, but Facebook's Messenger is very similar, if you exclude the icons. You just need to change the bubble colors to the ones I provide further down.

Let's start with a preview of the work skin, you can play with the browser size and turn off the work skin to see how it reacts:

Now here's the css you have to put in the work skin you're creating:

#workskin .box {
  max-width: 320px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#workskin .insidetext {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  margin-left: 2px;
  margin-right: 2px;
}

This is the space you're defining for the text to appear. The max width makes sure it doesn't go beyond a mobile size. Margin-left+margin:right auto makes sure it's centered in the window (you can delete one and edit the value of the remaining to change where it lands. The font for the texts is defined here too, and how the text fits in the bubles.

#workskin .signalSend,
#workskin .signalSendBottom,
#workskin .signalSendTop,
#workskin .signalSendMiddle,
#workskin .signalGet,
#workskin .signalGetBottom,
#workskin .signalGetTop,
#workskin .signalGetMiddle {
  position: relative;
  padding: 12px 20px 7px 20px;
  border-radius: 15px;
  width: min-content;
  background: #4162d8;
  color: #fff;
  margin-right: 0px;
  margin-bottom: -5px;
}

#workskin .signalSendTop,
#workskin .signalSendMiddle,
#workskin .signalGetTop,
#workskin .signalGetMiddle {
  margin-bottom: -17px;
}

#workskin .signalGet,
#workskin .signalGetBottom,
#workskin .signalGetTop,
#workskin .signalGetMiddle {
  margin-left: 0;
  color: #000;
  background: #e5e5ea;
}

This is what defines the text bubbles. The classes are grouped together so if you want to change the shapes you only need to do it once to affect them all. The repeated class names are there for the ways they vary (ie, .signalGet has a different background color and bottom margin than .signalSend, and is aligned to the right instead of left.
for standard Messenger colors, you just need to change background: in .signalGet to #f2f2f2 and in .signalSend to #62b5eb

#workskin .signalSendTop:after,
#workskin .signalSendMiddle:after,
#workskin .signalSendMiddle:before,
#workskin .signalSendBottom:before,
#workskin .signalGetTop:after,
#workskin .signalGetMiddle:after,
#workskin .signalGetMiddle:before,
#workskin .signalGetBottom:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background-color: #4162d8;
}

#workskin .signalSendMiddle:before,
#workskin .signalSendBottom:before {
  top: 0;
  right: 0;
}

#workskin .signalGetTop:after,
#workskin .signalGetMiddle:after,
#workskin .signalGetMiddle:before,
#workskin .signalGetBottom:before {
  left: 0;
  width: 15px;
  height: 15px;
  background-color: #e5e5ea;
}

#workskin .signalGetMiddle:before,
#workskin .signalGetBottom:before {
  top: 0;
  left: 0;
}

These are the squared arrows of the text bubbles. The before are for the arrows on the top, the after are for the bottom.
For messenger, you need to change the colors just as before.

The classes are named after the app, who's sending them and the position. So 'signalGetTop' is the first message in a row the person on the phone is receiving. Do feel free to change these names, of course, but make sure they match wherever they're repeated.

#workskin .hide {
  display: none;
}

Same as last time, this is the class that hides text in the skin, so you can have complementing content for accessibility. It works so this:

Merlin:you're special alright

becomes this when the work skin is off:

Merlin: you're special alright

Now on the html side this looks like:

<div class="box">

<p class="signalGetTop">
    <span class="insidetext"><span class="hide"><b>Merlin: </b></span>clotpole</span>
  </p>

<p class="signalGetMiddle">
    <span class="insidetext"><span class="hide"><b>Merlin: </b></span>prat</span>
  </p>

<p class="signalGetBottom">
    <span class="insidetext"><span class="hide"><b>Merlin:</b></span>you're a wonder, really</span>
  </p>

<p class="signalSend">
    <span class="insidetext"><span class="hide">Arthur:</span>I knew I was a special case</span>
  </p>
<p class="signalGet">
    <span class="insidetext"><span class="hide"><b>Merlin:</b></span>you're special alright</span>
  </p>
</div>

To make sure the lines break where you want them with the workskin on while making sure it stays as one line when it's off, you need to add this to your css:

#workskin .break {
  display: block;
}

On the html this will look like:

<p class="signalGetTop"><span class="insidetext"><span class="hide"><b>Merlin: </b></span><span class="break">did you perform your own vanishing act or did</span> you maybe fall and hit your head somewhere?</span></p>

You use the class "break" on the beginning on the line you'll be cutting off, and close the span class where you want the break to happen. The end result will look like this:

Chapter Text

Same as before, this works on any screen, and it keeps its readability if the skin ins't available, for ereaders and screenreaders. First solo conversations:

Now here's the css you have to put in the work skin you're creating:

#workskin .window {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
}

#workskin .inside {
  white-space: nowrap;
  margin-right: 5px;
  color: #000;
  font-size: 13px;
}

#workskin .time,
#workskin .timeSend,
#workskin .timeGet {
  white-space: nowrap;
  font-size: 10px;
}

#workskin .timeSend {
  color: #6a7d4f;
}

#workskin .timeGet {
  color: #808080;
}

#workskin .seen:after {
  content: url("https://i.ibb.co/zVTTd25/seen.png");
}

#workskin .recieved:after {
  content: url("https://i.ibb.co/V9Gd7R3/recieved.png");
}

#workskin .sent:after {
  content: url("https://i.ibb.co/kxFkGbT/sent.png");
}

window is the space you're defining for the text to appear. The max width makes sure it doesn't go beyond a mobile size. Margin-left+margin:right auto makes sure it's centered in the window (you can delete one and edit the value of the remaining to change where it lands. The font for the texts is defined here too.
inside is the text inside the bubble. time (plus its variants, Send and Get) define the timestamp and the sent/recieved/sent the read icons.

#workskin .whatsSend,
#workskin .whatsSend2 {
  white-space: nowrap;
  position: relative;
  float: right;
  border-radius: 5px;
  width: min-content;
  background: #dcf4bd;
  box-shadow: 1px 1px 0 #b3b3b3;
  padding: 4px 5px 5px 8px;
  margin-bottom: -8px;
  margin-left: 100px;
}

#workskin .whatsSend2 {
  margin-top: 11px;
}

#workskin .whatsSend:before {
  border-right: 11px solid transparent;
  border-top: 11px solid #b3b3b3;
  content: "";
  position: absolute;
  right: -11px;
  top: 0px;
}

#workskin .whatsSend:after {
  border-right: 12px solid transparent;
  border-top: 11px solid #dcf4bd;
  content: "";
  position: absolute;
  right: -10px;
  top: 0px;
}

#workskin .whatsGet,
#workskin .whatsGet2 {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  margin-left: 0;
  border-radius: 5px;
  width: min-content;
  background: #fdfdfd;
  border-top: 0.5px solid #f2f2f2;
  border-left: 0.5px solid #f2f2f2;
  box-shadow: 1px 1px 0 #b3b3b3;
  padding: 4px 5px 5px 8px;
  margin-bottom: -8px;
  margin-right: 100px;
}

#workskin .whatsGet2 {
  margin-top: 11px;
}

#workskin .whatsGet:before {
  border-left: 11px solid transparent;
  border-top: 11px solid #b3b3b3;
  content: "";
  position: absolute;
  left: -11px;
  top: 0px;
}

#workskin .whatsGet:after {
  border-left: 12px solid transparent;
  border-top: 11px solid #fdfdfd;
  content: "";
  position: absolute;
  left: -10px;
  top: 0px;
}

whatsSend/Get are the bubbles with arrows. The version with 2 (ex whatsGet2) are the ones without the arrows.
the classes with :beforedefine the arrow's shadow, and the ones with:after</> define the arrow itself.

#workskin .hide {
  display: none;
}

Same as before, this is the class that hides text in the skin, so you can have complementing content for accessibility. It works so this:

becomes this when the work skin is off:

Merlin: im feeling special - 17:39

Arthur: im feeling special - 17:39 - Message Seen

Now on the html side this looks like:

<div class="window">

 <p class="whatsGet">
    <span class="inside"><span class="hide">Merlin: </span>im feeling special</span>
    <span class="hide"> - </span>
    <span class="timeGet">17:39</span>
  </p>

 <p class="whatsGet2">
    <span class="inside">Also, you know that's kind of rude</span>
    <span class="hide"> - </span>
    <span class="timeGet">17:41 </span>
  </p>

 <p class="whatsSend"><span class="hide">Arthur: </span> <span class="inside">im feeling special</span><span class="hide"> - </span><span class="timeSend">17:39 <span class="seen"></span><span class="hide"> - Message Seen </span></span></p>

 <p class="whatsSend2">
    <span class="inside">how are you this creative with insults?</span>
    <span class="hide"> - </span>
    <span class="timeSend">17:41 <span class="recieved"></span><span class="hide"> - Message Received </span></span>
  </p>

 <p class="whatsSend2">
    <span class="inside">Also, you know that's kind of rude</span>
    <span class="hide"> - </span>
    <span class="timeSend">17:41 <span class="sent"></span><span class="hide"> - Message Sent </span></span>
  </p>
</div>

Now with group chats all you have different are the sent messages:

The new css:

#workskin .name,
#workskin .newcontact,
#workskin .name1,
#workskin .name2,
#workskin .name3,
#workskin .name4 {
  font-size: 12px;
  margin-bottom: -18px;
}

#workskin .name1 {
  color: #ffa366;
}

#workskin .name2 {
  color: #4162d8;
}

#workskin .name3 {
  color: #69b3a9;
}

#workskin .name4 {
  color: #f195b4;
}

#workskin .newcontact {
  color: #b3b3b3;
}

I've provided 4 colors for the names, but if you want more, just copy and paste one of the individual rows and change the color inside. don't forget to add it to the bundle of classes. If you're looking for html colors, this is a good place to get them.

Now on the html side this looks like:

<p class="whatsGet"><span class="name1">Gwen</span><span class="hide">: </span><br /><span class="inside">im feeling special alright</span><span class="hide"> - </span><span class="timeGet">17:39</span></p>
<p class="whatsGet"><span class="name2">+351 987 983 254</span><span class="newcontact"> ~Gwaine</span><span class="hide">: </span><br /><span class="inside">aren't you always</span><span class="hide"> - </span><span class="timeGet">17:41</span></p>

I've also added the bubble for chat changes, that works for time, group name, and people leaving the chat:

On the css work skin you add:

#workskin .subject {
  text-align: center;
  font-size: 12px;
  display: inline-block;
  white-space: nowrap;
  border-radius: 5px;
  width: min-content;
  background: #e1f5fe;
  border-top: 0.5px solid #f2f2f2;
  border-left: 0.5px solid #f2f2f2;
  box-shadow: 1px 1px 0 #b3b3b3;
  padding: 4px 5px 5px 8px;
  margin-bottom: -8px;
  margin-top: -8px;
}

And on the hmtl side it looks like this:

<center>
<p class="subject">TODAY</p>
<p class="subject">Merlin changed the subject to "Dollophead"</p>
<p class="subject">Arthur left</p>
</center>