File format

Rather than writing raw HTML for every page on this site (which would be a nightmare), I wrote a simple parser that accepts plain text scripts in a simple format and automatically generates the pages from those, and this is what I use to maintain the site.

It's probably easiest to illustrate by example, so I'll show snippets for each "feature" that I support. These are all taken from the script for this translated episode. The tl;dr is: use > for character dialogue, use @ for Yuuki's dialogue options, use [square brackets] for narration and other non-verbal stuff, and use {curly braces} for translation notes.

Normal dialogue and narration

[Chloe was unable to avoid ending with the same result as Chelle. Of the members of St. Theresa's School for Girls (BFFs Club), only Yuni was left standing.] >Chloe Guess I blew it, huh. I seriously don't know what went wrong. >Yuni It was probably because you didn't sell any products. >Chelle Well, anyway, you did your best.

This gets rendered into:

So, for dialogue lines, a > preceding a character's name means that character is about to deliver a line, and the very next line in the text file contains their dialogue. For narration, instead of attributing the line to any character in particular, I just enclose the narration in [square brackets]. You should also include the blank lines the way I have them.

Yuuki's lines

>Yuni Heh heh, listen and fall out of your seats in surprise. For you see! These photographs were taken by this very Yunicopter! @Yuuki 1. Be surprised. 2. Fall out of your seat. [Option 1.] >Yukari Eh... What's happening with you, shouting out like you're suddenly remembering something important... That timing was honestly too spot-on... >Yuni Heh heh... Just as dramatic as we'd planned, Yuuki. They say a thorough presentation is like a good stageplay. I am the director. Mercurius Audience Foundation, watch and be dazzled. [Option 2.] >Mifuyu Ehhh!? W-Why are you acting it out!? Quit physically endangering yourself by overreacting! I think I can can guess who put you up to this! >Yuni Hmm... I told him to act excessively surprised here, but he may have been overacting. Perhaps telling him to "imagine a high-energy Chloe acting chelly in the head" was the wrong acting advice to give... [End of branches.]

This gets rendered into:

So, for Yuuki's lines, because they always take the form of dialogue options, I use @ instead of > to annotate his name. The next series of consecutive lines are interpreted as the actual options, and get displayed in an indented block. You can have any number of consecutive lines, including just 1 line. A blank line is used to indicate the end of the dialogue options.

I always use "Option X." and "End of branches." to indicate where the branching dialogue starts and ends. These use the same [square brackets] that I use for narration.

Translation notes

>Chelle Yuni... I'm sorry, I misunderstood you. The truth is, I thought you were just some kind of pixie,{Chelle calls Yuni a <a href="https://en.wikipedia.org/wiki/Zashiki-warashi">zashiki-warashi</a>, a creature from northeastern Japanese folklore. It looks like a young child and basically hangs around people's houses, playing pranks.} fluttering around campus doing whatever you wanted, but I was wrong...!

This gets rendered into something like:

Of course, the translation notes box would actually be in the right column at the top of the page. Basically, to add a translation note, just enclose the note in {curly braces} in exactly the place where you want the note to point to. Notice that you can also inline raw HTML in the translation note, like I did with the hyperlink. You can actually do that anywhere in the script, if you ever want to add <i>italics</i> or other HTML formatting to the text.

That's really all there is to it. Once you get used to typing > and @ symbols before names, it's basically not much different from writing normal plain text, and it's just as easy to read.