Your dating sim was fucking incredible. Would you be willing to give a breakdown on how you made it?
(referring to the dating sim i wrote for the HTML Tryhard 2026 event)
ive been sitting on this while i struggled with the best way to answer/how much information to give, but ill just say whatever comes to mind and you/others can ask follow up questions if it's not clear enough.
to start, you need three pieces:
1) the main view
2) the coding logic to make things happen
3) the fanfic/script itself
we're going to be talking about the first two. (i'm also half answering other questions ive gotten about "how would i make my own similar fic" rather than precisely "how did you make this fic", but i hope this still answers your question)
1) the main view
you need to first make a view for your user/reader to interact with. this can be whatever you want, depending on what you're trying to do either you can mock up an existing view (like me with the hundred line) or if your media doesn't have a VN style, you can just make it up.
i don't know how much detail to go into here, but basically. everything is a box. some boxes hold text or images. some boxes hold more boxes. for any given mock-up using html/css, start off by deciding what boxes you need approximately where they should go and then making classes/placeholders for them, top to bottom.
here's a diagram of all the boxes in the dating sim fic:
there's a lot of extra shiny stuff on the end result that took ages of tweaking, but i coded the main structure of it in a single weekend. back then, it looked like this:
note things like: the sizes/placements are different, the text box is less fancy, takumi doesn't have a background image yet, the icons are simplistic placeholders. honestly i could have stayed with that format and it would have been fine.
you don't NEED a super fancy text box or a functioning clock. you don't NEED lore accurate icons. just get something vaguely working and go from there, you can decide to be unwell about it later if you want but only AFTER you've got the base down. you NEED: character A, character B, name boxes, a text box, and maybe a background image. you just need to get the point across.
my advice is to not get bogged down by small details until after you have a functioning proof of concept to work with.
the code for the above looks something like:
<div class="main-box">
<div class="location-box"></div>
<div class="clock-box"></div>
<div class="character-box"></div>
<div class="takumi-box"></div>
<div class="text-box">
<div class="character-name-box">Yugamu</div>
<div class="takumi-name-box">Takumi</div>
<div class="text">
H-hey, Yugamu. Actually, I… had something I wanted to talk to you about.
</div>
</div> //end of text-box
</div> //end of main-box
extremely unsure if that's helpful at all.
the various elements are held together mostly with string and superglue, but they rely on a few different layout properties. primarily: relative/absolute positioning, and flexbox. there might also be a single float in there... im not proud.
"absolute" lets you put things anywhere you want and ignores all elements that might be in the way. the clock is absolute'd, takumi's box is absolute'd, etc. they're things in odd places (not top to bottom, left to right) and they stay there forever regardless of the things around them.
i think flexbox was mostly used in the text box area, it's honestly a blur at this point. but flexbox is great for aligning things that are variable in any way but you still need them to be in a specific place relative to those other things.
another thing to note is that any movement you see within the view is handled by transform (or transition), not by animations. ao3 doesn't allow the animation property, so you have to get tricky with transform or transition instead.
not sure if anyone noticed that the clock moves lol, but the clock moves. the second hand is a separate image laid on top of the main clock image (using absolute) and then when the user clicks on the first dialogue box the clock is told to start a rotation transform that lasts for... 166 hours. it originally used the "steps" timing function and it ticked like a proper clock, but ao3 doesn't allow steps :(( now it's just on whatever the default is (ease-in, i think?) and gets wonky if you leave it for too long. maybe some day ill figure out how to make that not happen, but it's pretty low on the list of my priorities.
(if you REALLY want to hear me lose my mind, ask about the polygon surrounding takumi. the clock was a fun silly challenge! the takumi polygon was out for my life and led to much late-night rage quitting. i think greenbean_paste was the one who helped me get a working prototype.)
2) the coding logic
there's a few different ways you can go about "making things happen" or "making things move" using only html and css, and none of them are what i'd call fun.
you can use :target as described by gifbot here, which can allow for rudimentary choices to be selected. you can do a similar thing and move to different chapters for each choice (i seriously considered this, especially when i thought the dating sim code might be getting too big for a single chapter). you can use :hover or :active to achieve different effects, and by messing with the transition-duration timing you can do some neat/hack-y stuff. there's several active/hover tricks in use within the dating sim fic, though most of them aren't vital, just window dressing.
the most modern way (and by modern i mean, ao3 added support semi-recently and it's expanded what's possible by a lot) and the way that the crux of the dating sim works, is details/summary.
a few things make details/summary really convenient: 1) built in functionality to show/hide things, meaning you don't have to do any transition hacking. 2) the ability to see if a details is [open] or not. most of the more recent super cool html fics you might see on ao3 are using details/summary and a bunch of horrible combinator logic to make everything happen.
(see: this insane mock up of windows 98 or this functional game with a squid.)
the logic in the dating sim is a lot of "is it takumi's turn to speak? show his name box and hide the other name box" and "did the user click the first dialogue? start the clock" and "did the user open the last line of dialogue in this scene? show the view for the next scene (and hide this current view)". it's a mess. would not recommend for your first, or even your second project. it all came together in the end but it did fully take me... many months and much help from my more insane html friends. i also REALLY wanted to get the character images to move like they do in the game, bouncing up and down or flashing etc. and tldr, it's possible! just insane. maybe next time.
anyway, hope anything i just said is at all parse-able by human minds unpoisoned by coding on ao3
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality
Anya is LIVE right now
FREE
Free to watch • No registration required • HD streaming
(A quick info dump on JS Bin and linking a workskin to a fic, for those of you new/aspiring to using HTML on AO3. If you've ever wanted to write fancy chat fics or CYOA fics, now's a great time to get started! Check out our annual HTML fic event if you're interested.)
JS Bin is an interactive tool that lets you code HTML/CSS in your browser. This is JS Bin:
(it auto loads in some stuff in the HTML tab, don't worry about it.)
Note the toggles on the top of the view: HTML, CSS, JavaScript, Console, Output. As an "AO3 coder", you care about HTML, CSS, and Output.
The HTML tab is the same as you would put into AO3:
The CSS tab is your "workskin" file on AO3.
So, why use something like JS Bin for coding your fanfiction, instead of writing directly into AO3?
Firstly, autosave. It autosaves!!!
Secondly, the Output tab. If you've ever coded directly on AO3, you know the pain of going back and forth and back and forth and then maybe accidentally hitting the post button instead of the preview button...
The Output tab will update in real time as you edit your HTML and CSS tabs.
The main downside to using a tool other than AO3 to write and test your code is that AO3 has some custom styling (and that there are some CSS classes that AO3 doesn't support). We strongly suggest checking your work periodically on AO3 to make sure your code is rendering as intended. But autosaving and a live refreshing output really are worth it, and can save you a ton of wasted time and tears.
When you go back to AO3, you put the CSS contents in a work skin:
(AO3 will auto add #workskin to every class, you don't have to do that.)
Open up a new fic, and make sure to link your workskin:
Then, your HTML tab contents from JS Bin go into the HTML Work Text box:
(you can leave out the <html> and the <body> tags from JS Bin, or you can leave them in. AO3 strips them out anyway.)
Then hit preview, and you're done.
JS Bin is definitely not the only option. If you're ready for a level-up, we suggest checking out VS Code. If you hate JS Bin, there's also CodePen. We talk about several of these tools in a previous post.
Hope this helps! Happy coding.
(This has been a PSA about not coding your fics on AO3. Save yourselves.)
PODFICCER (and fic author) RESOURCE: things i learned about HTML today
-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)
EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF
headings, blockquote, div
----
-----
html currently allowed by ao3 html sanitizer
a. abbr. acronym. address.
b. big. blockquote. br.
caption. center. cite. code. col. colgroup.
details. dd. del. dfn. div. dl. dt.
em. figcaption. figure.
h1. h2. h3. h4. h5. h6. hr.
i. img. ins.
kbd. li. ol.
p. pre. q. rp. rt. ruby.
s. samp. small. span. strike. strong. sub. summary. sup.
table. tbody. td. tfoot. th. thead. tr. tt.
u. ul. var.
-----
in-line (text) formatting tags supported by ao3
-----
OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!
-----
paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs
-----
omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!
I'm kind of a newbie at this, but I managed to mash together a workskin that I think would be interesting to share. I guess my question is, what do you think makes for a decent workskin guide/tutorial? Or do I just dump the code and trust people understand?
Also, thanks for running this event, defo a huge learning experience!
Even for long-time programmers, code written by someone else can be hard to follow. Guides of any kind can be helpful.
The key things to include are the CSS file and an example HTML usage of the code. Some tutorials put the HTML/CSS in a separate chapter (or each their own chapter), and some include the code and the tutorial in the same single chapter. Either way, a tutorial should explain to the reader what the skin does, and why they might want to use it. It's also useful to include what the code looks like when it's rendered, both so your reader knows if it's something they want for their own fic, and also so they know if it's rendering correctly on their end.
For the tutorial itself, it can be helpful for the reader if you walk them through the steps you'd take yourself, and explaining what pieces go where. This varies, depending on how complicated the code is, or how much editing the reader will need to do in order to use it. You might also want to mention easy pitfalls, or known bugs.
A general structure might be:
Explain what the skin is for, or what need it fills
Show what the skin looks like when it's complete
Provide the full CSS
Provide the full HTML, or example HTML usage
Walk through the steps of using the HTML
If the user needs to make edits, where do those edits go? What pieces can and can't they delete? What does the code absolutely need to function, and what can it live without?
Mention any known issues
This could issues you ran into while coding (especially if it's something the reader is likely to run into) or issues you know exist (maybe the layout breaks on Apple phones, or if a specific span element is given more than 20 words, it tries to open a portal to the demon realm)
Including comments in your code can also be really helpful for the next person who tries to use it. And if you have a specific way you'd like to be credited for your work, some authors will include that in their author's note.
One issue with writing HTML tutorials on AO3 is that any HTML code you put into AO3… will render as HTML. This is not helpful for tutorial purposes. One easy way to make HTML copy/paste-able is to use an HTML encoder. Here's the one from W3:
https://www.w3docs.com/tools/html-encoder/
Put your code in the box on the left, then hit the "Encode Entities" button and the box on the right will populate. Click "Copy", then you can paste directly into AO3.
(could you just use the rich text editor in AO3 and not worry about this? maybe. honestly forgot it existed until just now.)
This is how the HTML encoded text will render on AO3:
And that's it. Hope some of that was helpful. If you'd like some examples, here are some tutorials written by the mods/friends of the mods:
Texting tutorial in a single chapter with subsections
Fancy letter tutorial in a single chapter with subsections (and pretty colors!)
Character dialogue tutorial in multiple chapters (separate chapter for CSS)
Tabbing tutorial in a single chapter (with short but detailed author explanation)
They're varying degrees of complex and each use different structures to get their information across. Do whatever works for you! Any guide is better than no guide.
Do the characters in your works use Twitter? Would you like them to?
Are they posting thirst tweets? Long threads compiling information against a specific celebrity or politician? Are they regular people whose tweets accidentally go viral, or are they celebrities that people pay close attention to?
Either way, this tutorial by gadaursan makes it super easy to make tweets for your AO3 fanfictions! Gadaursan has also taken the time to make a code free html generator for any tweets you might want to embed into an AO3 fic!
The tutorial lets you embed images, show polls, and use quote retweets, all while explaining the HTML and CSS structure behind it all. Dark mode tweets are also available, if you prefer that!
Multiple AO3 users have created their own versions of twitter work skins, each with a slightly different look and feel; check them out!
[Ao3 Skin] Twitter with threads by oakleaf
Mimicking Twitter Posts for Fics - Some Twitter Workskins by Ultraviollett
Twitter Work Skin: Tweets & Profile (newest layout) by starskin
Twitter Work Skin Template by etc e tal (pe_pe_peperoncinocandy)
and so on!
These examples are just to show you how there are many different ways to convey the same information / achieve the same result. Hopefully it inspires you to incorporate twitter into your own fics!
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality
Anya is LIVE right now
FREE
Free to watch • No registration required • HD streaming
Texting is the backbone of all group chat fics. Why not style it with pretty HTML and CSS?
Adding text messages to an AO3 work is very easy, thanks to this simple tutorial by CodenameCarrot and La_Temperanza! (While you're at it, check out La_Temperanza's ao3 work skin tutorial series on AO3.)
"But coding is hard! I see all those <span> things and I get scared!"
What if I told you that there's a code free generator that writes the HTML and CSS for you, to embed into your fics on AO3?
"But how is that any different from using doctored images?" You say? "If I'm not coding it myself and I'm using an online website to make it for me, why not use an image?"
Let me hold you tenderly and tell you why.
Accessibility.
Specifically:
Screen Readers.
Google Translate.
And a secret 3rd option, which is learning how to code if you never did, I guess?
Remember ye olde days of customizing the HTML and CSS of your Tumblr blogs, circa 2014? The cool new place to do that is now your AO3 fics :)))
Have fun writing your wrong number AUs and group chat fics!
Do you know how to link sites in your description? I'm having a bit of trouble doing that.
Yes, if I’m not mistaken you have to use html for that?
So when you want to add the link, first type:
you’ll want the link to the site in between the quotation marks.
then after the “ > “, you’ll want to type whatever text you want the placeholder to be like “Click this to see my portfolio” or “Here is my About Me”, something like that, that will hold as the text that can be clicked on.
Finally, you’ll want to close out that html bracket with so that it seals bracket and forms the link for you.
Do you know how to do the big thick quotation marks?
"The whosie-whatsit now?"
//Hold up, Val, I think this one’s for me.
"Fine with me. I can’t make heads or tails of the question."
//Heh. Okay anon, the answer to your question is,Sort of? I could probably find out, or I’d just copy and paste from a source. Thing is, I don’t usually use a lot of formatting in my writing style, so I never had the need to learn how to use those. I do know that you can copy and paste the icon symbols for ❝ and ❞, and if you surround the symbols with and it will make them even larger. Like this: ❝ ❞
But again, out of personal preference, I use a lit style, with very minimal formatting, such as italics or bolding, for emphasis. Largely because I do so much writing that it would be a pain in the derriere to format everything.
