jockles.com

Thanks to La_Temperanza, whose How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) the translations are built on. Copied and adapted from it: swapping the text on hover or tap, the brackets for readers with Creator's Style off, and the link that makes tapping work on phones.

2.1 Chapter Contents

Everything in this chapter lives in the core CSS - the bit of the skin that every module needs - so you get all of it whichever modules you've picked. It all works in Discord too, apart from the typing line.

• The chat container, and the anatomy of a module: the container and its platform and theme classes
• Accessibility: hide, alt text and video descriptions (vid-desc), for screen readers and for readers with the workskin switched off
• Container settings
  • Phone or full width (wide - Discord is wide by default, and uses narrow for phone width instead)
  • Scrolling for long chats (no-scroll to switch it off)
  • Light, dark and auto themes
• Cross-platform profiles (pfp-), and pov- for a character's phone
• Pictures and formatting: pictures, and cropping them to fit boxes and circles (land)
• Links that go nowhere (fake-link)
• Hover and tap translations, and hidden easter eggs (egg), which also work in ordinary text outside a chat
• The typing line (typing) - not in Discord
• Deleted or corrected text (del)
• Putting it together: a chat using both

2.2 The Chat Container, and the anatomy of a Module.

The first step for every chat is to create a container for it:

<div class="mob imsg theme-auto">
</div>

This container has three classes, and each one has a job:

• mob sets the phone-sized width and the base text styling. Every chat container except Discord has it.
• imsg is the platform class. It decides which app the chat looks like. Here it makes an iMessage chat. It can only talk to the css in the iMessage module.
• theme-auto is the theme class. It makes the chat light or dark to match the reader's device. Fixing a Chat to Light or Dark, further down this chapter, explains how to lock a chat to light or dark instead.

2.2.1 Platform Classes/Modules

To change which app the chat looks like, swap the platform class. Here is the full list:

• imsg: iMessage
• wa: WhatsApp
• tw: a Twitter/X post, and tw-reply: a reply stacked under it
• twdm: Twitter/X direct messages
• ig: an Instagram post, and igdm: Instagram direct messages
• tb: a Tumblr post
• gm: a Gmail email, or a whole email thread
• mail: a generic email window
• dc: Discord

On a wide screen every chat except Discord is held to the width of a phone, and on a small screen it fills the width of the screen.

2.3 Accessibility

This section explains every part of the workskin that's there for accessibility, but you don't need to add any of it yourself to get started - every example in this tutorial already has all of it built in, so if you copy them as they are, you're covered. It's here so you know what each bit does, and what to keep when you write your own.

<p class="msg in"><span class="hide"><em>Jane:</em> </span>I heard you were working</p>
<p class="msg out"><span class="hide"><em>Ilya:</em> </span>always working I do not rest</p>

<p class="msg out pic"><span class="hide"><em>Ilya:</em> </span><img src="https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg" alt="Black and white cat holding out a paw daintily, on a beige and green cat tree. The cat looks to be stepping into the frame from the left"></p>

<div class="tw-media video"><iframe src="https://player.vimeo.com/video/1169167060?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" title="Ilya Rozanov | Come Home"></iframe><p class="vid-desc">[Video: a tribute edit of Ilya Rozanov, made from Heated Rivalry footage and set to "Would You Come Home" by Tyler Blackburn]</p></div>

2.4 Container Settings

These change the chat box itself: how wide it is, whether it scrolls, and whether it's light or dark.

2.4.1 Phone Width or Full Width

Every chat is built to be the width of a phone, and I recommend leaving it that way. That's the size all of the designs are made for (except Discord, which is designed wide), so the layouts look their best at it. Anything that doesn't contain large images should scale wider just fine, but I've not optimised anything to work wide so you can use it at your own risk. This is mostly for anyone that wants full width texting-type chats for themselves. There is no desktop version of any of the apps in this, though I'd be open to adding them.

If you'd prefer a chat to fill the page, add the class wide to its container. It's available on every chat, and should resize cleanly to any page width:

