PERFECTLY GENERIC PODCAST IS A WEEKLY DISCUSSION ABOUT HOMESTUCK, HIVESWAP AND RELATED MEDIA AND CULTURE. IT'S HOSTED BY KATE MITCHELL AND A ROTATING PANEL OF GUESTS.

Ergodic Fiction, Weird Literature and A Revelation 23 Years In The Making

Ergodic Fiction, Weird Literature and A Revelation 23 Years In The Making

By Nell, @nellcromancer

FIC CONTENT WARNING: 

Contains transphobia, transphobic slurs, misgendering, dysphoria, descriptions of injury, and major character death.

Presenting:

>>A REVELATION 23 YEARS IN THE MAKING<<


>What is that?

It was an excerpt from chapter 2 of the fic “A Revelation 23 Years in the Making”, that takes place near the start of the chapter.

>Why is it you know... like that?

Do you mean, why is it all funky with its formatting and layers? Well it’s a piece of ergodic fiction.

>What is ergodic fiction?

Have you ever read House of Leaves? Me neither.  

Sorry, that’s probably not actually very helpful. Let me try a different approach. Ergodic Literature is, to quote Espen J Aarseth, and the wikipedia article for ergodic literature that I just pulled up in order to answer this question: 

“In ergodic literature, nontrivial effort is required to allow the reader to traverse the text. If ergodic literature is to make sense as a concept, there must also be nonergodic literature, where the effort to traverse the text is trivial, with no extranoematic responsibilities placed on the reader except (for example) eye movement and the periodic or arbitrary turning of pages” - That guy I just cited above, via wikipedia

To me, at least, ergodic literature is literature that makes an effort to imbue meaning into the format of the text, and not just the contexts of the text. This usually results in a work of literature that takes more effort to parse than traditional fiction, mostly because this sort of stuff can... get out of control, if you haven’t noticed. I don’t particularly care if I’m misusing the world Ergodic in a way that goes beyond its original definition because theres not really a better word for the kind of stuff I’m talking about.

>So how are you going to turn this from a google doc into an actual fic on AO3 that actual real people can read?

Yeah. That is... going to take a lot of effort. And a LOT of work on updating rev23’s workskin to be more compatible with the stuff I’m doing now. There’s some stuff in this fic that I can’t do through Google Docs, but can do by using CSS formatting; and I’ve tried to call out some of those instances via annotations in the excerpt. Stuff like J/hn’s text being blurry until his glasses come on, the time on his phone having a glow effect on it— that stuff I can’t do through google docs, but intend to have happen when the fic gets actually published.

>Is there a reason this fic is ergodic and not... normal?

It’s mostly a flex. 

>Huh. Okay.

No, wait. I was joking. Sort of.

There’s not one single reason I can point to as to why this fic is this way. I spend a lot of time thinking about the way Homestuck bend the mediums it uses in order to tell its story, and that generally gets me thinking about the medium I use to tell my stories, and the elements of said medium that are treated as a given. Shit like, the text color of work should be a single static color, a story should be in one column of text, The size of text should be uniform throughout, and the orientation of text is always aligned left. Shit like that means that by changing those rules you can implicitly imbue meaning into those changes.  Homestuck does some of this already, with Quirks and Text Color being deeply entwined with the themes of identity in the work. Each character’s text color is a core aspect of their identity, to the point where the cherubs associate changing their text color with a major societal coming-of-age moment. So Homestuck already has me thinking about the idea of color as identity. J/hn and Roxy have blue and pink text color respectively which is like textbook baby gender colors, and I’d already wanted to write a fic about J/hn coming out to Roxy, and all of those ideas sort of coalesced into the first draft of Ch1: a single unbroken dialogue between J/hn and Roxy, where J/hn slowly confronts their gender, with their text color fluctuating to provide insight into the complicated emotional quagmire of just such a conversation. I didn’t—and still don’t—want to assign a singular “state” or emotion to either of the two warring colors in Rev23. You could say that grey/brown is broadly a negative emotion set; a volatile mix of fear, internalised transphobia, resentment, anxiety, and pain;  and purple is broadly revelatory emotions: acceptance, understanding, catharsis, and the ever elusive “transy-ness” but thats too clean for what I’m trying to get at? The colors don’t track super cleanly onto any single one of those sets, as the color is meant to symbolize shifts in how J/hn views themself rather than a simple glimpse into their given emotional state.

