Archive of Our Own ^beta

Chapter Text

This is a tutorial for how I did the “in-person” chat/skits in tired quaranteens (ch 3 onwards) 

I started out by using this fire emblem skit tutorial but i had a few extra use cases that this skin didn’t cover: 

1. I wanted this to be centered on the page
2. I wanted this to be mobile friendly 
3. I wanted background images
4. I wanted to have the icons on both left and right (instead of just the left side) 
5. Thought bubbles 

Lets cover each of these cases. 

#1 & #2 are easy. Add a parent div, enforce a min and max width, and center the div on the page.

<div class="convo-container">
     &nbsp;&nbsp;&nbsp;&nbsp;
     <!-- filler space to see the parent div -->
</div>

Bg color green is just to see the div, 
I cant remember why i did max-width 416 px on convo-container,... you can probably change that to your liking. 

I always set min width around 300px , which covers the width of most mobile. most tablets are about 600px wide , so setting a max-width of 400-500 ish will give a consistent feel on tablets and desktop, while feeling less cramped than the mobile view

Lets do #4 now 
The fire emblem tutorial already has the dialogue box pointed to the left. Lets add that template
(ive made edits to the css and class names here)

<div class="convo-container">
      <div class="convo-left">      
            <p><img class="convo-icon" src="https://i.imgur.com/3EsrGVC.png" height="auto" /> </p>
            <p><span class="dia white">Lorem Ipsum</span> </p>
      </div>
</div>


Okay, neat. 

Now lets add more dialogue


<div class="convo-container">
    <div class="convo-left">
        <p><img class="convo-icon" src="https://i.imgur.com/3EsrGVC.png" height="auto" /> </p> 
        <p><span class="dia white">Lorem Ipsum</span> </p>
    </div>

    <div class="convo-left">
        <p><img class="convo-icon" src="https://i.imgur.com/3EsrGVC.png" height="auto" /> </p> 
        <p><span class="dia white">I'm going ghost! </span> </p>
    </div>
</div>

Oh no what happened? (on desktop -- its fine on mobile)

It’s a bug feature i totally did that on purpose

Notice the “convo-left” class

.convo-left {
     min-height : 80px ; 
     float : left ;
     display : flex ;
}

This is a weird symptom of working with flex boxes, which ao3… partially supports, but not completely. Luckily, theres a work around, thanks to “convo-break” class.

p.convo-break { 
  display : flex ; 
  width : 100% ;  
  margin : 0 ;
}


so then 

<div class="convo-container">
    <div class="convo-left">
        <p><img class="convo-icon" src="https://i.imgur.com/3EsrGVC.png" height="auto" /> </p>  
        <p><span class="dia white">Lorem Ipsum</span> </p>
    </div>
    <p class="convo-break">&nbsp;</p>
    <div class="convo-left">
        <p><img class="convo-icon" src="https://i.imgur.com/3EsrGVC.png" height="auto" /> </p>  
        <p><span class="dia white">I'm going ghost! </span> </p>
    </div>
    <p class="convo-break">&nbsp;</p>
</div>

Okay, much better.

I would advise you to put <p class="convo-break">&nbsp;</p> in between every “convo” block, so that no matter how wide your “convo-container” is, you wont get weird bugs. 

Maybe this is why i did max-width 416px on the “convo-container” class in my own css – i should go back and add  <p class="convo-break">&nbsp;</p>to my own work… 

BUT if you choose to omit  <p class="convo-break">&nbsp;</p> , you can get some interesting effects


<div class="convo-container">
    <div class="convo-left">
        <p><img class="convo-icon"src="https://i.imgur.com/KvnoasT.png"width="100%"height="auto"></p>
        <p><span class="dia white">Hey Can I -</span></p>
    </div>
    <div class="convo-right">
        <p><span class="dia white">No.</span></p>
        <p><img class="convo-icon"src="https://i.imgur.com/jWRyP6Y.png"height="auto"></p>
    </div>
    <p class="convo-break">&nbsp;</p>
    <div class="convo-left">
        <p><img class="convo-icon"src="https://i.imgur.com/rm6ZV8P.gif"width="100%"height="auto"></p>
        <p><span class="dia white">But I didn't even -</span></p>
    </div>
</div>

This is why i said to mess w the “convo-container” size to your liking. It expands only when you have larger lines of text