<div class="mob imsg theme-auto wide">
</div>

The same class works on a tw-thread and a tb-feed. Here's the same chat both ways:

Discord goes the other way: it's wide to begin with, and you can add narrow to give it the width of a phone:

The discord container more easily resizes to be small on smaller screens, so the narrow skin is more for if you want it to look intentionally like a phone screen on desktop.

<div class="dc theme-auto narrow">
</div>

Here's the same Discord chat both ways:

Each chat container's size is separate, so you can mix phone-width and full-width chats in one fic if that takes your fancy.

2.4.2 Scrolling Long Chats

Every chat, Discord included, stops growing at about the height of a phone screen. A short chat won't notice. A long one gets a slim scroll bar instead, so one long conversation doesn't take over the whole page.

• iMessage, WhatsApp, Twitter/X DMs and Instagram DMs keep the header and the bottom bar where they are, and scroll the messages in between.
• Twitter/X posts, Instagram posts, Tumblr posts and Gmail emails scroll as a whole.
• Discord stays wide, and the whole window scrolls, header and message box included.

There's nothing to add - it just happens. Here's an iMessage chat with thirty messages in it:

To switch scrolling off for one chat, so it grows as tall as it needs to, add no-scroll to the container:

<div class="mob imsg theme-auto no-scroll">
  [a very long chat goes here]
</div>

2.4.3 Light, dark and auto themes

Every chat in this tutorial uses theme-auto. It shows the chat in light colours, and switches to dark colours if the reader's phone or browser is set to dark mode. That way everyone gets the version that suits them, and you don't have to do anything extra.

FWIW: AO3 doesn't let a workskin see which AO3 site skin the reader is using, so theme-auto goes by the light or dark setting on their device or browser instead.

2.4.3.1 Fixing a Chat to Light or Dark

Sometimes you'll want a chat to look the same for everyone - a 3am text conversation on a phone that's always in dark mode, for example, or a chat that should always be light. To do that, swap theme-auto in the container for one of these:

• theme-auto: follows the reader.
• theme-light: always light, whatever the reader uses.
• theme-dark: always dark, whatever the reader uses.

It's the same single word on the container for every module, Discord included.

<div class="mob imsg theme-dark">
  <p class="mob-head">Shane<span class="hide"> - </span><span>iMessage (always dark)</span></p>
  <div class="mob-body">
    <p class="msg in"><span class="hide"><em>Shane:</em> </span>this chat is always dark</p>
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span>even if the reader uses light mode</p>
  </div>
</div>

<div class="mob imsg theme-light">
  <p class="mob-head">Shane<span class="hide"> - </span><span>iMessage (always light)</span></p>
  <div class="mob-body">
    <p class="msg in"><span class="hide"><em>Shane:</em> </span>this chat is always light</p>
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span>even if the reader uses dark mode</p>
  </div>
</div>

<div class="mob wa theme-dark">
  <p class="mob-head">Mom<span class="hide"> - </span><span>online</span></p>
  <div class="mob-body">
    <div class="msg in"><p><span class="hide"><em>Mom:</em> </span>Are you coming Sunday?</p><p class="wa-time">10:02</p></div>
    <div class="msg out"><p><span class="hide"><em>Shane:</em> </span>After skate on saturday</p><p class="wa-time">10:03 <span class="wa-read">✓✓</span></p></div>
  </div>
</div>

<div class="mob tw theme-dark">
  <p class="tw-top"><span class="tw-name">Holster</span> <span class="tw-handle">@HolsterInLaw · 2h</span></p>
  <p class="tw-text">I need everyone to get really cool about a lot of stuff really fast</p>
  <p class="tw-stats"><b>1</b> Reposts &nbsp; <b>12</b> Likes</p>
</div>
<div class="mob tw-reply theme-dark">
  <p><span class="tw-name">Zim</span> <span class="tw-handle">@ZimBits · 1h</span></p>
  <p>WHAT DID YOU DO??</p>
</div>