So as I was working on that first draft, and annotating where the colors should shift in the dialogue, I realized that I really didn’t want the fic to just be one long pesterlog. Which led to the second draft of that chapter. I started adding in breaks,  points where the conversation could end and, give room for some prose. I wrote J/hns section first, that was the second draft, but as I was writing it, I kind of also wanted to show what Roxy was doing at the same time? I didn’t like the idea of writing a conversation that had as much baggage and hurt feelings on Roxy’s end without, giving Roxy an equal time in the spotlight. He should be just as much of a main character as J/hn is, and I thought it would be cool to juxtapose J/hn’s physical location against Roxy’s. I wanted to keep them in sync, I wanted sort of... aspect-coded events that played between the two characters. And I was examining CSS anyway, because I wanted to get those gradients into CH1 and I wasn’t totally sure how, I also learned that AO3 supports Tables. And that led to the third draft, where I essentially rewrote all of J/hn’s prose and added in Roxy’s perspective. I used Google Docs to ensure that each perspective was about the same size as the other so that it would look nice. (I actually ended up rewording a whole bunch of the prose sections in AO3 because the sizes weren’t as close as I wanted. It was a lot of work.) And I guess... that’s why this fic is ergodic. I wanted to give extra meaning to just about every aspect of the fic, and realized I could imbue the text with that meaning if I took the time to mess with how the fic was formatted. 

I hope that makes... literally any sense at all.

>Yeah, sure. I guess you answered the question.

Awesome.

>Cool, so how do you go about actually writing a piece of ergodic fiction?

Wait. hang on. Before I answer that question I want to be real about something, that in the long run doesn’t really matter, but I think, metatextually is an important thing to note. In the last big chunk answer I wrote, I was actually backfilling my understanding of why I wrote this story as ergodic based off of my best guesses and own scant recollections of my though process from when I was writing the first chapter of the fic, almost 9 months ago, and from a point where I’ve spent about nine months thinking about the meanings of what I wrote in a broader context—both because I’ve been writing the second chapter, but also because I’ve been thinking about how it fits into the much, much larger story I’m telling.  In truth I’m building a convenient answer out of providing a narrative to what was probably a whole bunch of spur-of-the-moment ideas and inspirations. I was probably inspired by some old Twine games that I’d made while in college. I was probably somewhat inspired by the Epilogues. I don’t actually fucking know. I’m just guessing at what I was thinking months ago, and providing the reasoning that has come from many extra months of obsessive thinking about Homestuck.

Now that that’s all cleared out of the way, ask that last question again.

>Cool, so how do you go about actually writing a piece of ergodic fiction?

Very good. You followed my instructions to the letter. And I want to answer this question by posing a question of my own.  I know that that’s an obnoxious thing to do, but I’m being clever, so stick with me. 

What does the framing device of the Command Prompt in this segment of this piece in the zine represent?

Is it a sort of fabricated Q and A, where the implication is that you, the reader, are explicitly asking me these questions, and that I’m answering them? 

Is it a way to organize my thoughts after being asked to write about the creative process behind a piece of fiction like Rev23? 

Is it like.... a narrative to build this section around?

Is it Plot?

IS THIS PLOT? 

>Is this plot?

Absolutely not. That's fucking ridiculous. I’d have to be insane to do plot for a fic in a zine like this. But even if it was, that’s not the point. The point isn’t that one answer to the question happens to be correct, but more the fact that I hopefully got you thinking about the structure of this segment in general. Because in my opinion, the best way to get started writing a story with ergodic elements is to think about what purpose those elements can serve in telling your story. Does it help you convey information in way that’s unique or compelling or thematically meaningful? Does it help you set the reader in the shoes of a character? Does it serve a plot purpose? Is it a mechanic? Is it something you can subvert?

Explore the space of literature by testing the boundaries of what prose can do. Or can’t do as the case may be. 