<div class="convo-container">
     <div class="convo-left">
            <p><img class="convo-icon" src="https://i.imgur.com/KvnoasT.png" width="100%" height="auto"> </p>
            <p><span class="dia white">Hey Can I -</span> </p>
     </div>
     <div class="convo-right">
           <p><span class="dia white">No.</span></p>
           <p><img class="convo-icon" src="https://i.imgur.com/jWRyP6Y.png" height="auto"> </p>
     </div>
     <p class="convo-break">&nbsp;</p>
     <div class="convo-left">
          <p><img class="convo-icon" src="https://i.imgur.com/rm6ZV8P.gif" width="100%" height="auto"> </p>
          <p><span class="dia white">But I didn't even -</span> </p>
     </div>
     <p class="convo-break">&nbsp;</p>
     <div class="convo-left">
         <p><img class="convo-icon" src="https://i.imgur.com/KvnoasT.png" width="100%" height="auto"> </p>
         <p><span class="dia white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> </p>
        </div>
</div>

Oh yeah, before i forget, heres how to add the convo from the right side

Lets do #5 now – thought bubbles! 

Luckily this is super easy.

Use “dia-thinking thinking-small” (2 css classes) instead of “dia” class, and you’re good to go

<div class="convo-container">
     <div class="convo-left">
         <p><img class="convo-icon"src="https://i.imgur.com/NJVbWtF.png"height="auto"></p>
         <p><span class="dia-thinking thinking-small white"> (Lorem ipsum, but now no one can hear me.)</span></p
     </div>
     <p class="convo-break">&nbsp;</p>
     <div class="convo-left">
         <p><img class="convo-icon"src="https://i.imgur.com/8ZlDMMv.png"height="auto"></p>
         <p><span class="dia-thinking thinking-small white"> (Unless they're a mind reader)</span></p>
     </div>
     <p class="convo-break">&nbsp;</p>
     <div class="convo-right">
         <p><span class="dia-thinking thinking-small white">yes I can read your thoughts</span></p>
         <p><img class="convo-icon"src="https://i.imgur.com/0TDqcrx.png"width="100%"height="auto"/></p>
     </div>
</div>

My fic only used the thought bubbles when the speaker was on the left side, but it should work for both directions, as shown in the demo above. 

Alright, finally, lets do #3 - background images. 

Here’s the relevant css

p.convo-pad {
    display: flex;
    width: 100%;
    margin: 24em auto;
}

.gz {  
    background: url("https://i.imgur.com/ig6AvJU.png") no-repeat center center fixed;
    background-size: cover;
}

.gz2 {
    background: url("https://i.imgur.com/Ys1XcUY.png") repeat center center scroll;
    background-size: contain;
    background-attachment: fixed;
}

these 2 background images are sliiightly different. lets add both to “convo-container” and see if we can find the difference (beyond the fact that the img src is different)

<div class="convo-container gz">
    <div class="convo-left">
        <p><img class="convo-icon"src="https://i.imgur.com/3EsrGVC.png"height="auto"/></p>
        <p><span class="dia white">I'm going ghost! </span></p>
    </div>
    <p class="convo-pad">&nbsp;</p>
</div>

<div class="convo-container gz2"
    <div class="convo-left">
        <p><img class="convo-icon"src="https://i.imgur.com/3EsrGVC.png"height="auto"/></p>
        <p><span class="dia white">I'm going ghost! </span></p>
    </div>
    <p class="convo-pad">&nbsp;</p>
</div>

if you're viewing this on desktop, you wont notice a difference. if you're viewing this on ipad / ios... hahah you'll notice a difference. 

Ive noticed very weird behavior with background images on ios vs android devices. 

On android , and most desktop browsers , you get this VERY COOL SCROLLY effect with background-attachment fixed. On ipad / ios, you get… zoomed in blurry pixels. 

Preview of “convo-container gz” from ipad: 

Preview of “convo-container gz” from desktop:

Preview of “convo-container gz2” from ipad

Preview “convo-container gz2” from desktop 

“convo-container gz2” looks better on ios – it gives you context of what the image is supposed to look like, but it wont do the cool parallaxy scroll effect. It will fall back to tiling the image repeatedly in the bg – this can look wonky depending on which bg image you have (size / how well it tesselates, etc)

Another example (from tired quaranteens ch5):

ipad

desktop

So use “gz2” as the template for backgrounds on convo-container, for max cross platform support. 

Since this is generic and non specific to any particular fandom, you can use talk sprites from any video game for your skits in fics. You’re not limited to using png/jpegs for talk sprites, you can use gifs too. 

It’s not too hard to add name tags either – here’s a wip for a fandom specific skin

<div class="crk-convo-container cookie-kingdom-2">
    <p class="crk-convo crk-convo-left convo-1">
        <span class="nametag">Strawberry Crepe Cookie</span>
        <span class="crk-dia"> I've been obsessively playing gacha games for the past 6 months and I spent money on in app purchases!! </span>
        <img class="crk-convo-icon" src="https://cdn.discordapp.com/attachments/938616134150782996/1058890825146302594/Cookie0518-smile.gif" height="auto" />  
        <a href="#convo-2" class="arrow arrow-right">
            <img src="https://i.imgur.com/8i7fVhW.png" />
        </a>
    </p>
    <p class="crk-convo crk-convo-right crk-convo-2">
        <span class="nametag">GingerBrave Cookie</span>
        <span class="crk-dia">Yeah same. </span>
        <img class="crk-convo-icon" src="https://i.imgur.com/TT7vhoI.png" height="auto" />  
        <a href="#convo-1" class="arrow arrow-left">
            <img src="https://i.imgur.com/b9UGxIa.png" />
        </a>
        <a href="#convo-3" class="arrow arrow-right">
            <img src="https://i.imgur.com/8i7fVhW.png" />
        </a>
    </p>
</div>

It’s worth noting that a fic using this skin would be practically unreadable with creators style off , or if the fic was downloaded offline. Since ao3 enables creators style by default, it’s not a huge problem

But. 

It IS possible to make this particular skin download friendly.

here is the relevant css dump from the last chapter

.hide {
   display: none;
}

.bg-convo-icon {
   width: 80px;
   height: 80px;
   background-size: contain;
   background-repeat: no-repeat;
   padding-right: 10px;
}

.bg-flex-p {
   display: flex;
}

.bg-dia-span {
   display: block;
   margin: auto;
}

.danny-1 {
   background-image: url(https://i.imgur.com/3EsrGVC.png);
}

And view the following html in a browser


<div class="convo-container gz2">
    <div class="convo-left">
        <p class="bg-flex-p">
           <span class="bg-convo-icon danny-1"><b class="hide">Danny:</b></span>
           <span class="dia white bg-dia-span">I'm going ghost! </span>
        </p>
    </div>
</div>

It looks indistinguishable from the base case

But turn off the creators style with this new html template, and you’ll see:

Danny: I'm going ghost!

nice!

(try it out by turning off the creators style and popping down to here w ctrl+f haha)

Now this begs the question: “Should I make my whole fic download friendly?”

That depends on your fic. 

You’d have to make every “convo-icon” into a background image, for one. you'd have to write a lot of css (well its good practice to learn coding)

If you’re writing an html heavy / social media fic , there’s probably no need to account for the edge case of ppl downloading your fic for offline reading. Most likely you’ll have many templates, and to edit each one to be offline friendly is possibly… a lot of work with very little pay off. 

Making my quarantine fic offline friendly (via ao3s download options) falls under this category. (I AM exploring other options for offline readability for that fic, but that’s research for another day) 

BUT if you’re writing fic with mostly traditional prose sprinkled with fancy html templates, taking the time to make your html templates offline friendly is not a bad idea (example: ghost and the flash ch 7 and ch 8 , compare w creators style on and off) 

Anyway, this whole tutorial reminded me of how many of my fics use html as an extra cherry on top and could benefit from editing for offline format.

General coding tips:

• Use a code editor. Pls. dont use ao3s inbuilt text editor, you will go crazy. I'm going crazy just formatting all the code and previews here
  • vs code has really neat multi line editing that can speed up your coding time. 
• Ao3 has a habit of inserting <p> tags inbetween divs / random intervals. I have mostly accounted for this behavior in this tutorial, but if you ever see something from this tutorial not match up to something you try on ao3, its entirely possible a rogue <p> tag was added where it wasnt supposed to be. You can find this out by doing ctrl+i and inspecting the html. ao3s html parser is finicky
  • the html parser is my immortal enemy. be sure all your tags are closed.  
  • right click on any webpage and click "inspect" to view the html structure of a page (go to elements tab). indispensable debugging tool
• To figure out how your html page / template will look on mobile, add
  <meta name="viewport" content="width=device-width, initial-scale=1"> to your local html file, and squish the browser window. helps debug mobile related issues a lot
• Spacing / line height / font might be different when you view your html file locally vs on ao3 draft. Ive mitigated this by adding font-family and font-size to most everything.

Lastly If you used this for any fic you wrote, pls drop your fic links! Id love to read them! (and check out my other fics which have html pls n ty ✌️)