<div class="mob twdm theme-dark">
  <p class="mob-head">Shane Hollander<span class="hide"> - </span><span>@shanehollanderhockeyplayer</span></p>
  <div class="mob-body">
    <p class="msg in"><span class="hide"><em>Shane Hollander:</em> </span>saw your tweet</p>
    <p class="msg out"><span class="hide"><em>Ilya Roz:</em> </span>You hate the dog? why don't you like the dog?</p>
  </div>
</div>

<div class="mob ig theme-dark">
  <p class="ig-top">ilya.r<span class="hide"> - </span><span>Ottawa, Ontario</span></p>
  <p class="ig-photo">[A photo of a small dog, Anya, in a Christmas sweater.]</p>
  <p class="ig-likes">2,431 likes</p>
  <p class="ig-caption"><b>ilya.r</b> my child is cuter than you</p>
  <p class="ig-time">3 hours ago</p>
</div>

<div class="mob igdm theme-dark">
  <p class="mob-head">ilya.r<span class="hide"> - </span><span>Active now</span></p>
  <div class="mob-body">
    <p class="msg in"><span class="hide"><em>ilya.r:</em> </span>stop being beautiful where other people can see you</p>
    <p class="msg out"><span class="hide"><em>Jane:</em> </span>Ilya the team decide the pictures not me</p>
  </div>
</div>

<div class="mob tb theme-dark">
  <p class="tb-header">
    <span class="tb-pfp rb colour4">PL</span>
    <span class="tb-menu">&#8226;&#8226;&#8226;</span>
    <span class="tb-name"><b>puckontheline</b>
      <span class="tb-subline">Reblogged <b>metrosstan</b> &middot; 2h ago</span></span>
  </p>
  <div class="tb-body"><p>I need to start a rumour.</p></div>
  <p class="tb-tags">#hockey rpf</p>
</div>

<div class="dc theme-dark">
  <div class="dc-header hashtag">
    <h3><span class="hide"># </span>general</h3>
  </div>
  <div class="dc-message">
    <p>
      <b class="dc-name colour1">Mark | Brother-in-law-Elect</b>
      <span class="dc-time">10/01/2022</span>
    </p>
    <p><span class="dc-text">Jackie, you there?</span></p>
  </div>
  <div class="dc-input">
    <p><span class="dc-input-text">Message #general</span></p>
  </div>
</div>

2.5 Cross-Platform Profiles

2.5.1 Profile Pictures

Most of the modules have round profile pictures next to people's names. There are three ways to fill one:

1. Initials. Type them inside the circle, and add colour1 to colour10 for a colour.
2. A picture. Put a picture tag, with alt text, inside a pfp span. Each module chapter shows you how.
3. A profile. Set a character's picture once in the core CSS, and use it in every app. I'd recommend this for anyone who turns up in more than one chat.

iMessage, Twitter/X DMs and Instagram DMs don't show profile pictures.

2.5.2 Character Profiles

A profile is one character's online identity - their picture, name, handle and email address - set once in the core CSS. You can use it in any chat, in any app, and if something changes, like a new picture or a new handle, you change it in one place and it changes everywhere.

Here's Stan's. It's the simplest profile in this tutorial, and it's all most characters need:

/* PROFILE: Stan */
#workskin .pfp.pfp-stan { background-color: #c06a1f; }
#workskin .wa .who.pfp-stan, #workskin .dc .username.pfp-stan { color: #d2782a; }
#workskin .name.pfp-stan::before { content: "Stan"; }
#workskin .handle.pfp-stan::after { content: "PuckStan"; }
#workskin .email.pfp-stan::after { content: "Puckstan@gmail.com"; }

To make your own, copy Stan's block, change stan to your character's name everywhere in it, and fill in their details. Don't need a line? Delete it. For a picture instead of a coloured circle, swap the colour for background-image: url(LINK);, using a link that ends in .jpg or .png - AO3 is fussy about picture links in CSS.