I guess the first thing to do is just... have an idea. Like... just off the top of my head. A science fiction story about a machine that alters the fabric of reality around the characters. Unless people are physically there to witness the activation of the machine they no idea whether or not the reality they are experiencing is the true reality, or if it has been altered by the machine. You, however, do want the readers to know that something might be off. You could establish a paradigm where the “original reality” is printed first at a much much lighter text color or displayed at a really low opacity, and then reprint the “altered” reality on top of it. You could even have moments where that original reality grows darker in text color as the overlaid reality recedes in opacity, say, if a character suddenly has a flashback to the unaltered reality, or something.  It’s just an example, to get you thinking in this direction. If you have an idea for how you can use the formatting of the text to clue readers into some of the more esoteric or thematic elements of a piece of fiction, you can actually start, writing with that formatting in mind.

Like. Chapter 2 of Rev 23, is a lot more ‘Ergodic’ than Chapter 1, because Chapter 1 introduced the “mechanics” that operate at the core of this fic: Text Color relates to identity, and multiple columns means multiple perspectives. Chapter 2 elaborates on each of these  mechanics in turn. There are more columns, and some columns are nested within other columns. The colors of the backgrounds changes and therefore there’s meaning behind that (that’s actually one of the more subtle mechanics in chapter 1, a dialogue with a grey background and dotted line means the context of that dialogue is a text conversation, which means that, for example text with a black background must have a different context than texting, etc etc). I’m trying to explore the systems that I developed in chapter one in a way that recontextualizes those systems.

If you’re at all familiar with game design, this actually probably sounds a lot like how game design works, and yeah. I mean. I went to college for game design. And it’s something I think Homestuck does as well; introducing a mechanic in a simple form so that the reader understands it, examining and recontextualizing that mechanic over and over in different ways until the reader has internalized it, and then it moves on to something else, or it combines that mechanic with another mechanic. Like Timetravel or Alchemy or Fetch Moduses or weird plot shit, or hell, even the way it reveals the ‘stories’ of characters. 

I’m getting off topic, and I think I basically answered the question already? Several different ways?  I hope???

Whatever. Next Command/Question/Bullet Point/Thing, please. 

>But what if this really is plot?

Wow, ok you’re still stuck on that, huh? Alright fine, let’s just say for a moment that this could be considered plot, I’ll even change my text color to reflect the state of quasi-true Authordom for the sake of this thought experiment.

Before we go any further, we should define what we mean by plot. Plot, in this case refers to an event of some consequence that exists on some diegetic or extradiegetic level, in this case existing on a stratum of narration above the throughspace of the narratosphere. A dimension above the dimension of narration. That might be confusing so lets consider instead an example. Take a story, specifically a story set within the homestuck cinematic universe, and think of it as if it was an onion. We’ll start at the innermost layer of the story and work our way outwards. The smallest point on the first layer we can start at is of course, a house. Then a city, a world, a solar system, galaxy, and finally arriving at the whole universe. We can call this layer, “the setting”. From there we move to the second layer, a dimension above the “setting”, the smallest point of this second layer is the incipisphere, which lies inside a medium which itself is situated somewhere in the vastness of Paradox Space. This is a sort of liminal space between the layer where the narrative itself is an object, and the layer where the story itself is an existence. Altogether those first two layers form the total space in which a story is an “event”. We’ll call that combination of layers a “Theater”, it could be a story, or a fic, a fanventure, whatever. It’s just the total space in which a story exists as a series of events, instead of as an object. This is the realm that Homestuck establishes and operates within. But we can actually expand further beyond the intial layers established by Homestuck, using the same rules it establishes with its constant expansion.

That expansion goes like this: Above the layer of paradox space we move into the sphere of related works. It’s been humorously referred to by some as the Homestuck Cinematic Universe, and is the layer in which all “Theaters” must therefore reside. No story is written in a vacuum, and as Homestuck has its influences so too do the fanworks it inspires. That influence can be charted, connected, and viewed as some sort of tapestry connecting all of fiction together in a great Narrative Weave. This is the realm of characters as archetypes, where the Ultimate Self resides.

It is the space between narrative as an object (Theater) and Author as a being (Reality). Or at least it would be were it any more than a fanfictional framework being established as a hypothetical diegetic layer to justify the question of whether or not a write up about the making of a piece of a fanfiction could be relevant to the fanfiction itself.

