pyknicGinger

15/09/2013 03:42:55 ¶ ●

Formatting Pesterlogs on Ao3

First off, congratulations! If you’re reading this for help, you’ve likely already finished the hard part–that is, you’ve fleshed out your idea, started writing, and finished at least one chapter. You’re on a roll! If not, keep up the good work, ‘cause I know you’ll be there soon.

Now, down to business:

The Homestuck comic consists mainly of three parts: images, narration, and–of course–Pester/Dialoglogs. As a fanfiction writer, though, you’re going to be mostly concerned with the last two bits to support your works. Narration will make up the majority of your story, but, more often than not, you’ll also find yourself writing Pesterlogs to break up the longs blocks of text and keep your story as much inline with the Homestuck universe as possible. This is fanfiction, after all!

While fanfiction.net doesn’t offer much by way of formatting, you may have seen stories on Archive of Our Own brimming with pretty, colorful, canon-grade chats. It has to be magic, right? That’s the trick to it all? Or maybe Hussie, himself, has bestowed his graces on those particular works?

Not so, my friends! In reality, it’s actually pretty easy to fancy things up, so don’t worry your pretty little heads at all! Here’s how:

First, when you’re creating your story, you’ll see a box below the language option that will ask you about stylesheets. Click the little drop-down button and select Homestuck, as shown here:

This is very important, and nothing will work if you don’t change your sheet!

Got it? Good. Okay, moving on.

When you scroll down, the box at the bottom where you add your text will automatically default to a Rich Text Format editor. This means you’ll be pasting/writing in a white box with that lovely little format bar at the top–you know, the one with the bold, italic, etc. buttons? I recommend doing what you need to here, first. Get your chapter in there and fix all of the details you want; work out your spacing, add your heading breaks, etc.

Once your done, scroll to the bottom, where you’ll see three buttons:

Hit preview, double check that things look the way you want them to, and then scroll all the way down to the bottom again and click the Edit button again. This is a step you’ll repeat several times throughout the process–or, at least, I’ll tell you to–because I’ve had instances in the past where my formatting hasn’t saved at various stages and I’ve lost my work. Protip: previewing your chapter automatically saves things.

Anyway, once you’ve clicked the Edit button:

You’ll end up back where you started, here:

What you want to do now is click that little button on the right that says HTML. Your text should immediately change to something that looks like this:

At first, things will look really crowded and jumbled, so I recommend repeating the “preview; edit” step again, just so your browser will automatically adjust itself to the new formatting. You don’t have to do this, of course, but it just makes reading your text easier. When you get back to the edit page, your text editor should still be in HTML format, but things should look much nicer.

Now, down to the real business.

Scroll down within your chapter/story to the Pesterlog you want to format. You’ll see that the code will look something like this:

– carcinoGeneticist [CG] began pestering ectoBiologist [EB] at 23:47 –

CG: HEY, DUMBASS.

CG: HEY.

(note: I’m using text from one of my fics, simply because I can easily get screenshots of the editing process this way).

So you see those awkward “p"s? Those are HTML paragraph tags. They tell your browser to break a line after whatever is between the opening and closing markers. They’re pretty cool, because you can do all kinds of stuff with them! But in this case, we’ll only need to do one thing, because the rest will be covered using spans (I’ll get to those in a minute).

Now, you want that first part to be centered, right? If you didn’t already center it while you had the Rich Text Editor open, now is your chance! Simply add align="center” to the first opening paragraph tag, so your line now looks like this:

– carcinoGeneticist [CG] began pestering ectoBiologist [EB] at 23:47 –

Voila!

(note: Alternatively, you can add <center> </center> tags between or around your opening and closing p tags.)

Alright, the next step is to make everything pretty and colorful. That’s what you came for, right? Down to business.

First, let’s take a look at an actual Pesterlog. Here’s one of my favorites, from page 4637.

Notice how the first part is black, and the whole thing is in a basic HTML monospace font? (I think the Microsoft Word equivalent is Courier or Courier New.)

The lovely creators of the Homestuck Ao3 Stylesheet took this into account, so in addition to the character classes you also have something called the “black” class. Lost? Don’t worry! We’ll take this step by step.

In the Plain Text HTML editor, we’ll be using these special things called “span” tags, as I mentioned before. Like the p tags (and the i/em, b/strong tags you might see floating around your chapter while it’s in HTML-mode), span tags are used to apply certain formatting to specific sections of text. Whereas p tags designate line breaks (b/strong bolded text, and i/em italics), though, span tags are completely blank! If you don't tell them what to do, they won’t do anything at all!

So let’s stick one in our first line and tell it to make the text black and monospaced. Both of these commands are applied in the black class within your Homestuck CSS stylesheet (it’s like special magic that happens offscreen), so we just have to apply the keyword to make things happen.

– carcinoGeneticist [CG] began pestering ectoBiologist [EB] at 23:47 –

See how I’ve added the class=“black” to the span tag, much in the same way I added the align=“center” to the p tag? If you want, you can click the Preview button to see what happened to your text. Or you can just take my word for it! Either way is fine.

Once you figure out how to manipulate span tags like that, things become a lot easier! You can add them anywhere you want, as long as you remember to add a closing span tag where you want a particular style to stop.

(Protip: if you’re just making whole lines of text formatted, like Pesterlog lines, you only have to add the opening span tag within your opening p tag. All formatting ends at a closing p tag, so you don’t have to worry about closing the span tag because your browser will automatically do it for you when it hits a closing p tag! If you’re ending before the end of a line, though, you’ll need to add the closing span tag in by hand.)

In addition to the “black” CSS class, there are also formatting options for all four beta kids, all four alpha kids, and all twelve trolls. Let’s finish up the Pesterlog above so you can see a full example. I’ll be using John and Karkat for this one, because that’s who will be participating in the chat:

– carcinoGeneticist [CG] began pestering ectoBiologist at 23:47 –

CG: HEY, DUMBASS.

CG: HEY.

Here’s what it should look like in your edit window:

You’ll notice I’ve circled all of the important bits, because they are very important.

If you want, you can do a few lines and then click your Preview button to check your progress:

Ooh, ahh–pretty colors. (note: the top part is actually centered, mind you, not aligned to the right. I’m just really bad at screen-cropping, apparently.)

Anyway, That’s pretty much all you need to know! You can do this for all kinds of stuff, too, and mix and match the code for whatever you need! Another thing that people use the codes for is text messaging, because those are pretty popular in AU fics but don’t appear in canon. I’ve seen them done a few different ways: everything colored the same way Pesterlogs are, all black, colored names with black text (I use this particular way), or black names with colored text. It’s really all up to you! Which is pretty cool.

Okay, I think this has probably gone on long enough. I’ll close out this tutorial with a list of all possible HTML classes you can use! Keep in mind that they will change the color of the text to the color the character types in! If you’re wondering about dancestor trolls, their text will be the same as their beta troll equivalent (for instance, if you’re writing a Pesterlog between Meulin and Cronus, use the Nepeta and Eridan classes, respectively), and that Kankri’s text is the same color as Dave’s, so you can use the Dave class for him!

Classes:

Black
Dave
John
Rose
Jade
Dirk
Roxy
Jake
Jane
Eridan
Feferi
Gamzee
Equius
Vriska
Terezi
Kanaya
Nepeta
Sullox
Tavros
Aradia
Karkat

I hope this helps! If y'all have any questions about this (or anything else!) feel free to drop by my inbox! I’m always happy to hear from you guys!