The core CSS comes with all the profiles from this tutorial's examples - Stan, Yuna, Zim, Holster, Rose, Shane and Ilya - plus Luca, who uses every option there is, with a note on each line. Rename them, change them or delete them.

2.5.3 Using a Profile

In your HTML, add the profile name wherever that character turns up:

• Picture: <span class="pfp pfp-stan"></span>, inside any profile circle.
• Name: <span class="name pfp-stan"></span>
• Handle: <span class="handle pfp-stan"></span>
• Email: <span class="email pfp-stan"></span>
• Name colour: add pfp-stan to a WhatsApp who line or a Discord dc-name.

Each one shows what's in the profile for whichever app it's in. Here's Stan in every app he's on (he's not on Tumblr), all from the one profile:

<p class="wa-pfp"><span class="pfp pfp-stan"></span></p>
<p class="who pfp-stan">Stan<span class="hide">:</span></p>

<span class="tw-pfp"><span class="pfp pfp-stan"></span></span>
<span class="tw-handle"><span class="handle pfp-stan"><span class="hide">@PuckStan</span></span> · 2h</span>

<span class="ig-pfp"><span class="pfp pfp-stan"></span></span>
<span class="handle pfp-stan"><span class="hide">PuckStan</span></span>

<span class="gm-pfp"><span class="pfp pfp-stan"></span></span>
<span class="gm-address">&lt;<span class="email pfp-stan"><span class="hide">Puckstan@gmail.com</span></span>&gt;</span>

<b class="dc-name pfp-stan"><span class="dc-pfp"><span class="pfp pfp-stan"></span></span>Stan</b>

Names, handles and email addresses from a profile come from the CSS, so readers with the workskin switched off won't see them. That's why the examples have a hidden copy typed inside each one - there's more on that in Accessibility, above.

2.5.4 Their Phone

When a chat is on one character's phone, add pov- and their profile name to the chat's container, like pov-shane. In WhatsApp, the chat gets their wallpaper, and in every app, people show up under whatever that character has them saved as. Here's the same chat on Shane's phone, where Ilya is saved as Lily, and on Ilya's, where Shane is Jane:

On Shane's phone:

On Ilya's phone:

<div class="mob wa theme-light pov-shane">
  <p class="mob-head"><span class="name pfp-ilya"><span class="hide">Lily</span></span><span class="hide"> - </span><span>online</span></p>

<div class="mob wa theme-dark pov-ilya">
  <p class="mob-head"><span class="name pfp-shane"><span class="hide">Jane</span></span><span class="hide"> - </span><span>online</span></p>

A profile can't pick a theme for you, so choose one for each character's phone and stick with it - Shane's is theme-light and Ilya's is theme-dark. With the wallpaper and the theme, readers can tell whose phone it is before they've read a word.

2.6 Pictures and Formatting

2.6.1 Pictures and Alt Text

Wherever a chat can show a picture (iMessage and DM pictures, tweet pictures, Instagram photos and profile pictures, Discord images), you add it with a normal picture tag. The picture has to be hosted somewhere else, and its link goes in src. Squidge.org is a great hosting platform that also lets you upload explicit images, and AO3 has a guide to some image hosting sites if you want more options.

AO3 Help - Embed Images

Every picture needs alt text too - a short description for screen readers, which goes in alt. It's all explained in Alt Text, in the Accessibility section above, along with Video Descriptions for videos. Every example with a picture already has its alt text, so you can just swap in your own link and description.

2.6.2 Pictures in Boxes and Circles

Some pictures are cropped to fit a box or a circle: the photo galleries in WhatsApp and Twitter/X, and profile pictures everywhere. AO3 can't crop pictures automatically, so the skin needs extra guidance if you're using a landscape picture:

• A picture that is taller than wide, or square needs nothing. It's made as wide as the box, and the extra top and bottom is cropped away evenly. (In profile pictures the top of the photo is kept, so faces don't get cut off.)
• A picture that is wider than tall needs class="land" on the picture tag. It's made as tall as the box, and the extra sides are cropped away evenly.