The layer above that would be that of our actual reality, the space where Authors and Audiences are not forces but rather individuals. Real people with their own lives.

The layer this event is happening on however, is ambiguous. We can’t say that this “event” is happening within the Narrative Weave or even the broader Cinematic Universe, because this interaction exists on a completely unique layer. It’s a layer that acknowledges the Author as a being (I’m actually really writing this), but also acknowledges the Audience as a force (Fandom). If this is plot, then has plot penetrated into the realm of reality, or does this interaction exist on some metareal layer, existing between social commentary and literary analysis? Or is there a sublayer between that of the Cinematic Universe and Reality, a sort of Paradox space of Cinematic Universes, where constructs such as Authors and Audiences exist in some quantum state between being a force and being a being? And if Plot has reached this far, what does that mean for reality?

What does it mean when people will harass and attack and doxx creators of media for having the gall to write complicated storylines? For depicting and being honest about terrible events? For liking certain characters? For making mistakes? What does it mean when an impromptu hate mob can be assembled when a somewhat prominent fan states as innocuous as their distaste in a character? What does it mean when a rabid, hateful section of a fanbase can lead a campaign of harassment against a fan creator for writing fic that a certain group has judged to be ‘harmful’? Perhaps in the eyes of some there is no difference between the world beyond that of the narrative onion, and the innermost layer of the onion itself. They ignore the stratification of stories and therefore actions and depictions of events and characters seen in these stories are just as real as those they see on the news. Perhaps to these individuals then, the act of harassing and attacking and causing real, emotional harm to the “offender” is seen as just. After all, a teen didn’t like the story they told, and so they tried to ruin their life.

Stories at once are influenced by and influence reality. But that influence is not equivalent, and it should not be treated as such. There is a nuance that must be acknowledged when discussing the influence of the fictive on the real. That nuance is less dire in the reverse. After all. When an audience is upset with a fiction, they do not aggrieve the fiction, they aggrieve the ones they presume to be responsible for the pain said fiction caused.

So is this plot? Does this interlude, with its narratological espousals on the diegetic structure of homestuck, and its somewhat spurious and possibly insensitive connection to the very real and charged topic of harassment in fandom spaces, create new meaning inside the realm of the story? Is it an event that will echo back in a way that affects the characters in their actions in the future in the realm of the diegetic? Does the discussion of the extradiegetic space this interlude takes place in necessarily mean that that extradiegetic space must exist within the fanfic itself? Or am I just kind of fucking with you? Is this the fate of all narrators? To just... fuck with readers?

>This is stupid. And also extremely confusing. And kind of upsetting there for a bit too.
Oh yeah totally. This whole interlude was extremely ill-conceived. We should go back to talking about the process of writing this fic. Quick ask me a question about like, how to format a fic like Rev23, so we can get back on topic and away from the dicey waters of narrative theory and fandom dynamics.

>Ok so lets say I have an idea for an ‘ergodic’ story. How do I actually format it? Like for AO3?

Awesome, yeah thats a good question. 

But uh, that’s the part that fucking sucks. It is a LOT of trial and error.  I can show some handy tools. I use https://www.w3schools.com/css/ A LOT to get ideas or check my work, or just for reference when I’m making a workskin. CSS is kind of a fucking mess and AO3 is weirdly picky about what it actually allows, so you can also check https://archiveofourown.org/faq/formatting-content-on-ao3-with-html, and https://archiveofourown.org/help/html-help.html for some help. Although Ao3 allows a lot more than what they claim to, but also they just flat out don't allow some things so it’s kind of a guessing game.

Also If you have weirdly specific things you’re trying to do try and google around a bit, because sometimes someone’s already asked that question on stackexchange, and that means you get the answers to their question without any extra effort!

If you want to learn about HTML, and how to use HTML, then there’s some good references and tutorials at https://www.w3schools.com/html/ 

I can also show you some excerpts of what my workskin as of chapter 1 of Rev23 looks like, and walk through what I’m doing and how it works. (fair warning, it's a total mess. I’m actually planning to completely restructure the workskin so that its more friendly to work with when i finally format this fucking second chapter.) Does that sound good?

>Yeah, sure sounds neat.

OH! One last disclaimer I’m not going to be explaining html basics like what <p> <div> or <span> mean because Seriously I just linked you resources above, and also I’m pretty sure you can google like “html tutorials” or whatever.

>Okay. Can you get to the worksheet thing?

Yeah, ok lets uh. start off with this bit.

#workskin .padless {
margin: 0;
padding: 0;
}
#workskin .block {
max-width: 60%;
margin-left: auto;
margin-right: auto;
background: #f2f2f2;
border: 1px dashed gray;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
}
#workskin .padlessclearblock {
max-width: 95%;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 1em;
padding-right: 1em;
}

#workskin .clearblock {
max-width: 95%;
margin-left: auto;
margin-right: auto;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
}

“blocks” are classes I use for <div> elements. “Block” used as <div class=”block”> is the class that creates that classic homestuck pesterlog look. Clearblock on the other hand is the divider I use for person-to-person Dialogue, Epilogues style. 

Padless is an essential element. Ao3 naturally adds in padding to your div and paragraph tags. I end up using my paragraph tags to do funky things with gradients and other such nonsense and I generally don't want those elements to have spacing that I dont fully intend so I’ll often create elements like this: 

<p class= “prose”>some text here blah blah blah</p>

<p class =”padless”><span class=”roxyprose”> Oh suddenly we know that Roxy’s prose is happening on this line but its flush with the last line so it doesn’t create an awkward break in the flow of that section</span></p>

padlessclearblock, then, is a combination of clearblock and the padless tag. It’s used in certain complicated sections, to cozy divs or paragraphs up to one another when I’m using other container tags to handle other classes.

#workskin .prose {
background: white;
color: black;
text-align: left;
text-indent: 20px;
width: 100%;
font-family: adobe-garamond-pro,serif;
}
#workskin .johntrans {
//prose
color: #733bcf;
background: white;
}
#workskin .johntranslog {
font-size: 14px;
font-weight: bold;
font-family: courier, monospace;
color: #733bcf;
}
#workskin .johndysphoria {
//prose
color: #7d5d66;
background: white;
}
#workskin .johndysphorialog {
font-size: 14px;
font-weight: bold;
font-family: courier, monospace;
color: #7d5d66;
}
#workskin .roxyprose {
background: white;
color: #ee68e2;
}

These pieces are fairly important for the actual setting of the text itself. 

I decided early on when making this workskin to separate the text of homestuck into two categories “prose” and “dialogue” or “text”. Prose is.... well. prose. It’s a serif font, there's indentation, etc etc etc. Dialogue is... classic Homestuck dialogue, with the Courier New font in bold.

 Since this fic is the way that it is, each character has one or more “prose” classes. J/hn, for example has 3 (well technically they have a lot more but it gets... weird. I’ll explain when i get to the gradients) different prose and dialogue types, I originally labeled them as John, JohnDysphoria and JohnTrans, which is sort of a simplistic way to label them but I had to call them something, even if now I’m referring to the brown text as “Fear” and the purple text as “Truth” but I’m not going to go back and rewrite my whole first chapter and workskin just to change something that exists primarily on a hypertextual level. Additionally at the time I was not really working with specific naming conventions, which... is definitely making my life harder in retrospect. 

One final note on the Prose/Dialogue stuffs. I’m aware that “Johntrans” is sort of a weird case of deadnaming but at the time I was just trying to format the fic and get it out into the open, and in that chapter j/hn hadn’t fully accepted they were trans. So. Yeah, it’s messy and complicated.

#workskin .gradprose {
-webkit-text-fill-color: transparent;
}
#workskin .graddialog,
#workskin .gradtext {
font-size: 14px;
font-weight: bold;
font-family: courier, monospace;
-webkit-text-fill-color: transparent;
}