Here's a WhatsApp four-photo gallery with two landscape cat pictures in it (top left and bottom left), first without land and then with it, followed by the code:

Without land:

With land on the two landscape pictures:

<div class="msg out gallery"><p class="hide"><em>Yuna:</em></p>
  <p class="wa-photos four">
    <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/694221426fb8229480fb3fb87b528ca7/ba033a52c8982cb0-01/s1280x1920/636653581e07a970475075f480c1717b23a72c0a.jpg" alt="Black and white cat staring through a gap between a screen and a desk, with blurred cables hanging down around and blue sky behind"></span>
    <span class="wa-photo"><img src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span>
    <span class="wa-photo"><img class="land" src="https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg" alt="Black and white cat holding out a paw daintily, on a beige and green cat tree. The cat looks to be stepping into the frame from the left"></span>
    <span class="wa-photo"><img src="https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg" alt="Black and white cat sitting in an opened red suitcase, carry on size, on the floor behind a white door, and on a red patterned rug"></span>
  </p>
  <p class="wa-time">12:26 <span class="wa-read">✓✓</span></p>
</div>

It works the same way for profile pictures. Jane's and Lily's pictures are both landscape, so here they are first without land and then with it, followed by the code for one of them:

Without land:

With land:

<p class="wa-pfp colour3"><span class="pfp"><img class="land" src="https://www.shutterstock.com/shutterstock/photos/1100283806/display_1500/stock-photo-beautiful-lavender-flower-in-the-dalat-flower-park-selective-focus-1100283806.jpg" alt="Profile picture of Jane, a lavender flower"></span></p>

If you forget land, nothing is squashed or stretched, but a wide picture won't fill its box, so a strip of the box's colour shows above and below it. The tall boxes in two-photo and three-photo galleries always crop the sides, so they never need land.

2.7 Links That Go Nowhere

Chats are full of links, but most of the time you don't want a real one - it could take the reader away from your fic, or point at a page that doesn't exist. For a link that looks clickable but doesn't go anywhere, put the address in a span with fake-link. It's coloured like a link in whichever app the chat is (and underlined too, apart from in Discord, which doesn't underline its links), so it works in every chat, Discord included:

<p class="msg in"><span class="hide"><em>Jane:</em> </span>have you seen <span class="fake-link">hockeynews.example/overtime-goal</span></p>

Make up any address you like, since it's only text. A real link written with <a href="..."> inside a chat gets the same look, so use that if you do want it to go somewhere.

Works in every module except Discord

These two are for any chat built on the mob container, which is every module apart from Discord. Discord is its own kind of window, so these don't apply there.

2.8 Hover and Tap Translations

If your characters switch languages every now and then, you can show the original words with the translation tucked away behind them. The reader sees the original with a dotted line under it, and when they hover over it on a computer, or tap it on a phone, the translation swaps in. It works in ordinary text as well as inside every chat and post in the skin, and the words take on the colour of whatever they're sitting in (dark mode included), so they never get mixed up with a chat link:

<a class="tl" href="#t1"><span class="orig">Diolch yn fawr</span><span class="tltn"><span class="hide"> (</span>Thank you very much<span class="hide">)</span></span></a>

The important bit is the opening tag: <a class="tl" href="#t1">.

• tl is what makes the link a translation.
• Every translation you make needs its own number in the href. Just count up after the t - #t1, #t2, #t3 and so on - and it'll work. Keep the numbers going across the whole fic rather than starting again each chapter, because readers can choose to see every chapter on one page.
• The link is what makes the words tappable on a phone, and the # means the page doesn't jump anywhere when someone taps it.

What the rest does:

• orig is the text the reader sees first.
• tltn is the translation, shown on hover or tap.
• The two hide spans add " (" and ")", but only when Creator's Style is off, so readers see "Diolch yn fawr (Thank you very much)" instead of the two run together.

Keep the whole thing on one line of code, like above, because a line break inside it can leave a gap in the middle of your sentence. Here it is in a sentence - hover over or tap the dotted words:

"Diolch yn fawr (Thank you very much)," he said.

The finished chat looks like this, and here is the full HTML:

<p>"<a class="tl" href="#t1"><span class="orig">Diolch yn fawr</span><span class="tltn"><span class="hide"> (</span>Thank you very much<span class="hide">)</span></span></a>," he said.</p>

In a chat, you just put it in the message text like any other words, with the next number along. This one is in an iMessage, and the next one is in a tweet:

The finished chat looks like this, and here is the full HTML:

<div class="mob imsg theme-auto">
  <p class="mob-head">Howell<span class="hide"> - </span><span>iMessage</span></p>
  <div class="mob-body">
    <p class="msg in"><span class="hide"><em>Howell:</em> </span>rough day?</p>
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span>the worst</p>
    <p class="msg in"><span class="hide"><em>Howell:</em> </span>come here, you need a <a class="tl" href="#t2"><span class="orig">cwtch</span><span class="tltn"><span class="hide"> (</span>hug<span class="hide">)</span></span></a></p>
  </div>
</div>

The finished chat looks like this, and here is the full HTML:

<div class="mob tw theme-auto">
  <p class="tw-top"><span class="tw-name">Ilya Rozanov</span> <span class="tw-handle">@irozanov · 7m</span></p>
  <p class="tw-text"><a class="tl" href="#t3"><span class="orig">Bore da</span><span class="tltn"><span class="hide"> (</span>Good morning<span class="hide">)</span></span></a>! I am learning Welsh now. Do not ask why.</p>
</div>

A few things worth knowing:

• A translation can have formatting inside it, like <em> for italics, because it's just ordinary HTML.
• A chat bubble or box will grow or shrink a little to fit the translation when it swaps in. That's normal.
• I'd recommend a line in your author's note telling readers they can hover over or tap the dotted words, so they know to try.

2.8.1 Hidden Text and Easter Eggs

A translation doesn't actually have to be a translation. The text that swaps in can be anything at all, so the same trick works for hidden text and easter eggs - a character's private thought, a joke, a hint about a later chapter, or a clue for anyone who goes looking. Put the visible words in orig and the surprise in tltn.

If you want it properly hidden, so nobody knows it's there until they stumble on it, add egg to the class: <a class="tl egg" href="#t4">. It works exactly like a translation (with its own number, the same as any other), but there's no dotted line, so the words take on everything about the text around them - the colour, bold, italics, the colour of a chat bubble - and look like ordinary text until someone hovers over or taps them. It works in every module. Hover over or tap the word "fine":

<p class="msg out"><span class="hide"><em>Ilya:</em> </span>I'm <a class="tl egg" href="#t4"><span class="orig">fine</span><span class="tltn"><span class="hide"> (</span>not fine. not even a little bit<span class="hide">)</span></span></a></p>

Readers with the workskin switched off still get the hidden text in brackets after the original, so nobody misses out completely. And if you'd like every translation in your fic to look like this, the core module's CSS chapter shows you the one line to delete instead.

2.9 Typing Line

To show that someone is typing, add a paragraph with typing at the end of the messages. It shows up as a small, slanted line of text:

<p class="typing">Scott is typing...</p>

2.10 Deleted or Corrected Text

To strike a message through, as if the sender deleted or corrected it, wrap the words in a span with the class del:

<p class="msg out"><span class="hide"><em>Ilya:</em> </span><span class="del">I'm fine</span></p>

2.11 Putting It Together

The finished chat looks like this, and here is the full HTML:

<div class="mob twdm theme-auto">
  <p class="mob-head">Scott<span class="hide"> - </span><span>@scotthunter</span></p>
  <div class="mob-body">
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span><span class="del">I'm fine</span></p>
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span>I'm not fine</p>
    <p class="typing">Scott is typing...</p>
  </div>
</div>

That's all of the HTML for the themes, translations and extras. The CSS behind them is the core of the workskin - the part every module needs - and the CSS chapter after this one explains how it all works.