If you’re interested in how I’m doing Gradients this is the interesting stuff. gradprose and graddialog. See, doing “gradient text” is basically a huge cheat. What you’re actually doing is: 1) making the background of an element an image, 2) making that image a dynamically generated gradient, 3) clipping that background image to only show up where there’s text, and 4) you have to turn the text transparent so you can see the gradient through the text. That last step is what gradprose and graddialog do.  CSS doesn’t natively support a grand majority of those steps natively, but Webkit does, and webkit (thank god) is the underlying engine that processes the grand majority of all web browsers! 

#workskin .johntranswobble {
background: linear-gradient(#0715cd, #7d5d66, #733bcf, #0715cd);
-webkit-background-clip: text;
}
#workskin .johntodysphoriamidtext {
margin: 0;
padding: 0;
background: linear-gradient(#0715cd,#7d5d66);
-webkit-background-clip: text;
}
#workskin .johntodysphoriahori {
background: linear-gradient(#0715cd,#7d5d66);
-webkit-background-clip: text;
}
#workskin .johntotranshori {
background: linear-gradient(to right,#0715cd,#733bcf);
-webkit-background-clip: text;
}
#workskin .johntransandback {
background: linear-gradient(#0715cd, #733bcf 25%,#733bcf 75%, #0715cd);
-webkit-background-clip: text;
}
#workskin .dysphoriatojohnmidtext {
margin: 0;
padding: 0;
background: linear-gradient(to top,#0715cd,#7d5d66);
-webkit-background-clip: text;
}
#workskin .johntransandbackmidtext {
margin: 0;
padding: 0;
background: linear-gradient(#0715cd, #733bcf 35%,#733bcf 75%, #0715cd);
-webkit-background-clip: text;
}
#workskin .dysphoriatotransmidtext {
margin: 0;
padding: 0;
background: linear-gradient(#7d5d66,#733bcf);
-webkit-background-clip: text;
}
#workskin .johntotranshori {
background: linear-gradient(to right,#0715cd,#733bcf);
-webkit-background-clip: text;
}
#workskin .transtodysphoriamidtext {
margin: 0;
padding: 0;
background: linear-gradient(#733bcf,#7d5d66);
-webkit-background-clip: text;
}
#workskin .johntodysphoriavert {
background: linear-gradient(#0715cd,#7d5d66);
-webkit-background-clip: text;
}
#workskin .johntodysphoriahori {
background: linear-gradient(#0715cd,#7d5d66);
-webkit-background-clip: text;
}
#workskin .johntotranshori {
background: linear-gradient(to right,#0715cd,#733bcf);
-webkit-background-clip: text;
}
#workskin .johntoroxyprosevert {
background: -webkit-linear-gradient(#0715cd, #ff6ff2,);
-webkit-background-clip: text;
}
#workskin .johntoroxyprosehori {
background: linear-gradient(to right,#0715cd, #ee68e2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#workskin .roxytojohnprosevert {
background: -webkit-linear-gradient(#ff6ff2,#0715cd);
-webkit-background-clip: text;
}
#workskin .roxytojohnprosehori {
background: -webkit-linear-gradient(to right,#ff6ff2,#0715cd);
-webkit-background-clip: text;
}
#workskin .roxytojohnprosehoripadless {
background: linear-gradient(to right,#ff6ff2,#0715cd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
padding: 0;
}

So these are the gradients themselves. You can see that there are a LOT of them. Thats because each time I needed a different type of gradient, be it top to bottom, left to right, different colors, etc, I needed a new CSS class for that entire container. So there ended up being a lot. 

There’s also variants that have the “padless” containers built in, for when I wanted J/hn’s text to change at a particular line or moment in the dialogue. 

Here’s an example of how the gradient classes work in dialogue , I’ll be adding some annotations into here in brackets, to explain some of the weirder parts.

<div class="block">

<p class="padless"><span class="john">JOHN: i'm sorry i know i sound like an ass hole right now but,</span><br /> [Starting off with a padless paragraph because it needs to sit flush with the rest of the dialogue when things switch to a gradient]

<span class="john">JOHN: i loved you so much i wanted to be you!</span><br />

<span class="roxy">ROXY: u barely fucking knew</span><br />

[I’m omitting some stuff because its just regularly formatted homestuck dialogue]

<span class="john">JOHN: was i like, just in a hurry to grow up?</span><br />

<span class="roxy">ROXY: john maybe we shld go back to what u were talkin abt before? </span><br />

<span class="john">JOHN: what about me loving you? sorry roxy but that moment sort of passed when you decided to be a guy and i'm not gay.</span><br />

<span class="roxy">ROXY: john omg i love u but sumtimes ur dumb as bricks</span><br />

<span class="john">JOHN: what? </span></p>

<p class="johntotransmidtext"><span class="graddialog">JOHN: oh are you talking about me saying i wanted to be you?</span><br /> [Here I’m switching to the padless version of “johntotrans”, so that it sits flush with the above paragraph tag. I’m also now using “graddialog” for all of J/hn’s speech to have their text be controlled by the gradient]

<span class="graddialog">JOHN: i.</span><br />

<span class="graddialog">JOHN: that's different.</span><br />

<span class="graddialog">JOHN: no offense roxy but...</span><br />

<span class="graddialog">JOHN: im not.</span><br />

<span class="graddialog">JOHN: like you.</span><br />

<span class="roxy">ROXY: just say the word john</span><br /> [important to note here, Roxy still uses the roxy class, but the gradient is sized to the size of the paragraph container, meaning that Roxy talking here means that J/hn’s text on the next line is gradiented differently than if it was an unbroken stream of just J/hn dialogue]

<span class="graddialog">JOHN: what, trans gender?</span></p>

<p class="padless"><span class="roxy">ROXY: technically nonbinary but thats not the point</span><br />

<span class="john">JOHN: roxy i'm sorry i just don't see what that has to do with me feeling weird and... angry at you for no good reason.</span><br />

<span class="roxy">ROXY: john can i just ask u a question straight up for a second?</span><br />

[More omission because, again, the fic itself is not the point.]

</div> [Don’t forget to close out your tags so that things actually... you know... work...]

I hope that that excerpt at least somewhat helps with understanding 

Also, if you’re ever going to use this as any type of guide (or just straight up lift my workskin, which I do not suggest b/c its a fucking mess), I’d advise you to avoid using these gradient classes in <span> tags. I’m not sure why but under certain cases, (and frequently on mobile) instead of rendering the gradiented text the way you’re intending, it instead doesn’t render anything at all, leaving you with a missing chunk of text. 

If you’ve noticed by now, these elements aren’t fully complete on their own but rather they’re modularized, intended to be slotted together with one another to complete a given effect. That’s probably the best tip I have when you’re looking to format your own fics? Try and think a little bit ahead. If you’re using a lot of differently sized text, for example, maybe you should separate the Text Sizes into separate classes that you can put into paragraph or div containers, so you don’t have to create variants for every color person who’s text might change.

>Okay, but how do you do the columns?

That’s not CSS. Thats just HTML. I’m not going to run through how to set up a whole table system in HTML, since there’s already references out there for that. But I’ll briefly describe how I set up the width of the tables. 

I use the <th> tag to djust the width of each column (Ao3 allows you to use the “width” keyword in  <th> tags so you don’t have to set the width through CSS, thank fucking god). 

The reason I used 3 columns was because I wanted there to be a small barrier between each segment of the text. Without that center column the text in each column sorta just... mushed right up against each other and was extremely difficult to read. 

>Very cool! Anything else you want to say about formatting?

No, god, this segment is already entirely too long, and its very boring to write about. Do you have any more questions?  (Say no so I can wrap this up before this writeup gets any fucking longer)

>I have no more questions.

Thank god honestly.

I really do hope you’ve enjoyed reading about the process of writing and formatting a piece of ergodic fiction, and the thought process that’s gone into the more technical aspects of this fic. I also hope you enjoyed the excerpt of the upcoming second chapter of  A Revelation 23 Years In the Making. It’ll be released.... whenever I’m done writing and formatting it! If you’re interested in reading more of my fic, including the Sister Project-Slash-Chronological-Follow-Up to Rev-23, The Ink Black Appendices, you can check out my AO3 Account

A Safe and Apolitical Guide to Writing Homestuck Dialog

A Safe and Apolitical Guide to Writing Homestuck Dialog

Postproduction in Homestuck and Beyond, Examined as Designed

Postproduction in Homestuck and Beyond, Examined as Designed